[CSS] CSS 기초 - Display 알아보기

Display

display는 block, inline, flex, grid 등 요소가 화면에 어떻게 표시되어야 하는지를 결정하는 속성이다.

display에 적용할 수 있는 대표적인 값은 아래와 같다.

• block
• inline
• inline-block
• none

---

block

div가 가지고 있는 기본 속성으로 가로 영역을 모두 차지하는 속성이며, 이를 설정한 요소를 Block Level Element(블록 레벨 엘리먼트)라고 부른다.

 

See the Pen Untitled by Lu Zu (@Lu-Zu) on CodePen.

 

inline

span이 가지고 있는 기본 속성으로 이를 설정한 요소의 컨텐츠만큼 영역을 차지하는 속성이다. 이러한 특성 때문에 width, height 등 크기를 임의로 설정할 수 없으며 줄바꿈이 불가능하다.

 

See the Pen Untitled by Lu Zu (@Lu-Zu) on CodePen.

 

inline-block

inline과 block을 합쳐놓은 속성으로 inline 속성과 같이 컨텐츠 만큼 영역을 차지해 배치되지만, block처럼 임의로 width, height 등 크기를 설정할 수 있다.

 

See the Pen Untitled by Lu Zu (@Lu-Zu) on CodePen.

 

none

이 속성을 설정한 요소를 보이지 않도록 한다. 단순히 보이지 않고 영역을 차지하는 visibility: hidden 와는 다르게 보이지 않으면서 영역 또한 차지하지 않는다.

 

See the Pen Untitled by Lu Zu (@Lu-Zu) on CodePen.