display 속성

display 속성은 요소의 디스플레이(표시) 방식 유형을 정의합니다.

이 속성으로 요소가 외부 레이아웃에 따라 디스플레이되는 방식이나,
요소 상자 자체와 내부의 레이아웃의 디스플레이 방식을 지정할 수 있습니다.

구문

아래는 display 속성에서 자주 사용되는 값들의 일부를 유형별로 정리한 구문 예시입니다.

CSS 
/* 외부 + 내부 디스플레이 유형 */
display: block;
display: inline;
display: inline-block;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: flow-root;
display: table;
display: list-item;

/* 요소 자체 디스플레이 유형 */
display: none;       /* 요소 자체를 화면에 표시하지 않음 */
display: contents;   /* 요소는 제거하고 자식 요소만 남김 */

/* 테이블 내부 디스플레이 유형 */
display: table-row;
display: table-cell;
display: table-caption;

/* 두 개의 값: 명시적 외부 + 내부 디스플레이 조합 (복합 키워드) */
display: block flex;
display: block grid;
display: inline flex;
display: inline grid;

/* 전역 값 */
display: inherit;
display: initial;
display: unset;
display: revert;
display: revert-layer;

데모

다음의 CSS 데모로 display 속성으로 요소의 표시와 레이아웃 방식 유형을 어떻게 정의하는지 살펴보세요.

CSS 데모: display 데모 버튼을 클릭해 보세요!

값

display 속성은 키워드 값을 사용하여 지정합니다.
먼저 브라우저에서 지원하는 호환성을 고려해서 대표적인 값을 표로 간단히 살펴보고, 이후 각각의 값을 유형별로 정리합니다.

키워드 값 요약표

display 속성의 키워드 값 요약표
값설명
none 요소를 표시하지 않습니다.
(화면에서 요소와 그 안의 콘텐츠 모두가 존재하지 않는 것처럼 렌더링됩니다.)
contents 요소 상자의 컨테이너 자체는 표시하지 않지만 그 안의 콘텐츠(가상 콘텐츠 포함)는 그대로 렌더링됩니다.
block 일반적인 문서 흐름에서 요소의 앞과 뒤 요소를 줄바꿈 시키고, 컨테이너 영역을 정의할 수 있는 블록 레벨의 컨테이너를 생성합니다.
inline 일반적인 문서 흐름에서 요소의 앞뒤를 줄바꿈 시키는 성격이 없는 인라인 레벨 컨테이너를 생성합니다.
inline-block 일반적인 문서 흐름에서 요소의 앞뒤를 줄바꿈 시키는 성격이 없는 인라인 레벨의 블록 컨테이너를 생성합니다.
flex 일반적인 문서 흐름에서 요소의 앞과 뒤 요소를 줄바꿈 시키고, 컨테이너 영역을 정의할 수 있는 블록 레벨의 플렉스 컨테이너를 생성합니다.
inline-flex 일반적인 문서 흐름에서 요소의 앞뒤를 줄바꿈 시키는 성격은 없지만, 컨테이너 영역을 정의할 수 있는 인라인 레벨의 플렉스 컨테이너를 생성합니다.
grid 일반적인 문서 흐름에서 요소의 앞과 뒤 요소를 줄바꿈 시키고, 컨테이너 영역을 정의할 수 있는 블록 레벨의 그리드 컨테이너를 생성합니다.
inline-grid 일반적인 문서 흐름에서 요소의 앞뒤를 줄바꿈 시키는 성격은 없지만, 컨테이너 영역을 정의할 수 있는 인라인 레벨의 그리드 컨테이너를 생성합니다.
list-item 일반적인 문서 흐름에서 요소의 앞과 뒤 요소를 줄바꿈 시키고, 컨테이너 영역을 정의할 수 있으며, <li> 요소처럼 마커가 표시되는 블록 레벨의 컨테이너를 생성합니다.
table 일반적인 문서 흐름에서 요소의 앞과 뒤 요소를 줄바꿈 시키고, 컨테이너 영역을 정의할 수 있으며, <table> 요소처럼 테이블 레이아웃을 형성하는 블록 레벨의 테이블 박스를 생성합니다.
inline-table 일반적인 문서 흐름에서 요소의 앞뒤를 줄바꿈 시키는 성격은 없지만, 컨테이너 영역을 정의할 수 있으며, <table> 요소처럼 테이블 레이아웃을 형성하는 인라인 레벨의 테이블 박스를 생성합니다.
table-caption <caption> 요소의 디스플레이 방식입니다.
table-row <tr> 요소의 디스플레이 방식입니다.
table-cell <td> 요소의 디스플레이 방식입니다.
table-header-group <thead> 요소의 디스플레이 방식입니다.
table-row-group <tbody> 요소의 디스플레이 방식입니다.
table-footer-group <tfoot> 요소의 디스플레이 방식입니다.
table-column-group <colgroup> 요소의 디스플레이 방식입니다.
table-column <col> 요소의 디스플레이 방식입니다.

