display 종류

css를 작성하다 보면 특정 버튼을 누르면 어떤 창을 가릴 때 display: none이라는 속성을 사용해 보시거나 display: flex를 이용하여 정렬을 한다거나 display 속성을 접하는 경우는 아주 당연합니다. display 속성이 무엇이 있는지 정리해 보겠습니다.

display

CSS에서 display 속성은 HTML 요소가 렌더링되고 웹 페이지에 표시되는 방식을 제어하는 데 사용됩니다. 어떤 종류의 요소를 생성하고 주위의 다른 요소와 상호 작용하는 방법을 지정합니다.

block

일반적으로 div가 갖는 기본의 block레벨 요소입니다. 기본적으로 width가 100%를 차지합니다. 쉽게 말하면 한 줄을 차지한다고 보면 되겠습니다.

inline

inline 요소는 block 요소와 다르게 한 줄 전체를 차지하지 않고 콘테츠를 포함하는 데 필요한 만큼의 너비만 차지합니다.

inline-block

inline과 block의 특성을 합쳐 놓은 속성이라고 생각하며 됩니다. 원래 대로라면 block 요소는 한 줄에 하나씩 밖에 못 와서 inline 요소 옆에 올 순 없지만 이 속성은 가능합니다.

none

요소는 전혀 표시되지 않으므로 완전히 보이지 않으며 문서 흐름에서 공간을 차지하지 않습니다. 레이아웃에서 효과적으로 제거됩니다.

style.css

body,
html {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}

div {
  height: 100px;
}

.box1 {
  background-color: red;
}
.box2 {
  display: inline;
  background-color: yellow;
}

.box3 {
  display: inline-block;
  background-color: black;
  color: white;
}

.box4 {
  display: none;
}

html

 <div class="box1">Block</div>
 <div class="box2">inline</div>
 <div class="box3">inline-block</div>
 <div class="box4">inline</div>

아래 사진을 보시는 것처럼 전체 div에 height: 100px을 적용하였습니다. 블록 레벨의 box1은 width를 적용하지 않아도 전체를 차지하는 것을 보실 수 있습니다. box2(inline)은 콘테츠의 크기만큼 차지하기 때문에 높이가 존재하지 않고 inline-block 속성을 적용한 box3는 inline 특징처럼 콘테츠의 요소만큼 너비가 늘어나 있고 block 특성 또한 같기 때문에 height도 적용되었습니다. none을 적용한 box4는 아예 보이지 않습니다.

이 외에도 flex, grid 등 다른 속성들도 존재하지만 대표적인 4가지만 적어봤습니다. flex와 grid는 하나 하나 따로 작성해 보는 게 좋을 것 같습니다.