[CSS] display 속성 값 block, inline, inline-block 개념 비교 정리

CSS 에서 아주 자주 사용되면서, 간단하지만 꽤나 중요한 개념인 display 속성의 block, inline, inline-block 의 개념을 서로 비교 하면서 정리해봅니다.

display

시작하기에 앞서 일단 CSS 에서 display 가 뭔지 정리합니다. display 속성은 그 값에 따라서 웹페이지를 보고 있는 사용자에게 특정 요소(element)를 어떻게 보여줄지 결정됩니다.

display 속성은 매우 다양한 값을 가질 수 있지만[1], 이 문서에서는 가장 기본이 되는 block, inline, inline-block 을 비교해 정리 하려 합니다.

block vs. inline

block

display 가 block 으로 설정된 요소는 다른 여러 요소들이 배치된 페이지에서 새로운 줄에 위치하면서, 가로 크기가 부모 요소의 100%를 차지합니다. 간단하게 말해서 어떤 특정 구역을 차지한다고 보면 됩니다.

가로(width)와 세로(height) 크기를 지정할 수 있으며, 가로 크기를 부모요소의 그것 보다 작게 설정 할 수 있지만, 그렇게 될 경우 나머지 부분은 margin 으로 채워져 여전히 block 으로 설정된 요소는 한 줄을 그대로 차지합니다.

block 속성을 기본 값으로 가지는 요소는 대표적으로 div, p 등이 있습니다.

inline

display 가 inline 으로 설정된 요소는 다른 요소들과 함께 같은 라인에서 표시되며, 마치 그 내용물을 진공포장 해놓은 것과 같이 내용을 감싸도록 구성됩니다.

가로와 세로의 크기를 임의로 지정 할 수 없으며[2], 그 크기는 오로지 포함하고 있는 내용에 의해서 결정됩니다.

대표적인 inline 요소로는 span 이 있습니다.

차이점

위에서도 언급했지만 둘의 차이는 명확히 아래와 같습니다.

  1. 요소가 새로운 행(new line)에서 시작하는지
  2. 요소의 크기를 지정할 수 있는지

inline-block

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


block 과 inline, inline-block 은 간단한 차이를 가지고 있지만, 그 특징을 모르는 상황에서는 inline 요소에 열심히 width 와 height 을 적용하면서 왜 안되지 하는 고민을 하면서 시간을 버릴 수 있으니, 그 특징을 파악하고 상황에 맞게 적절한 display 소성을 지정해 사용해야 합니다.

끝.

  1. CSS display Property, w3schools.com
  2. inline 요소는 CSS 에서 width 와 height 을 지정 할 수 없음