알아두세요!
위 값 외에도 ruby, run-in, flow-root 등 display 값이 더 있습니다. 하지만, 브라우저 지원이 제한적이거나 실무 사용 빈도가 낮아 여기서는 다루지 않습니다. 다루지 않는 값들에 대해서는 MDN 문서에서 참조할 수 있습니다.

이제 각 키워드 값의 의미를 하나씩 자세히 살펴보겠습니다.

none

none 키워드 값은 요소를 화면에 표시하지 않습니다.

이 값이 적용되면, 요소와 그 안의 콘텐츠는 화면에서 완전히 사라진 것처럼 렌더링됩니다. 따라서 공간도 차지하지 않으며, 주변 레이아웃에도 영향을 주지 않습니다. 또한 스크린 리더를 사용하는 시각 장애인은 이 요소에 접근할 수 없습니다.

다만, 해당 요소는 여전히 DOM에 존재하므로 자바스크립트로는 접근이 가능합니다.

예제
HTML 
<ol>
    <li>A</li>
    <li class="ex">B</li> <!-- 화면에 표시하지 않습니다. -->
    <li>C</li>
    <li>D</li>
</ol>
CSS 
.ex {
    display: none;
}

.ex 선택자를 가진 B항목은 display: none으로 인해 마크업하지 않은 것처럼 화면에 표시되지 않습니다.
하지만, DOM에는 존재하므로 자바스크립트로 접근 가능합니다.

실제 적용된 모습

참고하세요!
만약 요소를 렌더링하지 않으면서도 정상적으로 공간을 차지하도록 하고 싶다면, display: none 대신에 CSS의 visibility 속성을 사용하세요.

display: none이 기본값으로 설정되어 있는 요소

브라우저의 기본 스타일시트에서 display: none이 기본값으로 설정되어 있는 요소들은 다음과 같습니다.

none 값에 대한 자세한 설명과 더 많은 예제는 CSS display: none 완벽 가이드를 참조하세요!

contents

contents 키워드 값은 요소 상자의 컨테이너 자체는 표시하지 않지만 그 안의 콘텐츠는 그대로 렌더링됩니다.
또한, ::before, ::after 등의 가상 요소로 생성된 콘텐츠도 그대로 렌더링됩니다.

단, 콘텐츠가 없다면, display: none 방식이 적용됩니다.

예제
HTML 
<button class="ex" type="button">Button</button>
<hr>
<p class="ex">Hello <strong>World</strong></p>
<hr>
<a class="ex" href="https://www.google.com/" target="_blank">Google로 이동하기</a>
<hr>

<!-- 콘텐츠가 없다면, display: none 방식이 적용됩니다. -->
<p class="ex"></p>
<hr>
<input class="ex" type="text">
CSS 
.ex {
    display: contents;
}

.ex 선택자를 가진 요소들은 모두 자체 요소 상자의 컨테이너 자체는 표시하지 않고 내부 콘텐츠만 렌더링됩니다. 그런데, <p class="ex"></p>처럼 콘텐츠가 없거나 <input>처럼 콘텐츠를 가질 수 없는 빈 요소 경우에는 display: none처럼 동작하여 아예 표시되지 않습니다.

실제 적용된 모습

content 값에 대한 좀 더 자세한 설명은 CSS display: contents 완벽 가이드를 참조하세요!

block

block 키워드 값은 일반적인 문서 흐름에서 요소의 앞과 뒤 요소를 줄바꿈 시키고,
컨테이너 영역을 정의할 수 있는 블록 레벨의 컨테이너를 생성합니다.

다음은 브라우저의 기본 스타일시트에서 display: block이 기본값으로 설정되어 있는 대표적인 요소들입니다.

