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요소가 인라인 요소 박스를 한 개 이상 생성합니다. 인라인 요소 박스로는 개행이 발생하지 않습니다. 즉 일반적인 문서 흐름 내에 있으며 충분한 공간이 확보된 경우, 다음 요소는 이 요소와 같은 줄에 위치합니다.
2개 값 구분을 지원하는 브라우저에서는 외부 키워드만 지정한 요소의 내부 디스플레이 유형을 flow로 설정합니다. 따라서 2개 값 구문을 지원하지 않는 브라우저와 동일하게 동작합니다.
내부 유형
<display-inside>이 키워드들은 요소의 내부 디스플레이 유형을 설정합니다. 요소가 대체 요소인 경우를 제외하면, 내부 디스플레이 유형은 요소의 콘텐츠가 배치되는 방법을 정의합니다.
flow플로우 레이아웃을 사용해 요소의 콘텐츠를 배치합니다.
요소의 바깥 디스플레이 유형이
inline이나run-in인 경우, 그리고 요소가 블록 또는 인라인 서색 맥락에 참여 중인 경우에는 인라인 박스를 생성합니다. 그 외에는 블록 컨테이너 박스를 생성합니다.다른 속성의 값(
position,float,overflow등)과, 요소 자신이 블록 또는 인라인 서식 맥락에 참여하고 있는지 혹은 참여하지 않는지에 따라서display: flow새로운 블록 서식 맥락을 생성하거나, 자신의 콘텐츠를 부모 서식 맥락에 포함시킵니다.flow-root새로운 블록 서식 맥락을 생성하는 블록 레벨 박스를 생성하여 서식 루트를 정의합니다.
tableHTML
<table>요소처럼 동작합니다. 블록 레벨 박스를 정의합니다.flex요소가 블록 레벨로 동작합니다. 콘텐츠는 플렉스박스 모델에 따라 배치합니다.
grid요소가 블록 레벨로 동작합니다. 콘텐츠는 그리드 모델에 따라 배치합니다.
ruby요소가 인라인 레벨로 동작합니다. 콘텐츠는 루비 서식 모델에 따라 배치합니다. 결과적으로 HTML
<ruby>요소와 동일하게 동작합니다.
2개 값 구분을 지원하는 브라우저에서는 내부 키워드만 지정한 요소의 외부 디스플레이 유형을 block으로 설정합니다. 따라서 2개 값 구문을 지원하지 않는 브라우저와 동일하게 동작합니다.
리스트 항목
<display-listitem>요소가
::marker의사 요소를 생성하고, 그 내용으로 CSSlist-style-type속성이 설정하는 리스트 마커를 추가합니다. 즉, 요소가<li>요소와 동일하게 동작합니다.list-item은 모든<display-outside>키워드와,<display-inside>키워드 중flow및flow-root과 함께 사용할 수 있습니다.
2개 값 구분을 지원하는 브라우저에서는 list-item과 함께 내부 키워드를 지정하지 않은 경우, 내부 디스플레이 유형을 flow로 설정합니다. 외부 키워드를 지정하지 않은 경우, 외부 디스플레이 유형은 block이 됩니다.
내부용
<display-internal>table과ruby등 일부 레이아웃 모델은 복잡한 내부 구조를 가지고 있으며, 자식과 자손이 다양한 역할로 참여합니다. 그 다양한 역할을 위해 정의된 유형이 내부용 디스플레이 값입니다. 내부용 값은 특정 레이아웃 모드에서만 의미를 가집니다.table-row-groupHTML
<tbody>요소처럼 동작합니다.table-header-groupHTML
<thead>요소처럼 동작합니다.HTML
<foot>요소처럼 동작합니다.table-rowHTML
<tr>요소처럼 동작합니다.table-cellHTML
<td>요소처럼 동작합니다.table-column-groupHTML
<colgroup>요소처럼 동작합니다.table-columnHTML
<col>요소처럼 동작합니다.table-captionHTML
<caption>요소처럼 동작합니다.ruby-textHTML
<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-tableinline-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를 지정한 요소를 접근성 트리에서 제거하여 스크린 리더가 해당 요소를 읽지 못하게 됩니다. (자손 요소들은 트리에 남으며 읽을 수 있습니다) 이 동작은 명세에 맞지 않는 잘못된 동작입니다.
명세
브라우저 호환성
| IE | Edge | Chrome | Safari | Firefox |
|---|---|---|---|---|
| 4 | 12 | 1 | 1 | 1 |
| iOS Safari | Android WebView | Android Chrome | Android Firefox | Samsung Internet |
|---|---|---|---|---|
| 1 | ≤37 | 18 | 4 | 1.0 |
contents
| IE | Edge | Chrome | Safari | Firefox |
|---|---|---|---|---|
| 미지원 | 79 | 65 | 11.1 | 37 |
| iOS Safari | Android WebView | Android Chrome | Android Firefox | Samsung Internet |
|---|---|---|---|---|
| 11.3 | 65 | 65 | 37 | 9.0 |
Specific behavior of unusual elements when display: contents is applied to them
| IE | Edge | Chrome | Safari | Firefox |
|---|---|---|---|---|
| 미지원 | 79 | 65 | 미지원 | 59 |
| iOS Safari | Android WebView | Android Chrome | Android Firefox | Samsung Internet |
|---|---|---|---|---|
| 미지원 | 65 | 65 | 59 | 9.0 |
<display-outside>
| IE | Edge | Chrome | Safari | Firefox |
|---|---|---|---|---|
| 4 | 12 | 1 | 1 | 1 |
| iOS Safari | Android WebView | Android Chrome | Android Firefox | Samsung Internet |
|---|---|---|---|---|
| 1 | 4.4 | 18 | 4 | 1.0 |
flex
| IE | Edge | Chrome | Safari | Firefox |
|---|---|---|---|---|
| 11* | 12 | 29* | 9* | 20* |
| iOS Safari | Android WebView | Android Chrome | Android Firefox | Samsung Internet |
|---|---|---|---|---|
| 9* | 4.4* | 29* | 20* | 2.0* |
flow-root
| IE | Edge | Chrome | Safari | Firefox |
|---|---|---|---|---|
| 미지원 | 79 | 58 | 13 | 53 |
| iOS Safari | Android WebView | Android Chrome | Android Firefox | Samsung Internet |
|---|---|---|---|---|
| 13 | 58 | 58 | 53 | 7.0 |
grid
| IE | Edge | Chrome | Safari | Firefox |
|---|---|---|---|---|
| 10* | 16* | 57 | 10.1 | 52 |
| iOS Safari | Android WebView | Android Chrome | Android Firefox | Samsung Internet |
|---|---|---|---|---|
| 10.3 | 57 | 57 | 52 | 6.0* |
inline-block
| IE | Edge | Chrome | Safari | Firefox |
|---|---|---|---|---|
| 8* | 12 | 1 | 1 | 1 |
| iOS Safari | Android WebView | Android Chrome | Android Firefox | Samsung Internet |
|---|---|---|---|---|
| 1 | ≤37 | 18 | 4 | 1.0 |
inline-flex
| IE | Edge | Chrome | Safari | Firefox |
|---|---|---|---|---|
| 11* | 12 | 29* | 9* | 20* |
| iOS Safari | Android WebView | Android Chrome | Android Firefox | Samsung Internet |
|---|---|---|---|---|
| 9* | 4.4* | 29* | 20* | 2.0* |
inline-grid
| IE | Edge | Chrome | Safari | Firefox |
|---|---|---|---|---|
| 10* | 16* | 57 | 10.1 | 52 |
| iOS Safari | Android WebView | Android Chrome | Android Firefox | Samsung Internet |
|---|---|---|---|---|
| 10.3 | 57 | 57 | 52 | 6.0* |
inline-table
| IE | Edge | Chrome | Safari | Firefox |
|---|---|---|---|---|
| 8 | 12 | 1 | 1 | 3 |
| iOS Safari | Android WebView | Android Chrome | Android Firefox | Samsung Internet |
|---|---|---|---|---|
| 1 | ≤37 | 18 | 4 | 1.0 |
list-item
| IE | Edge | Chrome | Safari | Firefox |
|---|---|---|---|---|
| 6 | 12 | 1 | 1 | 1 |
| iOS Safari | Android WebView | Android Chrome | Android Firefox | Samsung Internet |
|---|---|---|---|---|
| 1 | ≤37 | 18 | 4 | 1.0 |
Supported on <legend>
| IE | Edge | Chrome | Safari | Firefox |
|---|---|---|---|---|
| 미지원 | 79 | 71 | 미지원 | 64 |
| iOS Safari | Android WebView | Android Chrome | Android Firefox | Samsung Internet |
|---|---|---|---|---|
| 미지원 | 71 | 71 | 64 | 10.0 |
Multi-keyword values
| IE | Edge | Chrome | Safari | Firefox |
|---|---|---|---|---|
| 미지원 | 미지원 | 미지원 | 15 | 70 |
| iOS Safari | Android WebView | Android Chrome | Android Firefox | Samsung Internet |
|---|---|---|---|---|
| 15 | 미지원 | 미지원 | 미지원 | 미지원 |
none
| IE | Edge | Chrome | Safari | Firefox |
|---|---|---|---|---|
| 4 | 12 | 1* | 1 | 1 |
| iOS Safari | Android WebView | Android Chrome | Android Firefox | Samsung Internet |
|---|---|---|---|---|
| 1 | ≤37* | 18* | 4 | 1.0* |
ruby, ruby-base, ruby-base-container, ruby-text, and ruby-text-container
| IE | Edge | Chrome | Safari | Firefox |
|---|---|---|---|---|
| 7 | 12 ~ 79 | 미지원 | 미지원 | 38 |
| iOS Safari | Android WebView | Android Chrome | Android Firefox | Samsung Internet |
|---|---|---|---|---|
| 미지원 | 미지원 | 미지원 | 38 | 미지원 |
table, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row, and table-row-group
| IE | Edge | Chrome | Safari | Firefox |
|---|---|---|---|---|
| 8 | 12 | 1 | 1 | 1 |
| iOS Safari | Android WebView | Android Chrome | Android Firefox | Samsung Internet |
|---|---|---|---|---|
| 1 | ≤37 | 18 | 4 | 1.0 |