display 속성은 HTML 요소가 화면에서 어떻게 배치될지 결정하는 속성이다. 웹페이지의 레이아웃을 만들 때 가장 중요한 속성 중 하나이며, 요소를 블록 요소, 인라인 요소, 플렉스 박스, 그리드 등으로 설정할 수 있다.
주요 값
block (블록 요소)
- 한 줄 전체를 차지하며, 줄 바꿈이 발생한다.
width,height,margin,padding속성이 적용된다.- 대표적인 블록 요소:
<div>,<p>,<h1> ~ <h6>,<section>,<article>,<header>,<footer>등
예시
.block-box {
display: block;
width: 200px;
height: 100px;
background-color: lightblue;
}<div class="block-box">나는 블록 요소입니다.</div>특징
블록 요소는 자동으로 새 줄에서 시작하며, 전체 너비를 차지한다.
inline (인라인 요소)
- 내용의 크기만큼 공간을 차지하며, 줄 바꿈이 발생하지 않는다.
width,height적용 ❌ (적용되지 않음)- 대표적인 인라인 요소:
<span>,<a>,<strong>,<em>,<label>,<img>등
예시
.inline-box {
display:inline;
width: 200px; /* 적용되지 않음 */
height: 100px; /* 적용되지 않음 */
background-color: lightcoral;
}<span class="inline-box">나는 인라인 요소입니다.></span>
<span class="inline-box">나도 인라인 요소입니다.></span>특징
인라인 요소는 줄 바꿈 없이 연속해서 배치되며, width, height 값이 적용되지 않는다.
inline-block (인라인 + 블록 요소)
- 인라인 요소처럼 한 줄에 배치되지만, 블록 요소처럼
width,height적용 가능 - 대표적인 예제:
<button>,<input>,<select>,<img>
예시
.inline-block-box {
display: inline-block;
width: 150px;
height: 50px;
background-color: lightgreen;
text-align: center;
padding: 10px;
}<span class="inline-block-box">나는 inline-block 요소</span>
<span class="inline-block-box">나도 inline-block 요소</span>특징
inline 요소처럼 옆으로 나열되지만, block 요소처럼 크기 조절이 가능하다.
none (숨김)
- 요소를 화면에서 완전히 제거한다.
- 요소가 차지하는 공간조차 사라지므로 다른 요소가 해당 공간을 차지한다.
예시
.hidden-box {
display: none;
}<div class="hidden-box">이 요소는 보이지 않습니다.</div>visibility: hidden;과 차이점
display: none;: 요소가 아예 사라짐 (공간도 사라짐)visibility: hidden;: 요소는 보이지 않지만, 공간은 유지됨
레이아웃 관련 display 값
flex (플렉스 박스)
- 유연한 레이아웃을 만들 때 사용되는 강력한 속성
- 부모 요소에
display: flex;를 적용하면, 자식 요소들이 자동으로 한 줄 또는 여러 줄로 정렬됨 justify-content,align-items등의 속성과 함께 사용됨
예시
.flex-container {
display: flex;
justify-content: space-between;
align-items: center;
background-color: lightgray;
padding: 10px;
}
.flex-item {
width: 100px;
height: 50px;
background-color: steelblue;
color: white;
text-align: center;
line-height: 50px;
}<div class="flex-container">
<div class="flex-item">Box 1</div>
<div class="flex-item">Box 2</div>
<div class="flex-item">Box 3</div>
</div>특징
display: flex;를 사용하면 자동 정렬이 가능justify-content,align-items등을 이용해 정렬을 쉽게 제어할 수 있음
grid (CSS Grid)
- 2차원 레이아웃을 만들 때 사용
- 부모 요소에
display: grid;적용하면, 자식 요소들이 자동으로 행과 열로 정렬됨 grid-template-columns,grid-template-rows등의 속성과 함께 사용됨
예시
.grid-container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(2, 100px);
gap: 10px;
background-color: lightgray;
padding: 10px;
}
.grid-item {
background-color: tomato;
color: white;
text-align: center;
line-height: 100px;
}<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>특징
display: grid;를 사용하면 행과 열을 쉽게 배치할 수 있음gap속성으로 요소 간격을 조정 가능
정리
| 값 | 설명 |
|---|---|
block | 블록 요소 (줄 바꿈 O, width, height 적용 가능) |
inline | 인라인 요소 (줄 바꿈 X, width, height 적용 불가) |
inline-block | 인라인 요소처럼 동작하지만 width, height 적용 가능 |
none | 요소를 화면에서 숨김 (공간도 사라짐) |
flex | 1차원 정렬이 가능한 레이아웃 시스템 |
grid | 2차원 정렬이 가능한 레이아웃 시스템 |
언제 어떤 display 값을 사용할까?
| 원하는 동작 | 적절한 display 값 |
|---|---|
| 줄 바꿈이 필요할 때 | block |
| 줄 바꿈 없이 내용 정렬 | inline |
| 크기 조정 가능한 인라인 요소 | inline-block |
| 요소를 숨기고 싶을 때 | none |
| 가로/세로 정렬이 필요한 경우 | flex |
| 행과 열을 조절하는 레이아웃 | grid |
dislplay 속성은 웹 페이지에서 요소의 배치를 결정하는 중요한 속성이다.
기본적인 block vs inline 개념을 이해하고, flex와 grid를 잘 활용하면 더 효과적인 레이아웃을 만들 수 있다.
Turning Vision into Reality.