display: block으로 설정된 요소들은 요소의 앞과 뒤 요소를 줄바꿈시킵니다.
그리고 요소의 컨테이너 영역, 즉 요소의 너비나 높이 등을 지정할 수 있습니다.

이번에는 display: block이 기본값으로 설정된 요소들을 실제로 마크업하고 CSS로 요소의 영역을 눈으로 살펴볼 수 있도록 했습니다.

display: block인 요소의 특징 예시
HTML 
<h3>h3</h3>
<p>p</p>
CSS 
h3, p {
    width: 70px; /* 너비 지정 */
    height: 100px; /* 높이 지정 */
    border: 1px solid red; /* 빨간색 테두리 지정 */
}

위 코드를 적용하면, 각 요소는 앞뒤 요소와 줄바꿈되며 너비와 높이를 가지는 박스로 표시됩니다.

실제 적용된 모습

지금까지는 display: block의 기본 개념과 특징을 살펴봤습니다.
이번에는 기본적으로 display: block이 아닌 요소에 display: block을 적용하면 어떤 변화가 생기는지 예제를 통해 확인해보겠습니다.

예제: block이 아닌 요소에 display: block 적용하기

이제 display: block이 기본값으로 설정되어 있지 않은 <span> 요소의 디스플레이 방식을 먼저 살펴보고, 이후 display: block을 적용했을 때 어떤 방식으로 바뀌는지 확인해 보겠습니다.

HTML 
<span>첫 번째 span</span>  
<span>두 번째 span</span>
<span>세 번째 span</span>
CSS 
span {
    width: 70px; /* 너비 지정 */
    height: 100px; /* 높이 지정 */
    border: 1px solid red; /* 빨간색 테두리 지정 */
}
실제 적용된 모습

실제 적용된 모습을 보면, <span> 요소는 줄바꿈 없이 한 줄에 나란히 표시됩니다.
이것은 <span> 요소가 브라우저의 기본 스타일시트에서 display: inline이 기본값으로 설정되어 있기 때문입니다. 또한, width: 70px과 height: 100px로 요소의 너비와 높이를 지정했지만 display: inline으로 설정된 요소는 일반적인 문서 흐름에서 이러한 크기 지정이 적용되지 않습니다.

앞서 살펴본 <span> 요소에 display: block을 적용하면 다음과 같은 변화가 일어납니다.

변경된 CSS
CSS 
span {
    width: 70px;
    height: 100px;
    border: 1px solid red;
    display: block; /* 👈 display: block 적용 */
}
실제 적용된 모습

<span> 요소에 display: block을 적용하면

  • 요소의 앞과 뒤를 줄바꿈 시킵니다.
  • width: 70px과 height: 100px로 지정한 요소의 너비와 높이가 적용됩니다.

inline

inline 키워드 값은 일반적인 문서 흐름에서 요소의 앞뒤를 줄바꿈 시키는 성격이 없는 인라인 레벨 컨테이너를 생성합니다.

일반적인 문서 흐름에서는 너비(width)와 높이(height) 같은 컨테이너 영역을 정의할 수 없습니다.
다만, 일반적인 문서 흐름이 아닌 다음의 경우

  • float이 설정된 경우
  • position: absolute 또는 position: fixed가 설정된 경우
  • 플렉스 박스의 아이템으로 사용되는 경우
  • 그리드 박스의 아이템으로 사용되는 경우

에는 예외적으로 컨테이너 영역(너비, 높이)을 지정할 수 있습니다.

또한, <img>, <iframe>, <input>, <button> 등과 같은 대체 요소(replaced element)는 inline을 기본값으로 설정되어 있는 요소임에도 불구하고 고유한 렌더링 규칙을 가지고 있어, 기본 상태에서도 너비와 높이를 지정할 수 있습니다.

브라우저의 기본 스타일시트에서 display: inline이 기본값으로 설정되어 있는 대표적인 요소들입니다.

이번에는 display: inline이 기본값으로 설정된 요소들을 실제로 마크업하고 CSS로 요소의 영역을 눈으로 살펴볼 수 있도록 했습니다.

display: inline인 요소의 특징 예시
HTML 
<span>span</span>
<strong>strong</strong>
<em>em</em>
CSS 
span, strong, em {
    width: 70px; /* 너비 지정 */
    height: 100px; /* 높이 지정 */
    border: 1px solid red; /* 빨간색 테두리 지정 */
}

