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 flow;
display: inline flow;
display: inline flow-root;
display: block flex;
display: inline flex;
display: block grid;
display: inline grid;
display: block flow-root;

/* 기타 값 */
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이나 run-in인 경우, 그리고 요소가 블록 또는 인라인 서색 맥락에 참여 중인 경우에는 인라인 박스를 생성합니다. 그 외에는 블록 컨테이너 박스를 생성합니다.

다른 속성의 값(position, float, overflow 등)과, 요소 자신이 블록 또는 인라인 서식 맥락에 참여하고 있는지 혹은 참여하지 않는지에 따라서 display: flow 새로운 블록 서식 맥락을 생성하거나, 자신의 콘텐츠를 부모 서식 맥락에 포함시킵니다.

flow-root

새로운 블록 서식 맥락을 생성하는 블록 레벨 박스를 생성하여 서식 루트를 정의합니다.

table

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

flex

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

grid

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

ruby

요소가 인라인 레벨로 동작합니다. 콘텐츠는 루비 서식 모델에 따라 배치합니다. 결과적으로 HTML <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 <foot> 요소처럼 동작합니다.

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> 요소처럼 동작합니다.

박스

<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;
}

Level 3 명세에서 추가된 2개 값 구문에 대한 상세 정보는 Display의 새로운 2개 값 구문 적용하기를 참고하세요.

접근성 고려사항

display: none

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

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

display: contents

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

명세

CSS Display Module Level 3

브라우저 호환성