[css] display - inline, inline-block, block

display

display의 속성을 알아보려고 한다. 물론 inline, inline-block, block뿐만이 아니라 다른 속성들이 더 있지만 여기선 제일 많이 쓰이는 속성들을 정리해보겠다.

우선 크게 태그를 inline과 block으로 나누겠다.

block

<address>, <article>, <aside>, <blockgquote>, <canvas> 
<dd>, <div>, <dl>, <hr>, <header>, <form>,<h1>, <h2>,
<h3>, <h4>, <h5>, <h6>, <table>, <pre>, <ul>, <p>, <ol>, <video>

inline

<a>, <i>, <span>, <abbr>, <img>, <strong>, <b>, <input>, 
<sub>, <br>, <code>, <em>, <small>, <tt>, <map>, 
<textarea>, <label>, <sup>, <q>, <button>, <cite>

물론 지금 나열한 것 보다 더 많은 태그들이 있다. 하지만 그래도 자주 쓰는 태그들을 적으려 노력해보았다.

1. inline

inline은 가로와 세로의 크기를 임의로 지정 할 수 없으며, 그 크기는 오로지 포함하고 있는 내용에 의해서 결정됩니다. block과는 반대 개념으로 본인이 갖고 있는 요소이며 대표적인 태그로는 span이다.

2. inline-block

display: inline-block은 말그대로 inline과 block을 합친 것으로 block 처럼 가로와 세로 크기를 설정 할 수 있으면서도, 새로운 줄에서 시작하지 않고, inline 처럼 다른 요소와 같은 라인에 배치되는 장점을 가지고 있습니다.

3. block

display 가 block 으로 설정된 요소는 다른 여러 요소들이 배치된 페이지에서 새로운 줄에 위치하면서, 가로 크기가 부모 요소의 100%를 차지합니다. 간단하게 말해서 어떤 특정 구역을 차지한다고 보면 됩니다.
가로(width)와 세로(height) 크기를 지정할 수 있으며, 가로 크기를 부모요소의 그것 보다 작게 설정 할 수 있지만, 그렇게 될 경우 나머지 부분은 margin으로 채워져 여전히 block 으로 설정된 요소는 한 줄을 그대로 차지합니다.