위 코드를 적용하면, 각 요소는 앞뒤 요소와 줄바꿈 시키는 성격이 없는 한 줄로 된 인라인 레벨 컨테이너로 표시됩니다. 이 요소들은 일반적인 문서 흐름에서는 너비(width)와 높이(height) 같은 컨테이너 영역을 정의할 수 없음을 알 수 있습니다.

실제 적용된 모습

지금까지는 display: inline의 기본 개념과 특징을 살펴봤습니다.
이번에는 기본적으로 display: inline이 아닌 요소에 display: inline을 적용하면 어떤 변화가 생기는지 예제를 통해 확인해보겠습니다.

예제: inline이 아닌 요소에 display: inline 적용하기

이제 display: inline이 기본값으로 설정되어 있지 않은 <div> 요소의 디스플레이 방식을 먼저 살펴보고, 이후 display: inline을 적용했을 때 어떤 방식으로 바뀌는지 확인해 보겠습니다.

HTML 
<div>첫 번째 div</div>  
<div>두 번째 div</div>
<div>세 번째 div</div>
CSS 
div {
    width: 70px; /* 너비 지정 */
    height: 100px; /* 높이 지정 */
    border: 1px solid red; /* 빨간색 테두리 지정 */
}
실제 적용된 모습

실제 적용된 모습을 보면, <div> 요소는 앞뒤 요소와 줄바꿈됩니다.
이것은 <div> 요소가 브라우저의 기본 스타일시트에서 display: block이 기본값으로 설정되어 있기 때문입니다. 또한, width: 70px과 height: 100px로 요소의 너비와 높이를 지정한 것이 그대로 적용됩니다.

앞서 살펴본 <div> 요소에 display: inline을 적용하면 다음과 같은 변화가 일어납니다.

변경된 CSS
CSS 
div {
    width: 70px;
    height: 100px;
    border: 1px solid red;
    display: inline; /* 👈 display: inline 적용 */
}
실제 적용된 모습

<div> 요소에 display: inline을 적용하면

  • 요소의 앞과 뒤를 줄바꿈 시키는 성격이 없어지고 한 줄로 표시됩니다.
  • width: 70px과 height: 100px로 지정한 요소의 너비와 높이가 적용되지 않습니다.

inline-block

inline-block 키워드 값은 일반적인 문서 흐름에서 요소의 앞뒤를 줄바꿈 시키는 성격이 없는 인라인 레벨의 블록 컨테이너를 생성합니다.

inline 키워드 값처럼 일반적인 문서 흐름에서 요소의 앞뒤를 줄바꿈 시키는 성격은 없지만, 일반적인 문서 흐름에서는 너비(width)와 높이(height) 같은 컨테이너 영역을 정의할 수 없는 inline 키워드 값과는 다르게 block 키워드 값처럼 컨테이너 영역을 정의할 수 있습니다.

다음은 inline 값을 이해하는 데 도움이 되도록 block, inline, inline-block을 간단히 비교한 표입니다.

block, inline, inline-block을 간단히 비교한 표
키워드 값 줄바꿈 발생 여부 일반적인 문서 흐름에서 영역 정의 가능 여부
block 예 예
inline 아니오 아니오
inline-block 아니오 예

지금까지는 display: inline-block의 기본 개념과 특징을 살펴봤습니다.
이번에는 기본적으로 display: inline-block이 아닌 요소에 display: inline-block을 적용하면 어떤 변화가 생기는지 예제를 통해 확인해보겠습니다.

예제: inline-block이 아닌 요소에 display: inline-block 적용하기

이제 display: inline-block이 아닌 <div>와 <span> 요소의 디스플레이 방식을 먼저 살펴보고, 이후 display: inline-block을 적용했을 때 어떤 방식으로 바뀌는지 확인해 보겠습니다.

HTML 
<h6>diplay가 block인 div 요소</h6>
<div>첫 번째 div</div>  
<div>두 번째 div</div>
<div>세 번째 div</div>
<h6>diplay가 inline인 span 요소</h6>        
<span>첫 번째 span</span>  
<span>두 번째 span</span>
<span>세 번째 span</span>
CSS 
div, span {
    width: 70px; /* 너비 지정 */
    height: 100px; /* 높이 지정 */
    border: 1px solid red; /* 빨간색 테두리 지정 */
}
실제 적용된 모습
  • display가 block인 <div> 요소는 줄바꿈이 발생하며, 일반적인 문서 흐름에서 너비(width)와 높이(height)가 적용됩니다.
  • display가 inline인 <span> 요소는 줄바꿈이 발생하지 않고 한 줄로 표시되며, 일반적인 문서 흐름에서 너비(width)와 높이(height)가 적용되지 않습니다.

