Display

display 속성은 웹 페이지 안에서 요소들이 어떻게 배치되는지를 결정한다. 여러 개의 속성값이 있지만 대표적으로 많이 사용되는 것은 inline, inline-block, block이다. 지금부터 이 세가지를 알아보도록 하자!

inline

<span>, <input>, <a> 등이 인라인 요소이며 줄바꿈 없이 한 줄에 나란히 배치된다.

이처럼 inline 요소는 안에 들어있는 내용의 크기만큼 태그의 크기를 결정한다. 그래서 몇 가지 알아야 할 점이 있다.

• width와 height값이 먹히지 않는다!
• padding 속성은 좌우 간격만 반영된다!

block

<div>, <p>, <h1> 등의 태그가 block 요소이며 혼자 한 줄의 공간을 다 차지하여 줄바꿈이 일어난다.

inline은 width, height 값이 적용되지 않고 좌우 padding, margin의 값만 적용되었지만 block은 margin, padding, width, height 다 적용이 된다.

inline-block

처음 보여질 때는 inline처럼 한 줄에 나란히 배치된다. 얼핏 보면 inline과 똑같은 결과인 것 같지만 inline-block은 inline 특징과 함께 block의 특징도 가지고 있다.

inline에서는 margin, padding, width, height 값이 적용이 되지 않지만 inline-block은 block의 특징도 가지고 있기 때문에 태그가 한 줄에 배치되게 하면서 width, height, padding, margin도 부여할 수 있다.