CSS display: 내부 레이아웃 및 외부 레이아웃 참여 방식

CSS display 속성은 요소가 블록과 인라인 중 어느 것으로 취급돼야 하는지, 그리고 요소 자신의 내부 레이아웃은 플로, 그리드, 플렉스 중 어느 것이어야 하는지 설정합니다.

공식 언어로 말하자면, display 속성은 요소의 내부와 외부 “디스플레이 유형”을 설정합니다. 외부 디스플레이 유형은 요소가 플로 레이아웃에 참여하는 방법을 설정하고, 내부 디스플레이 유형은 요소의 자식들에 적용할 레이아웃을 설정합니다. display에 설정할 수 있는 값 중 일부는 독립된 명세가 존재합니다. 예를 들어, display: flex를 지정했을 때의 자세한 동작은 CSS Flexible Box Model 명세가 정의합니다.

구문

/* 사전 조합 값 */
display: block;
display: inline;
display: inline-block;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: flow-root;

/* 박스 생성 */
display: none;
display: contents;

/* 2개 값 구문 */
display: block flex;
display: block flow;
display: block flow-root;
display: block grid;
display: inline flex;
display: inline flow;
display: inline flow-root;
display: inline grid;

/* 기타 값 */
display: table;
display: table-row;
display: list-item;

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

display 속성은 아래의 키워드 값을 사용해 지정할 수 있습니다.

범주별 키워드

display의 키워드 값은 6개의 범주로 구분할 수 있습니다.

외부 유형

<display-outside>

이 키워드들은 요소의 외부 디스플레이 유형을 설정합니다. 외부 디스플레이 유형은 요소가 플로 레이아웃에 참여하는 방식을 결정합니다.

block

요소가 블록 요소 박스를 생성합니다. 일반 문서 흐름 내에 위치할 경우 앞뒤로 개행됩니다.

inline

요소가 인라인 요소 박스를 한 개 이상 생성합니다. 인라인 요소 박스만으로는 개행이 발생하지 않습니다. 일반 문서 흐름 내에 위치하고 충분한 공간이 확보되면 다음 요소는 인라인 요소와 같은 줄에 배치됩니다.

내부 유형

<display-inside>

이 키워드들은 요소의 내부 디스플레이 유형을 설정합니다. 요소가 대체 요소인 경우를 제외하면, 내부 디스플레이 유형은 요소의 콘텐츠가 배치되는 방법을 정의합니다.

flow

요소 콘텐츠를 플로 레이아웃 (블록-인라인 레이아웃)에 따라 배치합니다.

외부 레이아웃 유형이 inline이고, 이 요소가 블록 또는 인라인 서식 맥락에 속한 경우 인라인 박스를 생성합니다. 이외의 경우 블록 컨테이너 박스를 생성합니다.

position, float, overflow 등의 다른 속성 값 및 이 요소 자체가 블록 또는 인라인 서식 맥락에 속하는지에 따라 새로운 [블록 서식 맥락]을 생성하거나, 자신의 콘텐츠를 부모의 서식 맥락에 포함시킵니다.

flow-root

새로운 블록 서식 맥락을 생성하는 블록 요소 박스를 생성합니다.

table

<table> 요소처럼 동작합니다. 블록 레벨 박스를 생성합니다.

flex

블록 레벨 요소처럼 동작합니다. 콘텐츠를 플렉스박스 모델에 따라 배치합니다.

grid

블록 레벨 요소처럼 동작합니다. 콘텐츠를 그리드 모델에 따라 배치합니다.

ruby

<ruby> 요소처럼 동작합니다. 인라인 레벨 요소처럼 동작하고, 콘텐츠를 루비 서식 모델에 따라 배치합니다.

리스트 항목

<display-listitem>

요소가 ::marker 의사 요소를 생성하고, 그 내용으로 CSS list-style-type 속성이 설정하는 리스트 마커를 추가합니다. 즉, 요소가 <li> 요소와 동일하게 동작합니다.

list-item은 모든 <display-outside> 키워드와, <display-inside> 키워드 중 flow 및 flow-root과 함께 사용할 수 있습니다.

내부용

<display-internal>

table과 ruby 등 일부 레이아웃 모델은 복잡한 내부 구조를 가지고 있으며, 자식과 자손이 다양한 역할로 참여합니다. 그 다양한 역할들을 위해 정의된 유형이 내부용 디스플레이 값입니다. 내부용 값은 특정 레이아웃 모드에서만 의미를 가집니다.

table-row-group

HTML <tbody> 요소처럼 동작합니다.

table-header-group

HTML <thead> 요소처럼 동작합니다.

table-footer-group

HTML <tfoot> 요소처럼 동작합니다.