앞서 살펴본 <div>와 <span> 요소에 display: inline-block을 적용하면 다음과 같은 변화가 일어납니다.

변경된 CSS
CSS 
div, span {
    width: 70px;
    height: 100px;
    border: 1px solid red;
    display: inline-block; /* 👈 display: inline-block 적용 */
}
실제 적용된 모습

<div>와 <span> 요소에 display: inline-block을 적용하면

  • 요소의 앞과 뒤를 줄바꿈 시키는 성격이 없어지고 한 줄로 표시됩니다.
  • width: 70px과 height: 100px로 지정한 요소의 너비와 높이가 적용됩니다.

flex

flex 키워드 값은 일반적인 문서 흐름에서 요소의 앞과 뒤 요소를 줄바꿈 시키고,
컨테이너 영역을 정의할 수 있는 블록 레벨의 플렉스 컨테이너를 생성합니다.

이 값은 외부 디스플레이는 block 값으로 동작하며, 내부 디스플레이는 플렉스 박스 모델에 따라 콘텐츠를 배치합니다.

예제
HTML 
<div class="flex-container">
    <div class="flex-item">child 1</div>
    <div class="flex-item">child 2</div>
    <div class="flex-item">child 3</div>
</div>
CSS 
.flex-container {
    display: flex;
    border: 2px solid #333;
    padding: 10px;
}
.flex-item {
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    margin: 5px;
}
실제 적용된 모습

inline-flex

inline-flex 키워드 값은 일반적인 문서 흐름에서 요소의 앞과 뒤 요소를 줄바꿈 시키는 성격은 없지만,
컨테이너 영역을 정의할 수 있는 인라인 레벨의 플렉스 컨테이너를 생성합니다.

이 값은 외부 디스플레이는 inline 값으로 동작하며, 내부 디스플레이는 플렉스 박스 모델에 따라 콘텐츠를 배치합니다.

HTML 
<p>
    앞 문장
    <span class="inline-flex-container">
        <span class="flex-item">child 1</span>
        <span class="flex-item">child 2</span>
        <span class="flex-item">child 3</span>
    </span>
    뒷 문장
</p>
CSS 
.inline-flex-container {
    display: inline-flex;
    background-color: #eef;
}
.inline-flex-container > span {
    padding: 10px;
    background: #99c;
    margin: 5px;
}
실제 적용된 모습

grid

grid 키워드 값은 일반적인 문서 흐름에서 요소의 앞과 뒤 요소를 줄바꿈 시키고,
컨테이너 영역을 정의할 수 있는 블록 레벨의 그리드 컨테이너를 생성합니다.

이 값은 외부 디스플레이는 block 값으로 동작하며, 내부 디스플레이는 그리드 박스 모델에 따라 콘텐츠를 배치합니다.

예제
HTML 
<div class="grid-container">
    <div class="grid-item">child 1</div>
    <div class="grid-item">child 2</div>
    <div class="grid-item">child 3</div>
    <div class="grid-item">child 4</div>
    <div class="grid-item">child 5</div>
    <div class="grid-item">child 6</div>
</div>
CSS 
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, auto);
    border: 2px solid #333;
    padding: 10px;
    gap: 10px;
}
.grid-item {
    background-color: #4CAF50;
    color: white;
    padding: 10px;
}
실제 적용된 모습

inline-grid

inline-grid 키워드 값은 일반적인 문서 흐름에서 요소의 앞과 뒤 요소를 줄바꿈 시키는 성격은 없지만,
컨테이너 영역을 정의할 수 있는 인라인 레벨의 그리드 컨테이너를 생성합니다.

이 값은 외부 디스플레이는 inline 값으로 동작하며, 내부 디스플레이는 그리드 박스 모델에 따라 콘텐츠를 배치합니다.

