본문 바로가기
  • search_ _ _ _
  • search_ _ _ _
  • search_ _ _ _
html+css

블록요소/인라인요소

by 오늘의갈비찜 2020. 5. 11.
728x90

블록요소 (block element)

요소 안 내용 길이에 상관없이 요소 자체가 한 줄 전체를 차지하는 요소

때문에 아래로 블럭처럼 차곡차곡 쌓임

 

width, height값 먹힘

 

display:inline CSS명령어로 블록 요소를 인라인 요소의 속성으로 변경 할 수 있다

 

 

 

 

h1, h2, h3, h4, h5, h6 :1~6단계 제목

div :문서 분할

header :페이지나 구역의 헤더

section :웹 페이지의 구역

footer :페이지나 구역의 푸터

ol :순서 있는 리스트 (= 정렬된 목록)

ul :순서 없는 리스트 (= 정렬되지 않은 목록.)

li :목록의 항목.

address :연락처 정보

article :단락 콘텐츠

aside :부가 콘텐츠

blockquote :긴 인용구

details :상세 정보 위젯

dialog :대화상자

dd :설명 목록의 정의 설명

dl :설명 목록

dt :설명 목록의 정의

fieldset :필드 집합의 라벨

figcaption :그림 설명

figure :미디어 콘텐츠 그룹과 설명. (<figcaption> 참고)

form :입력 폼

hgroup :헤더 정보 그룹

hr :수평선(구분선)

main :문서에서 하나 뿐인 중심 콘텐츠

nav :탐색 링크를 포함

p :문단

pre :미리 서식 적용한 글

table :

canvas

noscript

output

video

 

인라인 요소 (inline element)

 

요소 안 내용 길이에 좌우, 해당 요소 안 내용 길이 만큼만 너비 차지하는 요소.

때문에 옆으로 하나하나 나열됨

 

width, height 값을 줘도 안 먹힘.

 

display:block,  display:inline-block   CSS명령어로 인라인 요소를 블록 요소의 속성으로 변경 할 수 있다.

 

 

a

input

img

label

button

img

span

strong

b
big
i
small
tt
abbr
acronym
cite
code
dfn
em
kbd

samp
var

bdo
br 
map
object
q
script
sub
sup

object

select

textarea

 

 

 

 

 

 

 

728x90

'html+css' 카테고리의 다른 글

background 속성  (0) 2021.04.24
hover시 background-images 확대하기  (0) 2020.11.21
태그 사용시 주의해야 할 점!  (0) 2020.11.21
루트디렉토리  (0) 2020.05.06