CSS의 display 속성은 웹페이지의 요소가 어떻게 표시되는지를 지정하는 데 사용됩니다. 이 속성을 사용하여 요소의 레이아웃과 동작을 제어할 수 있습니다.

기본값

display 속성의 기본값은 inline입니다. 따라서 대부분의 HTML 요소는 inline으로 표시됩니다. 그러나 블록 수준 요소(div, p 등)의 경우 기본값은 block입니다.

주요 속성 값

1. block

block 값은 요소를 블록 수준 요소로 지정합니다. 즉, 요소가 새로운 줄에서 시작하고 가로폭 전체를 차지합니다.

2. inline

inline 값은 요소를 인라인 요소로 지정합니다. 인라인 요소는 새로운 줄에서 시작하지 않고 필요한 만큼의 너비만 차지합니다.

3. inline-block

inline-block 값은 요소를 인라인 블록 요소로 지정합니다. 즉, 인라인처럼 새로운 줄에서 시작하지 않지만, 블록처럼 요소의 너비와 높이를 조절할 수 있습니다.

사용 예시

HTML:

<div class="box"></div>

CSS:

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: red;
}

위 예시에서 .box 요소는 inline-block으로 지정되어 있으므로 가로폭과 높이를 지정할 수 있고, 인라인처럼 옆으로 나란히 배치됩니다.

display 속성은 웹페이지의 요소들의 레이아웃을 제어하는 중요한 속성 중 하나입니다.

더 자세한 내용은 Mozilla Developer Network에서 확인할 수 있습니다.