예제
HTML 
<p>
    앞 문장
    <span class="inline-grid-container">
        <span class="grid-item">child 1</span>
        <span class="grid-item">child 2</span>
        <span class="grid-item">child 3</span>
        <span class="grid-item">child 4</span>
        <span class="grid-item">child 5</span>
        <span class="grid-item">child 6</span>
    </span>
    뒷 문장
</p>
CSS 
.inline-grid-container {
    display: inline-grid;
    grid-template-columns: repeat(3, auto);
    background-color: #eef;
    gap: 5px;
}
.grid-item {
    padding: 10px;
    background: #99c;
}
실제 적용된 모습

list-item

일반적인 문서 흐름에서 요소의 앞과 뒤 요소를 줄바꿈 시키고, 컨테이너 영역을 정의할 수 있으며, <li> 요소처럼 마커가 표시되는 블록 레벨의 컨테이너를 생성합니다.

예제
HTML 
<p>p 요소를 display: list-item으로 적용하기</p>
<p>p 요소를 display: list-item으로 적용하기</p>
<p>p 요소를 display: list-item으로 적용하기</p>
CSS 
p {
    display: list-item;
}
실제 적용된 모습

알아두세요!
display: list-item이 적용된 요소는 리스트 마커 관련 속성(list-style, list-style-type, list-style-image, list-style-position)을 적용할 수 있습니다.

table

일반적인 문서 흐름에서 요소의 앞과 뒤 요소를 줄바꿈 시키고, 컨테이너 영역을 정의할 수 있으며, <table> 요소처럼 테이블 레이아웃을 형성하는 블록 레벨의 테이블 박스를 생성합니다.

주의할 점

display: table는 시각적으로는 테이블 레이아웃을 형성하지만, HTML의 실제 <table>요소가 아니기 때문에 의미론적인 측면에서 대부분의 접근성 도구에서는 의미 있는 데이터 테이블로 인식되지 않을 수 있습니다. 이로 인해 스크린 리더 등 보조 기술은 테이블의 구조적 의미(행, 열, 셀 등)를 이해하지 못하고, 단순한 레이아웃 요소로 해석할 가능성이 있습니다.

inline-table

일반적인 문서 흐름에서 요소의 앞뒤를 줄바꿈 시키는 성격은 없지만, 컨테이너 영역을 정의할 수 있으며, <table> 요소처럼 테이블 레이아웃을 형성하는 인라인 레벨의 테이블 박스를 생성합니다.

이 값은 외부 디스플레이는 inline 값으로 동작하며, 내부 디스플레이는 블록 레벨의 테이블 박스 모델에 따라 콘텐츠를 배치합니다.

table-caption

<caption> 요소의 디스플레이 방식입니다.

<caption>요소가 아닌 다른 요소에서 적용된 table-caption 값은 display: table 또는 display: inline-table이 적용된 요소의 첫 번째 자식 요소로만 사용되어 하며, <table> 요소의 자식으로는 사용할 수 없습니다. 만약 <table> 요소에서 사용되면 HTML의 테이블 구문 규칙 위반이 되어 브라우저가 올바르게 렌더링할 수 없게 됩니다.

이처럼 올바르게 table-caption 값이 적용된 요소는 테이블 캡션의 위치를 지정하는 caption-side 속성을 적용할 수 있습니다.

table-row

<tr> 요소의 디스플레이 방식입니다.

<tr>요소가 아닌 다른 요소에서 적용된 table-row 값은 display: table 또는 display: inline-table이 적용된 요소의 콘텐츠로만 사용되어야 하며, HTML의 테이블 구문 규칙에 맞게 사용되어야 합니다. <table> 요소의 콘텐츠로는 사용할 수 없습니다. 만약 <table> 요소에서 사용되면 HTML의 테이블 구문 규칙 위반이 되어 브라우저가 올바르게 렌더링할 수 없게 됩니다.

table-cell

<td> 요소의 디스플레이 방식입니다.

<td> 요소가 아닌 다른 요소에서 적용된 table-cell 값은 display: table 또는 display: inline-table이 적용된 요소의 콘텐츠로만 사용되어야 하며, HTML의 테이블 구문 규칙에 맞게 사용되어야 합니다. <table> 요소의 콘텐츠로는 사용할 수 없습니다. 만약 <table> 요소에서 사용되면 HTML의 테이블 구문 규칙 위반이 되어 브라우저가 올바르게 렌더링할 수 없게 됩니다.

table-header-group

