본문 바로가기
HTML

인라인 구조와 블록 구조

by dongjin6539 2023. 2. 17.
728x90
반응형

블록 레벨 요소와 인라인 요소

블록 레벨 요소(Block-level Elements)

블록 레벨 요소(Block-level Elements)는 마크업을 할 때 줄이 바뀌는 특성을 가지고 있습니다. 블록 요소는 하나의 박스라고 생각하면 됩니다.

블록 레벨 요소는 일부를 제외한 블록 요소를 포함하고, 텍스트(문자)와 인라인 요소를 자식 요소로 포함할 수 있습니다.

 

인라인 요소(Inline Elements)

인라인 요소(Inline Elements)는 마크업을 할 때 가로로 정렬이 됩니다. 인라인 요소는 텍스트라고 생각하면 됩니다.

인라인 요소는 텍스트(문자)와 인라인 요소를 자식으로 포할할 수 있지만 블록 레벨 요소를 자식 요소로 포함할 수 없습니다.

block 요소에 inlin 요소가 포합

 

block 레벨 요소는 세로 나열, inlin 요소는 세로 나열

이미지 출처

블록 레벨 요소(Block-level Elements) 와 인라인 요소(Inline Elements) 태그

블록 태그 인라인 태그
h1~h6 strong
address img
p span
ol a
ul b
li em
div mark
table small
header sub
article sup

 - 추가로 더 많은 태그들이 있습니다.

 

요소 전환

블록 레벨 요소를 인라인 요소로, 인라인 요소를 블록 레벨 요소를 전환 시킬 수 있습니다.

 

  • 블록 레벨 요소 → 인라인 요소 전환

 

  • 인라인 요소 → 블록 레벨 요소 전환

 

 

728x90
반응형