CSS의 display 속성은 웹 페이지에서 요소가 어떻게 렌더링될지 결정하는 핵심 속성입니다. 이 속성을 활용하면 요소를 블록 또는 인라인 형태로 배치하거나, 플렉스·그리드 컨테이너로 변환하고, 심지어 화면에서 완전히 숨기는 것까지 가능합니다.
아래 표는 display 속성에서 자주 사용되는 주요 값들을 정리한 것입니다.
display 속성의 주요 값
| 번호 | 속성 값 및 설명 |
|---|---|
| 1 | inline 요소를 인라인 요소로 표시합니다. 텍스트 흐름 안에서 줄바꿈 없이 배치됩니다. |
| 2 | block 요소를 블록 요소로 표시합니다. 항상 새로운 줄에서 시작하며 전체 너비를 차지합니다. |
| 3 | contents 컨테이너 박스 자체를 사라지게 하고, 자식 요소들을 DOM 상위 레벨 요소의 직계 자식처럼 동작하게 만듭니다. |
| 4 | flex 요소를 블록 수준의 플렉스 컨테이너로 표시합니다. |
| 5 | grid 요소를 블록 수준의 그리드 컨테이너로 표시합니다. |
| 6 | inline-block 요소를 인라인 수준의 블록 컨테이너로 표시합니다. 인라인처럼 배치되면서 내부는 블록처럼 동작합니다. |
| 7 | inline-flex 요소를 인라인 수준의 플렉스 컨테이너로 표시합니다. |
| 8 | inline-grid 요소를 인라인 수준의 그리드 컨테이너로 표시합니다. |
| 9 | inline-table 요소를 인라인 수준의 테이블로 표시합니다. |
이 외에도 display: none;을 사용하면 해당 요소를 화면에서 완전히 숨길 수 있으며, 문서 흐름에서도 제거됩니다.
예제 1 – none과 inline 활용하기
다음 예제는 display: none으로 특정 단락을 숨기고, display: inline으로 span 요소를 인라인으로 표시하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
span {
background-color: orange;
color: white;
}
p.demo {
display: none;
}
span.demo1 {
display: inline;
}
</style>
</head>
<body>
<h1>Match Details</h1>
<div>
Match will begin at <p class="demo">9AM</p> 10AM on 20th December.
</div>
<div>
Match will end at <span class="demo1">5PM</span> on 20th December.
</div>
</body>
</html>실행 결과
위 코드에서 p.demo에 적용된 display: none; 때문에 "9AM"이라는 텍스트는 화면에 나타나지 않습니다. 반면 span 요소는 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>Match Details</h1>
<div>
Match will begin at <p class="demo1">10AM</p> on 19th Decemenber, 2019.
</div>
<div>
Match will end at <p class="demo2">5PM</p> on 19th Decemenber, 2019.
</div>
</body>
</html>실행 결과
display: block;이 적용된 첫 번째 단락은 앞뒤로 줄바꿈이 발생하며 독립적인 블록을 형성합니다. 반면 display: inline-block;이 적용된 두 번째 단락은 문장 흐름 안에 배치되면서도 내부적으로는 블록 요소의 특성을 유지합니다.
마무리
display 속성은 CSS 레이아웃의 기초이자 핵심입니다. 각 값의 동작 방식을 정확히 이해해두면 flexbox나 grid 같은 현대적인 레이아웃 기법을 학습할 때 큰 도움이 됩니다. 다양한 값을 직접 실험해 보며 요소의 배치 변화를 익혀보시기 바랍니다.