<thead> 요소의 디스플레이 방식입니다.

<thead> 요소가 아닌 다른 요소에서 적용된 table-header-group 값은 display: table 또는 display: inline-table이 적용된 요소의 콘텐츠로만 사용되어야 하며, HTML의 테이블 구문 규칙에 맞게 사용되어야 합니다. <table> 요소의 콘텐츠로는 사용할 수 없습니다. 만약 <table> 요소에서 사용되면 HTML의 테이블 구문 규칙 위반이 되어 브라우저가 올바르게 렌더링할 수 없게 됩니다.

table-row-group

<tbody> 요소의 디스플레이 방식입니다.

<tbody> 요소가 아닌 다른 요소에서 적용된 table-row-group 값은 display: table 또는 display: inline-table이 적용된 요소의 콘텐츠로만 사용되어야 하며, HTML의 테이블 구문 규칙에 맞게 사용되어야 합니다. <table> 요소의 콘텐츠로는 사용할 수 없습니다. 만약 <table> 요소에서 사용되면 HTML의 테이블 구문 규칙 위반이 되어 브라우저가 올바르게 렌더링할 수 없게 됩니다.

table-footer-group

<tfoot> 요소의 디스플레이 방식입니다.

<tfoot> 요소가 아닌 다른 요소에서 적용된 table-footer-group 값은 display: table 또는 display: inline-table이 적용된 요소의 콘텐츠로만 사용되어야 하며, HTML의 테이블 구문 규칙에 맞게 사용되어야 합니다. <table> 요소의 콘텐츠로는 사용할 수 없습니다. 만약 <table> 요소에서 사용되면 HTML의 테이블 구문 규칙 위반이 되어 브라우저가 올바르게 렌더링할 수 없게 됩니다.

table-column-group

<colgroup> 요소의 디스플레이 방식입니다.

<colgroup> 요소가 아닌 다른 요소에서 적용된 table-column-group 값은 display: table 또는 display: inline-table이 적용된 요소의 콘텐츠로만 사용되어야 하며, HTML의 테이블 구문 규칙에 맞게 사용되어야 합니다. <table> 요소의 콘텐츠로는 사용할 수 없습니다. 만약 <table> 요소에서 사용되면 HTML의 테이블 구문 규칙 위반이 되어 브라우저가 올바르게 렌더링할 수 없게 됩니다.

table-column

<col> 요소의 디스플레이 방식입니다.

<col> 요소가 아닌 다른 요소에서 적용된 table-column 값은 display: table 또는 display: inline-table이 적용된 요소의 콘텐츠로만 사용되어야 하며, HTML의 테이블 구문 규칙에 맞게 사용되어야 합니다. <table> 요소의 콘텐츠로는 사용할 수 없습니다. 만약 <table> 요소에서 사용되면 HTML의 테이블 구문 규칙 위반이 되어 브라우저가 올바르게 렌더링할 수 없게 됩니다.

두 개의 값 구문

display 속성은 두 개의 값 구문을 사용할 수 있습니다.

두 개의 값 구문 형식

CSS 
display: <outside> <inside>;
  • <outside>는 외부 디스플레이 유형, 즉 요소가 일반적인 문서 흐름에서 어떻게 배치될지를 키워드 값으로 지정합니다.
  • <inside>는 내부 디스플레이 유형, 즉 요소가 내부 콘텐츠의 어떤 컨테이너로 디스플레이될지를 키워드 값으로 지정합니다.

예를 들어 , display: block flex는 display: block flex와 동일하며, display: inline flex는 display: inline-flex와 동일합니다.

형식 정의

display 속성의 형식 정의
초깃값 inline
적용 요소 모든 요소
상속 아니오
애니메이션 아니오

알아두세요!
display 속성은 CSS 명세서를 기준으로 애니메이션되지 않는 속성입니다.
하지만, 일부 브라우저에서는 display: none과 같은 값을 불연속적으로 전환하는 애니메이션(discrete animation)을 실험적으로 지원하기도 합니다. 실험적 지원이기 때문에, 브라우저 호환성 표에는 따로 표시하지 않았습니다.

브라우저 호환성

display 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
display 예 예 예 예
두 개의 키워드 값 115 115 70 15

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

display 속성의 명세서 사양
명세서 사양
display CSS Display Module Level 3
#the-display-properties

참고문헌

같이 보기