block요소와 inline요소

html태그는 block요소와 inline요소로 나뉩니다.
태그마다 block요소나 inline요소가 되며, 각 특징에 따라 웹페이지에서 표현됩니다.

이 요소(태그)는 css 속성 중에서 display로 변경할 수 있으며, inline요소와 block요소가 섞인 inline-block도 있습니다.
요소 변경은 display:inline-block으로 주어서 변경할 수 있습니다.

 

block요소

block요소는 기본적으로 영역을 가지고 있습니다.

내용이 가로에 다 차지하지 않아도 다음 태그는 다음 줄에 표현됩니다.
반면 inline요소는 다음 줄로 가지 않고 바로 옆으로 나오게 됩니다.

CSS를 통해서 block요소의 가로, 세로, 여백 등을 변경할 수 있습니다. 이를 통해 레이아웃을 구성할 수 있습니다.
대표적인 태그로는 div, p, h1~h6, ol, ul, li, form 등이 있습니다.

block요소는 또 다른 block요소를 포함할 수 있습니다. 또한 inline요소도 포함할 수 있습니다.

 

 

inline요소

inline요소는 일반적으로 줄바꿈이 되지 않습니다. 텍스트처럼 옆으로 이어져서 표현됩니다.

inline요소는 가로, 세로, 여백 등을 이용할 수 없습니다. 즉 적용이 되지 않습니다. 다만 속성을 사용하여 크기, 굵기, 간격 등을 이용하여 다른 표현을 할 수 있습니다.

대표적인 태그로는 span, a, em, label, strong, address 등이 있습니다.

 

inline-block요소

css속성 중 display를 통해서 inline-block를 줄 수 있습니다.

inline-block는 inline요소와 block요소의 특징을 동시에 가집니다. inline요소처럼 line-height를 사용할 수 있으며, 또한 width, height 값을 가질 수도 있습니다.

기본적으로 inline-block의 태그는 없으나 css속성으로 변경할 수 있습니다.

div{display:inline-block}
p{display:inline}
a{display:block}

태그가 기존에 가지고 있는 block, inline를 css를 통해 변경할 수 있습니다.
다만 해당 태그의 특징을 살리기 위해 레이아웃에 맞게 태그를 사용하며, display 속성의 사용을 줄이는 것이 좋습니다.

 

- block요소는 다른 block요소를 포함할 수 있습니다.
- inline요소도 다른 inline요소를 포함할 수 있습니다.
- block요소는 다른 inline요소를 포함할 수 있습니다.
- 다만 inline요소는 block요소를 포함할 수 없습니다.

* inline요소를 css속성 중 display를 block로 변경하여 다른 block를 포함할 수 있습니다. 다만 좋은 마크업 방법은 아닙니다.