그때 그 시절 기억하고 싶어서 작성했습니다.
글 읽는데 있어서 어려움이 있을수 있습니다.
display 속성은 어떻게 보여지고 배치되는지 결정됩니다. 여러가지 display속성값중에서 inline, block, inline-block을 알아보겠습니다.
inline
<span>, <a>, <em>display 속성이 inline으로 지정되어 전후 줄바꿈 없이 한 줄에 나란히 배치됩니다.
inline 사용할 때 주의할 점은, width와 height 속성을 지정해도 무시된다는 것입니다. 왜냐하면 해당 태그와 컨텐트의 크기 만큼만 공간을 차지하도록 되어 있기 때문입니다. 또한, margin과 padding 속성은 좌우 간격만 반영이 되고, 상하 간격은 반영이 되지 않습니다.
block
<div>, <p>, <h1>display 속성이 block으로 지정되어 전후 줄바꿈이 들어가 다른 줄로 밀어내고 혼자 한 줄을 차지합니다.
예를 들어, 여러 개의 block 요소가 마크업하면 매번 줄바꿈 되어 여러 줄에 보이게 됩니다.
inline-block
<button>, <input>, <select>display 속성이 inline-block으로 지정된 요소가 마치 합쳐서 이동하는데요. 기본적으로 inline 요소처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치되지만, block 요소처럼 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능합니다. 다시 말해서, 내부적으로는 block 요소의 규칙을 따르면서 외부적으로 inline 요소의 규칙을 따르게 되는 것입니다. 따라서 inline-block을 이용하면 여러개의 요소를 한줄에 정확히 원하는 만큼 배치 할수 있습니다.
