CSS의 display 속성은 웹 페이지에서 요소가 어떻게 표시될지를 결정하는 핵심 속성입니다. 레이아웃을 구성할 때 반드시 알아야 할 속성으로, 각 값에 따라 요소가 인라인으로 흐르는지, 블록으로 영역을 차지하는지 등이 달라집니다.
CSS display 속성의 주요 값
display 속성에서 자주 사용되는 주요 값과 그 의미는 다음과 같습니다.
| 번호 | 속성 값 | 설명 |
|---|---|---|
| 1 | inline | 요소를 인라인(줄 안에 나란히 배치되는) 요소로 표시합니다. |
| 2 | block | 요소를 블록(한 줄 전체를 차지하는) 요소로 표시합니다. |
| 3 | contents | 컨테이너 자체를 화면에서 사라지게 하고, 자식 요소들을 DOM 상위 단계 요소의 직접적인 자식처럼 동작하게 만듭니다. |
| 4 | flex | 요소를 블록 레벨의 플렉스(flex) 컨테이너로 표시합니다. |
| 5 | grid | 요소를 블록 레벨의 그리드(grid) 컨테이너로 표시합니다. |
| 6 | inline-block | 요소를 인라인 레벨의 블록 컨테이너로 표시합니다. |
| 7 | inline-flex | 요소를 인라인 레벨의 플렉스 컨테이너로 표시합니다. |
| 8 | inline-grid | 요소를 인라인 레벨의 그리드 컨테이너로 표시합니다. |
| 9 | inline-table | 요소를 인라인 레벨의 테이블로 표시합니다. |
예제 1: none과 inline 활용하기
다음 예제를 통해 CSS display 속성이 실제로 어떻게 적용되는지 확인해 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
span {
background-color: orange;
color: white;
}
p.demo {
display: none;
}
span.demo1 {
display: inline;
}
</style>
</head>
<body>
<h1>경기 일정</h1>
<div>
경기는 12월 20일 <p class="demo">오전 9시</p> 오전 10시에 시작됩니다.
</div>
<div>
경기는 12월 20일 <span class="demo1">오후 5시</span>에 종료됩니다.
</div>
</body>
</html>
실행 결과
위 예제에서 p.demo에는 display: none;이 적용되어 해당 문단이 화면에서 완전히 사라진 것을 확인할 수 있습니다. 반면 span.demo1에는 display: inline;이 적용되어 텍스트 흐름 안에 자연스럽게 배치됩니다.
예제 2: block과 inline-block 비교하기
이번에는 block과 inline-block의 차이를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: orange;
color: white;
}
p.demo1 {
display: block;
}
p.demo2 {
display: inline-block;
}
</style>
</head>
<body>
<h1>경기 일정</h1>
<div>
경기는 2019년 12월 19일 <p class="demo1">오전 10시</p>에 시작됩니다.
</div>
<div>
경기는 2019년 12월 19일 <p class="demo2">오후 5시</p>에 종료됩니다.
</div>
</body>
</html>
실행 결과
display: block;이 적용된 요소는 앞뒤 줄바꿈이 발생하며 한 줄 전체를 차지하는 반면, display: inline-block;이 적용된 요소는 인라인처럼 다른 요소와 같은 줄에 배치되면서도 블록 요소처럼 너비와 높이를 지정할 수 있다는 차이가 있습니다.
정리
display 속성은 요소의 표시 방식을 제어하는 CSS의 기본이자 핵심입니다. 특히 최신 레이아웃 기법인 flex와 grid도 모두 display 속성의 값으로 구현되므로, 각 값의 특성을 정확히 이해해 두면 반응형 웹 디자인과 복잡한 레이아웃 작업이 훨씬 수월해집니다.