table-row

HTML <tr> 요소처럼 동작합니다.

table-cell

HTML <td> 요소처럼 동작합니다.

table-column-group

HTML <colgroup> 요소처럼 동작합니다.

table-column

HTML <col> 요소처럼 동작합니다.

table-caption

HTML <caption> 요소처럼 동작합니다.

ruby-text

HTML <rt> 요소처럼 동작합니다.

ruby-base-container

익명 박스로 동작합니다.

ruby-text-container

HTML <rtc> 요소처럼 동작합니다.

박스

<display-box>

요소가 디스플레이 박스를 생성해야 하는지를 설정합니다.

contents

요소 자체 박스를 생성하지 않고, 대신 요소의 자식들이 생성한 박스로 대체합니다. 참고로 CSS Display Level 3 명세는 “대체 요소 등, CSS 박스 개념만으로는 렌더링이 불가능한 특수한 요소”에 display: contents를 적용했을 때 어떻게 동작해야 하는지 직접 명시하고 있습니다. 명세의 Appendix B: Effects of display: contents on Unusual Elements에서 자세한 정보를 확인하세요.

none

요소가 레이아웃에 영향을 주지 못하도록 설정합니다. 따라서 요소가 아예 존재하지 않는 것처럼 렌더링합니다. display: none 요소의 모든 자손 요소도 보이지 않습니다. 요소가 보이지 않아야 하지만, 레이아웃에 참여해서 자신의 공간은 차지해야 하는 경우에는 visibility 속성을 대신 사용하세요.

레거시

<display-legacy>

CSS 2에서는 display 속성이 키워드 값을 한 개만 받을 수 있었으므로, 하나의 레이아웃 모드에 대해 블록 레벨과 인라인 레벨 하나씩 총 두 개의 키워드가 필요합니다.

inline-block

요소가 블록 요소 박스를 생성하지만, 마치 하나의 인라인 박스처럼 주변 콘텐츠와 함께 플로 레이아웃의 흐름에 참여합니다. 즉 앞과 뒤에 개행이 새로 생기지 않습니다.

inline flow-root와 같습니다.

inline-table

inline-table에 직접 대응되는 HTML 요소는 없습니다. <table> 요소처럼 동작하지만, 블록 레벨이 아닌 인라인 레벨 박스를 사용합니다. 테이블 박스 내부는 블록 레벨 맥락입니다.

inline table과 같습니다.

inline-flex

인라인 요소처럼 동작하고, 콘텐츠는 플렉스박스 모델에 따라 배치합니다.

inline flex와 같습니다.

inline-grid

인라인 요소처럼 동작하고, 콘텐츠는 그리드 모델에 따라 배치합니다.

inline grid와 같습니다.

지금 사용해야 하는 구문

CSS Display Module Level 3 명세에서는 display 속성에 외부와 내부 디스플레이 유형을 각각 명시할 수 있습니다. 그러나 이 구문은 아직 그렇게 많은 브라우저에서 지원하지 않습니다.

<display-legacy>를 사용하면 키워드 하나로도 내외부 디스플레이 유형을 원하는 방식으로 설정할 수 있으므로 브라우저 지원 범위가 더 넓어지기 전까지는 하나의 키워드만 사용하세요. 예를 들어, 2개 값 구문을 사용해 인라인 플렉스 컨테이너를 지정하는 법은 다음과 같습니다.

.container {
  display: inline flex;
}

지금도 위와 같은 디스플레이 유형을 하나의 키워드로 지정할 수 있습니다.

.container {
  display: inline-flex;
}

이런 구문 변경점에 대한 자세한 정보는 CSS display에서 다중 키워드 구문 사용하기를 참고하세요.

접근성

display: none

요소의 display 값으로 none을 지정하면 요소가 접근성 트리에서도 사라집니다. 따라서 스크린 리더가 해당 요소와 그 자손 요소들을 읽을 수 없습니다.

다양한 속성을 조합해서 시각적으로만 요소를 숨기면 눈에는 보이지 않지만 보조 기술은 계속 읽을 수 있으므로 접근성을 해치지 않습니다.

display: contents

일부 브라우저에서는 display: contents를 지정한 요소를 접근성 트리에서 제거하여 스크린 리더가 해당 요소를 읽지 못하게 됩니다. (자손 요소들은 트리에 남으며 읽을 수 있습니다) 이 동작은 명세에 맞지 않는 잘못된 동작입니다.

표

일부 브라우저에서는 <table> 요소의 display를 block, grid, flex로 설정하면 접근성 트리에서의 표현도 바꿉니다. 따라서 스크린 리더가 표를 표로 인식하지 못합니다.

명세

CSS Display Module Level 3

브라우저 호환성