요소의 화면 출력 방식을 설정한다.
[ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>
단일 키워드 지정은 여전히 유효하지만 새롭게 추가된 다중 키워드로 지정되는 값은 웹브라우저 지원 현황을 확인해야 한다.
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
요소가 상자를 생성할지 여부를 제어하는 값을 나타낸다.
contents | none요소 자체는 상자를 생성하지 않지만 해당 자식 및 가상 요소는 여전히 상자를 생성하고 정상적으로 실행이 된다.
요소 및 하위 요소들은 뷰포트에 나타나지 않는다.
요소의 내부 표시 유형을 지정하는 값을 나타낸다. 이는 콘텐츠를 배치하는 서식 컨텍스트(formatting context) 유형을 정의한다.
flow | flow-root | table | flex | grid | ruby
자식 요소들을 CSS3에 추가된 flex 속성의 지정된 값에 따라 화면에 출력한다. 변경된 명세에 의하면 내부 디스플레이 값으로 사용된다.
외부 디스플레이 유형이 inline 또는 run-in이고 block 또는 inline 형식의 지정 컨텍스트에 참여하는 경우 inline 상자를 생성하는 내부 디스플레이 값으로 사용한다.
블록 컨테이너 상자를 생성하고 flow 레이아웃을 사용하여 내용을 배치한다. 내부 디스플레이 값으로 사용한다. 자식 요소가 float 값을 가지고 있는 경우에 자식 요소를 수용(BFC:블록 양식화 문맥)하여 표시한다.
자식 요소들을 CSS3에 추가된 grid 속성의 지정된 값에 따라 화면에 출력한다. 변경된 명세에 의하면 내부 디스플레이 값으로 사용된다.
테이블 요소처럼 동작한다. CSS 3에서는 내부 디스플레이 값으로 사용한다.
<table>, <ruby> 등 일부 레이아웃 모델은 복잡한 내부 구조 출력 메커니즘을 지닌다. 하나의 디스플레이 유형이 아닌 내부 요소가 역할에 맞는 디스플레이 유형을 동시에 갖는다. <display-internal>은 이러한 키워드 그룹을 나타낸다.
table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption | ruby-base | ruby-text | ruby-base-container | ruby-text-container
루비 기본 상자(<rb>)를 표시한다.
루비 기본 컨테이너(<rbc>)를 표시한다.
루비 주석 상자(<rt>)를 표시한다.
루비 주석 컨테이너(<rtc>)를 표시한다.
테이블의 <caption>을 표시한다.
테이블의 셀인 <td>, <th>를 표시한다.
테이블의 열을 설명하는 <col>를 표시한다.
테이블의 열 그룹을 의미하는 <colgroup>를 표시한다.
테이블의 하단 그룹인 <tfoot>를 나타낸다.
테이블의 상단 그룹인 <thead>를 나타낸다.
테이블의 행을 구성하는 <tr>를 표시한다.
테이블의 <tbody> 요소를 나타낸다.
CSS Level 2에서 사용했던 단일 키워드를 나타낸다.
inline-block | inline-table | inline-flex | inline-grid
인라인 flow-root로 처리한다.
인라인 수준의 flex로 표시한다.
인라인 수준의 grid로 표시한다.
인라인 수준의 테이블을 표시한다.
목록의 항목으로 표시 되도록 하는 값을 나타낸다.
<display-outside>? && [ flow | flow-root ]? && list-item
다중 키워드 지정 방식은 웹브라우저의 지원 현황을 확인할 필요가 있다.
.list > div {
display: block flow list-item;
list-style-type: disk;
}요소의 외부 디스플레이 유형을 지정하는 키워드를 나타낸다.
block | inline | run-in
블록 수준의 박스를 생성한다.
인라인 수준의 요소를 생성한다.
다음 블록 컨테이너로 병합하려고 시도하는 특별한 동작이 있는 인라인 레벨 박스 유형인 run-in 박스를 생성한다.
list-style 속성에 의해 지정된 내용으로 ::marker 가상 요소를 생성하도록 한다.
외부 디스플레이 유형이 inline 또는 run-in이고 block 또는 inline 형식의 지정 컨텍스트에 참여하는 경우 inline 상자를 생성하는 내부 디스플레이 값으로 사용한다.
블록 컨테이너 상자를 생성하고 flow 레이아웃을 사용하여 내용을 배치한다. 내부 디스플레이 값으로 사용한다. 자식 요소가 float 값을 가지고 있는 경우에 자식 요소를 수용(BFC:블록 양식화 문맥)하여 표시한다.
요소의 외부 디스플레이 유형을 지정하는 키워드를 나타낸다.
block | inline | run-in
다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.
인라인 수준의 요소를 생성한다.
인라인 flow-root로 처리한다.
인라인 수준의 flex로 표시한다.
인라인 수준의 grid로 표시한다.
인라인 수준의 테이블을 표시한다.
블록 수준의 박스를 생성한다.
list-style 속성에 의해 지정된 내용으로 ::marker 가상 요소를 생성하도록 한다.
외부 디스플레이 유형이 inline 또는 run-in이고 block 또는 inline 형식의 지정 컨텍스트에 참여하는 경우 inline 상자를 생성하는 내부 디스플레이 값으로 사용한다.
블록 컨테이너 상자를 생성하고 flow 레이아웃을 사용하여 내용을 배치한다. 내부 디스플레이 값으로 사용한다. 자식 요소가 float 값을 가지고 있는 경우에 자식 요소를 수용(BFC:블록 양식화 문맥)하여 표시한다.
자식 요소들을 CSS3에 추가된 flex 속성의 지정된 값에 따라 화면에 출력한다. 변경된 명세에 의하면 내부 디스플레이 값으로 사용된다.
외부 디스플레이 유형이 inline 또는 run-in이고 block 또는 inline 형식의 지정 컨텍스트에 참여하는 경우 inline 상자를 생성하는 내부 디스플레이 값으로 사용한다.
블록 컨테이너 상자를 생성하고 flow 레이아웃을 사용하여 내용을 배치한다. 내부 디스플레이 값으로 사용한다. 자식 요소가 float 값을 가지고 있는 경우에 자식 요소를 수용(BFC:블록 양식화 문맥)하여 표시한다.
자식 요소들을 CSS3에 추가된 grid 속성의 지정된 값에 따라 화면에 출력한다. 변경된 명세에 의하면 내부 디스플레이 값으로 사용된다.
요소 자체는 상자를 생성하지 않지만 해당 자식 및 가상 요소는 여전히 상자를 생성하고 정상적으로 실행이 된다.
요소 및 하위 요소들은 뷰포트에 나타나지 않는다.
루비 기본 상자(<rb>)를 표시한다.
루비 기본 컨테이너(<rbc>)를 표시한다.
루비 주석 상자(<rt>)를 표시한다.
루비 주석 컨테이너(<rtc>)를 표시한다.
다음 블록 컨테이너로 병합하려고 시도하는 특별한 동작이 있는 인라인 레벨 박스 유형인 run-in 박스를 생성한다.
테이블 요소처럼 동작한다. CSS 3에서는 내부 디스플레이 값으로 사용한다.
테이블의 <caption>을 표시한다.
테이블의 셀인 <td>, <th>를 표시한다.
테이블의 열을 설명하는 <col>를 표시한다.
테이블의 열 그룹을 의미하는 <colgroup>를 표시한다.
테이블의 하단 그룹인 <tfoot>를 나타낸다.
테이블의 상단 그룹인 <thead>를 나타낸다.
테이블의 행을 구성하는 <tr>를 표시한다.
테이블의 <tbody> 요소를 나타낸다.
display: flex;
display: contents;
콘텐츠를 담고 있는 컨테이너를 사라지게 하는 방식으로 콘텐츠를 표시한다.
| Modules | ||
|---|---|---|
| Module Name | Status | Summary |
| CSS Display Module Level 3 | Last review date: 2022-6-11 | |