대부분의 HTML element는 block 요소이다.
예를 들어, header, footer, p, li, table, div, h1등이 모두 block 요소에 해당하는 태그들이다.
block 요소의 의미는, 이 요소 바로 옆(좌우측)에 다른 요소를 붙여넣을 수 없다는 뜻이다.
block 요소와 성질이 반대인 inline 요소도 있다.
span, a, img태그 등이 inline 요소이다.
inline이라는 말 그대로 inline 요소는 요소끼리 서로 한 줄에, 바로 옆에 위치할 수 있다는 뜻이다.
Block
display가 block 으로 설정된 요소는 다른 여러 요소들이 배치된 페이지에서 새로운 줄에 위치하면서, 가로 크기가 부모 요소의 100%를 차지한다. 간단하게 말해서 어떤 특정 구역을 차지한다고 보면 된다.
가로(width)와 세로(height) 크기를 지정할 수 있으며, 가로 크기를 부모요소의 그것 보다 작게 설정 할 수 있지만, 그렇게 될 경우 나머지 부분은 margin 으로 채워져 여전히 block 으로 설정된 요소는 한 줄을 그대로 차지한다.
block 속성을 기본 값으로 가지는 요소는 대표적으로 div, p 등이 있다.
Inline
display 가 inline 으로 설정된 요소는 다른 요소들과 함께 같은 라인에서 표시되며, 마치 그 내용물을 진공포장 해놓은 것과 같이 내용을 감싸도록 구성된다.
가로와 세로의 크기를 임의로 지정 할 수 없으며, 그 크기는 오로지 포함하고 있는 내용에 의해서 결정된다.
대표적인 inline 요소로는 span이 있다.
(ps. Inline-block)
display가 inline-block 으로 설정된 요소는 block속성과 inline속성을 섞어 놓은 것과 같다. block처럼 가로와 세로 크기를 설정 할 수 있으면서도, 새로운 줄에서 시작하지 않고, inline처럼 다른 요소와 같은 라인에 배치되는 장점을 가지고 있다.
