CSS 표시 모듈 레벨 3

1. 소개

이 절은 규범적이다.

CSS는 원본 문서를 트리로 구성된 요소 (다른 요소와 텍스트 노드의 혼합을 포함할 수 있음) 및 텍스트 노드 (텍스트를 포함할 수 있음)로 받아, 화면, 종이, 오디오 스트림 같은 캔버스에 렌더링한다. 이러한 원본 문서는 모두 CSS로 렌더링할 수 있지만, 가장 흔히 사용되는 유형은 DOM이다. [DOM] (이러한 더 복잡한 트리 유형 중 일부는 DOM의 주석 노드와 같은 추가 유형의 노드를 가질 수 있다. CSS의 목적상, 이러한 모든 추가 유형의 노드는 존재하지 않는 것처럼 무시된다.)

이를 위해, 렌더링된 문서의 서식 구조를 나타내는 중간 구조인 상자 트리를 생성한다. 상자 트리의 각 상자는 캔버스 위의 공간 및/또는 시간에서 그에 대응하는 요소(또는 의사 요소)를 나타내며, 마찬가지로 상자 트리의 각 텍스트 시퀀스는 그에 대응하는 텍스트 노드의 내용을 나타낸다.

상자 트리를 만들기 위해, CSS는 먼저 캐스케이딩과 상속을 사용해, 원본 트리의 각 요소와 텍스트 노드에 각 CSS 속성의 계산값을 할당한다. ([CSS-CASCADE-3] 참조.)

그런 다음, 각 요소에 대해, CSS는 해당 요소의 display 속성에 지정된 대로 0개 이상의 상자를 생성한다. 일반적으로 요소는 단일 상자, 즉 주 상자를 생성하며, 이 상자는 자기 자신을 나타내고 상자 트리 안에서 자신의 내용을 포함한다. 그러나 일부 display 값 (예: display: list-item)은 둘 이상의 상자를 생성한다 (예: 주 블록 상자와 자식 마커 상자). 또한 일부 값 (none 또는 contents 등)은 요소 및/또는 그 자손이 어떤 상자도 생성하지 않게 한다. 상자는 종종 그 display 유형으로 불린다. 예를 들어 display: block을 가진 요소가 생성한 상자는 “블록 상자” 또는 그냥 “블록”이라고 한다.

상자에는 달리 명시되지 않는 한 이를 생성한 요소와 동일한 스타일이 할당된다. 일반적으로 상속 속성은 주 상자에 할당되고, 그런 다음 같은 요소가 생성한 다른 모든 상자로 상자 트리를 통해 상속된다. 비상속 속성은 기본적으로 주 상자에 적용되지만, 요소가 여러 상자를 생성하는 경우에는 때때로 다른 상자에 적용되도록 정의된다. 예를 들어, 표 요소에 적용된 border 속성은 주 표 래퍼 상자가 아니라, 그 요소의 표 그리드 상자에 적용된다. 값 계산 과정이 이러한 상자들의 스타일을 변경하고, 요소의 스타일이 (getComputedStyle()를 통해서처럼) 요청되는 경우, 요소는 각 속성에 대해 그 속성이 적용된 상자의 값을 반영한다.

마찬가지로, 인접한 형제 텍스트 노드의 각 연속 시퀀스는 그 텍스트 내용을 포함하는 텍스트 시퀀스를 생성하며, 생성한 텍스트 노드와 동일한 스타일이 할당된다. 그러나 시퀀스에 텍스트가 없으면 텍스트 시퀀스를 생성하지 않는다.

상자 트리를 구성할 때, 요소가 생성한 상자는 모든 조상 요소의 주 상자의 자손이 된다. 일반적인 경우, 요소의 주 상자의 직접 부모 상자는 상자를 생성하는 가장 가까운 조상 요소의 주 상자이다. 그러나 run-in 상자, 여러 컨테이너 상자를 생성하는 표시 유형(표 등), 그리고 중간에 끼어 있는 익명 상자와 같은 일부 예외가 있다.

익명 상자는 어떤 요소와도 연결되지 않은 상자이다. 익명 상자는 특정 상황에서 요소 트리에서 생성된 상자들이 제공하지 않는 특정 중첩 구조를 상자 트리가 필요로 할 때, 이를 보정하기 위해 생성된다. 예를 들어, 표 셀 상자는 특정 유형의 부모 상자(표 행 상자)를 필요로 하며, 자신의 부모가 표 행 상자가 아닌 경우 자신을 둘러싸는 익명 표 행 상자를 생성한다. ([CSS2] § 17.2.1 참조.) 스타일이 요소 트리를 통해 엄격하게 상속되는 요소 생성 상자와 달리, 익명 상자(상자 트리에만 존재함)는 자신의 상자 트리 부모 관계를 통해 상속한다.

레이아웃 과정에서, 상자와 텍스트 시퀀스는 여러 단편으로 나뉠 수 있다. 이는 예를 들어 인라인 상자 및/또는 텍스트 시퀀스가 여러 줄에 걸쳐 나뉘거나, 블록 상자가 페이지나 열을 가로질러 나뉘는 경우 발생하며, 이 과정은 단편화라고 한다. 또한 텍스트의 양방향 재정렬로 인해 발생할 수도 있고 (CSS Writing Modes의 양방향 재정렬 알고리즘 적용 참조), 더 높은 수준의 표시 유형 상자 분할로 인해 발생할 수도 있다. 예를 들어 block-in-inline 분할 (CSS2§9.2 참조) 또는 column-spanner-in-block 분할 (CSS Multi-column Layout 참조)이 있다. 따라서 상자는 하나 이상의 상자 단편으로 구성되고, 텍스트 시퀀스는 하나 이상의 텍스트 단편으로 구성된다. 단편화에 대한 자세한 내용은 [CSS-BREAK-3]을 참조한다.

참고: CSS 명세 중 상당수는 이 용어가 정리되기 전에 작성되었거나, 대상을 부정확하게 지칭하므로, 오래된 명세가 이러한 용어를 사용할 때는 주의해서 보아야 한다. 문맥을 통해 그 명세가 실제로 어떤 용어를 의미하는지 추론할 수 있을 것이다. 오류를 발견하면 명세의 오류를 보고해 수정될 수 있도록 해 달라.

참고: “청각” 상자 트리와 display 속성의 상호작용에 대한 추가 정보는 CSS Speech Module에서 찾을 수 있다. [CSS-SPEECH-1]

1.1. 모듈 상호작용

이 모듈은 [CSS2] 9.2.4절에 정의된 display 속성의 정의를 대체하고 확장한다.

이 모듈의 어떤 속성도 ::first-line 또는 ::first-letter 의사 요소에 적용되지 않는다.

1.2. 값 정의

이 명세는 [CSS2]의 CSS 속성 정의 규약을 따르며, [CSS-VALUES-3]의 값 정의 구문을 사용한다. 이 명세에서 정의되지 않은 값 유형은 CSS Values & Units [CSS-VALUES-3]에서 정의된다. 다른 CSS 모듈과 결합하면 이러한 값 유형의 정의가 확장될 수 있다.

각 정의에 나열된 속성별 값 외에도, 이 명세에서 정의된 모든 속성은 CSS-wide 키워드도 속성값으로 허용한다. 가독성을 위해 이를 명시적으로 반복하지 않았다.

2. 상자 레이아웃 모드: display 속성

사용자 에이전트는 비시각 매체를 포함한 모든 매체에서 이 속성을 지원해야 한다. display 속성은 요소의 표시 유형을 정의하며, 이는 요소가 상자를 생성하는 방식에 관한 두 가지 기본 특성으로 구성된다:

• 내부 표시 유형. 이는 (비대체 요소인 경우) 요소가 생성하는 서식 문맥의 종류를 정의하여, 그 자손 상자들이 어떻게 배치되는지를 지시한다. (대체 요소의 내부 표시는 CSS의 범위를 벗어난다.)

• 외부 표시 유형. 이는 주 상자 자체가 흐름 레이아웃에 어떻게 참여하는지를 지시한다.

텍스트 시퀀스에는 표시 유형이 없다.

일부 display 값에는 추가적인 부수 효과가 있다: 예를 들어 list-item은 ::marker 의사 요소도 생성하며, none은 요소의 전체 하위 트리가 상자 트리에서 제외되게 한다.

값은 다음과 같이 정의된다:

<display-outside>  = block | inline | run-in
<display-inside>   = flow | flow-root | table | flex | grid | ruby
<display-listitem> = <display-outside>? && [ flow | flow-root ]? && list-item
<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
<display-box>      = contents | none
<display-legacy>   = inline-block | inline-table | inline-flex | inline-grid

다음 정보성 표는 display의 값을 요약한다:

참고: “가장 하위 호환성이 높고, 그다음으로 가장 짧은”이라는 우선순위 규칙에 따라, 동등한 display 값의 직렬화는 “짧은 display” 열을 사용한다. [CSSOM]

2.1. 흐름 레이아웃을 위한 외부 표시 역할: block, inline, 및 run-in 키워드

<display-outside> 키워드는 요소의 외부 표시 유형을 지정하며, 이는 본질적으로 흐름 레이아웃에서 해당 요소의 주 상자의 역할이다. 다음과 같이 정의된다:

block

요소는 흐름 레이아웃에 배치될 때 블록 수준인 상자를 생성한다. [CSS2]

inline

요소는 흐름 레이아웃에 배치될 때 인라인 수준인 상자를 생성한다. [CSS2]

run-in

요소는 run-in 상자를 생성한다. 이는 뒤따르는 블록 컨테이너에 병합되려고 시도하는 특수 동작을 가진 인라인 수준 상자의 한 유형이다. 자세한 내용은 § 5 Run-In 레이아웃을 참조한다.

참고: 외부 표시 유형은 대체 요소에 영향을 준다.

<display-outside> 값이 지정되었지만 <display-inside>가 생략된 경우, 요소의 내부 표시 유형은 기본적으로 flow가 된다.

2.2. 내부 표시 레이아웃 모델: flow, flow-root, table, flex, grid, 및 ruby 키워드

<display-inside> 키워드는 요소의 내부 표시 유형을 지정하며, 이는 그 내용물을 배치하는 서식 문맥의 유형을 정의한다 (해당 요소가 비대체 요소라고 가정한다). 다음과 같이 정의된다:

flow

요소는 흐름 레이아웃 (블록 및 인라인 레이아웃)을 사용해 내용물을 배치한다.

그 외부 표시 유형이 inline 또는 run-in이고, 해당 요소가 블록 또는 인라인 서식 문맥에 참여하고 있다면, 이는 인라인 상자를 생성한다.

그렇지 않으면 블록 컨테이너 상자를 생성한다.

다른 속성의 값(예: position, float, 또는 overflow)과 해당 요소 자신이 블록 또는 인라인 서식 문맥에 참여하고 있는지에 따라, 그 내용물을 위한 새 블록 서식 문맥을 설정하거나, 그 내용물을 부모 서식 문맥에 통합한다. CSS2.1 9장 참조. [CSS2] 새 블록 서식 문맥을 설정하는 블록 컨테이너는 사용된 내부 표시 유형이 flow-root인 것으로 간주된다.

flow-root

요소는 블록 컨테이너 상자를 생성하고, 흐름 레이아웃을 사용해 그 내용물을 배치한다. 이는 항상 그 내용물을 위해 새 블록 서식 문맥을 설정한다. [CSS2]

table

요소는 표 래퍼 상자인 주 상자를 생성하며, 이는 블록 서식 문맥을 설정하고, 추가로 생성된 표 그리드 상자를 포함하며, 이 상자는 표 서식 문맥을 설정한다. [CSS2]

flex

요소는 주 flex 컨테이너 상자를 생성하고 flex 서식 문맥을 설정한다. [CSS-FLEXBOX-1]

grid

요소는 주 grid 컨테이너 상자를 생성하고, grid 서식 문맥을 설정한다. [CSS-GRID-1]

(subgrid를 사용하는 그리드는 새 grid 서식 문맥을 생성하지 않을 수 있다; 자세한 내용은 [CSS-GRID-2]를 참조한다.)

ruby

요소는 ruby 컨테이너 상자를 생성하고 ruby 서식 문맥을 설정하며, 여기에 더해 그 기본 수준 내용물을 부모 서식 문맥에 통합하거나 (인라인인 경우), 적절한 외부 표시 유형의 래퍼 상자를 생성한다 (인라인이 아닌 경우). [CSS-RUBY-1]

<display-inside> 값이 지정되었지만 <display-outside>가 생략된 경우, 요소의 외부 표시 유형은 기본적으로 block이 된다—​단, ruby는 예외로 inline이 기본값이다.

2.3. 마커 상자 생성: list-item 키워드

list-item 키워드는 요소가 자신의 list-style 속성으로 지정된 내용 (CSS 2.1§12.5 목록) [CSS2]을 가진 ::marker 의사 요소 [CSS-PSEUDO-4]와, 자기 내용물을 위한 지정된 유형의 주 상자를 함께 생성하게 한다.

내부 표시 유형 값이 지정되지 않은 경우, 주 상자의 내부 표시 유형은 기본적으로 flow가 된다. 외부 표시 유형 값이 지정되지 않은 경우, 주 상자의 외부 표시 유형은 기본적으로 block이 된다.

참고: 이 수준에서는 문법에서 제한된 대로, list-item은 Flow Layout 표시 유형 (block/inline/run-in와 flow/flow-root 내부 유형)로 제한된다. 이 제한은 이 모듈의 향후 수준에서 완화될 수 있다.

2.4. 레이아웃 내부 표시 유형: table-* 및 ruby-* 키워드

table 및 ruby와 같은 일부 레이아웃 모델은 복잡한 내부 구조를 가지며, 그 자식과 자손이 맡을 수 있는 여러 다른 역할을 가진다. 이 절은 그러한 “레이아웃 내부” display 값을 정의하며, 이 값들은 해당 특정 레이아웃 모드 안에서만 의미를 가진다.

달리 명시되지 않는 한, 이러한 display 값을 사용하는 요소의 내부 표시 유형과 외부 표시 유형은 모두 주어진 키워드로 설정된다.

대체 요소의 display 속성이 레이아웃 내부 값 중 하나로 계산되는 경우, 이는 사용값이 inline인 것처럼 처리된다. 공백 축소와 익명 상자 생성은 이러한 대체 요소 주변에서 해당 inline 값에 기반해 이루어져야 하며, 마치 레이아웃 내부 display 값이 적용된 적이 없었던 것처럼 처리해야 한다.

작성자는 레이아웃 내부 display 값을 대체 요소에 할당해서는 안 된다.

<display-internal> 키워드는 다음과 같이 정의된다:

table-row-group, table-header-group, table-footer-group, table-row, table-cell, table-column-group, table-column

요소는 내부 표 요소이다. 이는 표 서식 문맥에 참여하는 적절한 내부 표 상자를 생성한다. CSS2§17.2 [CSS2] 참조.

table-cell 상자는 flow-root 내부 표시 유형을 가진다.

table-caption

요소는 표 캡션 상자를 생성하며, 이는 표 및 표 래퍼 상자에 대해 특수한 동작을 가진 블록 상자이다. CSS2§17.2 [CSS2] 참조.

table-caption 상자는 flow-root 내부 표시 유형을 가진다.

ruby-base, ruby-text, ruby-base-container, ruby-text-container

요소는 내부 ruby 요소이다. 이는 ruby 서식 문맥에 참여하는 적절한 내부 ruby 상자를 생성한다. [CSS-RUBY-1]

ruby-base 및 ruby-text는 flow 내부 표시 유형을 가진다.

레이아웃별 표시 유형을 가진 상자는 호환되지 않는 부모 안에 배치될 때, 각각의 명세에서 정의한 대로 자기 주변에 익명 래퍼 상자를 생성한다.

<div style="display:block;">
  <div style="display:table-cell">...</div>
</div>

블록 상자
└익명 표 상자
 └익명 table-row-group 상자
  └익명 table-row 상자
   └table-cell 상자

<div style="display:table;">
  <div style="display:table-row">
    <div style="display:table-cell">...</div>
  </div>
</div>

표 상자
└익명 table-row-group 상자
 └table-row 상자
  └table-cell 상자

2.5. 상자 생성: none 및 contents 키워드

display는 요소가 생성할 상자의 유형을 제어할 수 있지만, 요소가 상자를 전혀 생성할지 여부도 제어할 수 있다.

<display-box> 키워드는 다음과 같이 정의된다:

contents

요소 자체는 어떤 상자도 생성하지 않지만, 그 자식과 의사 요소는 여전히 평소와 같이 상자 및 텍스트 시퀀스를 생성한다. 상자 생성 및 레이아웃의 목적상, 요소는 요소 트리에서 그 내용물로 대체된 것처럼 처리해야 한다 (원본 문서의 자식과 의사 요소를 모두 포함하며, 예를 들어 ::before 및 ::after 의사 요소는 평소와 같이 요소의 자식 앞/뒤에 생성된다).

참고: 상자 트리만 영향을 받으므로, 선택자 매칭, 이벤트 처리, 속성 상속과 같은 문서 트리에 기반한 의미론은 영향을 받지 않는다. 그러나 작성 시점에는, 주요 브라우저에서 이것이 올바르게 구현되어 있지 않으므로, 웹에서 이 기능을 사용할 때는 주의해야 한다. 접근성 도구가 요소의 의미론에 접근하지 못하게 할 수 있기 때문이다.

이 값은 대체 요소와 렌더링이 CSS에 의해 완전히 제어되지 않는 다른 요소에서 display: none으로 계산된다; 자세한 내용은 부록 B: 특수한 요소에 대한 display: contents의 영향을 참조한다.

참고: 대체 요소와 폼 컨트롤은 특별하게 처리된다. 요소 자신의 생성 상자만 제거하는 것은 어느 정도 정의되지 않은 동작이기 때문이다. 이 동작은 사용 사례 (및 더 정밀한 렌더링 모델)가 발전하면 다듬어질 수 있으므로, 작성자는 향후 호환성을 위해 그러한 요소에 display: contents 대신 display: none을 사용해야 한다.

none

요소와 그 자손은 상자나 텍스트 시퀀스를 생성하지 않는다.

마찬가지로, 텍스트 노드가 display: none처럼 동작하도록 정의된 경우, 이는 텍스트 시퀀스를 생성하지 않는다.

이러한 값 중 하나를 가진 요소는 내부 또는 외부 표시 유형을 가지지 않는다. 애초에 어떤 상자도 생성하지 않기 때문이다.

참고: 이러한 값은 영향을 받는 요소가 상자를 생성하지 않게 하므로, 익명 상자 생성 규칙은 생략된 요소를 완전히 무시하며, 마치 상자 트리에 존재하지 않았던 것처럼 처리한다.

그러나 마크업 기반 관계는 이러한 값의 영향을 받지 않는다. 이는 순전히 렌더링 시점의 효과이기 때문이다. 예를 들어, 이 값들이 어떤 표 셀이 열에 나타나는지에 영향을 줄 수는 있지만, 특정 열 요소와 연관된 표 셀이 무엇인지는 영향을 주지 않는다. 마찬가지로, 특정 표와 연관된 HTML summary 요소가 무엇인지, 또는 legend가 특정 fieldset의 내용에 레이블을 붙이는 것으로 간주되는지에는 영향을 줄 수 없다.

2.6. 미리 조합된 인라인 수준 표시 값

CSS 레벨 2는 display에 단일 키워드 구문을 사용했으며, 같은 레이아웃 모드의 블록 수준 변형과 인라인 수준 변형에 대해 별도의 키워드가 필요했다. 이러한 <display-legacy> 키워드는 다음과 같이 대응된다:

inline-block

inline flow-root로 계산된다.

inline-table

inline table로 계산된다.

inline-flex

inline flex로 계산된다.

inline-grid

inline grid로 계산된다.

참고: 이러한 키워드와 그 대응값은 같은 값으로 계산되지만, 그 지정값은 서로 구별된 채로 유지된다.

참고: getComputedStyle() 직렬화 규칙은 가장 짧고, 가장 하위 호환적인 직렬화 원칙 때문에 동등한 두 키워드 쌍이 아니라 항상 이러한 미리 조합된 키워드를 출력한다.

2.7. 자동 상자 유형 변환

일부 레이아웃 효과는 상자 유형의 블록화 또는 인라인화를 필요로 하며, 이는 상자의 계산된 외부 표시 유형을 각각 block 또는 inline으로 설정한다. (이는 표시 유형 중 상자를 전혀 생성하지 않는 것, 예를 들어 none 또는 contents에는 영향을 주지 않는다.) 또한:

• 블록 상자(block flow)가 인라인화되면, 그 내부 표시 유형은 flow-root로 설정되어 블록 컨테이너로 남는다.

• 인라인 상자(inline flow)가 인라인화되면, 모든 in-flow 자식을 재귀적으로 인라인화하여, 블록 수준 자손이 자신이 참여하는 인라인 서식 문맥을 끊지 않도록 한다.

• 레거시 이유로, 인라인 블록 상자 (inline flow-root)가 블록화되면, 이는 block 상자가 된다 (flow-root 성격을 잃는다). 일관성을 위해, run-in flow-root 상자도 블록화되어 block 상자가 된다.

• 레이아웃 내부 상자가 블록화되면, 그 내부 표시 유형은 flow로 변환되어 블록 컨테이너가 된다. 인라인화는 레이아웃 내부 상자에 영향을 주지 않는다. (그러나 이러한 인라인 문맥에 배치되면 일반적으로 적절한 유형의 익명 인라인 수준 상자로 둘러싸이게 된다.)

참고: 상자가 자신의 문맥에 맞지 않을 때 상자 유형을 보정하는 데 사용되는 방법은 두 가지이다. 하나는 여기서 설명한 계산값의 변환, 즉 display의 블록화 및 인라인화와 같은 것이다. 다른 하나는 (상자 트리 구성 중, 계산값이 결정된 뒤) 중간 익명 상자를 만드는 것으로, 표, ruby, 그리고 흐름 레이아웃에서 발생한다.

2.8. 루트 요소의 주 상자

루트 요소의 표시 유형은 항상 블록화되며, 그 주 상자는 항상 독립 서식 문맥을 설정한다. 이 상자의 컨테이닝 블록은 초기 컨테이닝 블록이다.

또한, 루트 요소에서 display가 contents인 경우 block으로 계산된다.

3. 표시 순서: order 속성

상자는 일반적으로 원본 문서에 나타나는 순서와 같은 순서로 표시되고 배치된다. 일부 서식 문맥에서는, order 속성을 사용해 상자의 순서를 재배열하여 요소의 논리적 순서와 2D 시각 캔버스 위의 공간 배치가 의도적으로 달라지게 만들 수 있다. (§ 3.1 재정렬과 접근성 참조.)

구체적으로, order 속성은 flex 항목 또는 grid 항목이 컨테이너 안에 나타나는 순서를 순서 그룹에 할당함으로써 제어한다. 이는 단일 <integer> 값을 받으며, 해당 항목이 속하는 순서 그룹을 지정한다.

다음은 제목, 사진, 설명이 있는 카탈로그 항목 카드의 예이다. 각 항목 안에서 원본 문서 내용은 제목이 먼저 오고 그 뒤에 설명과 사진이 오도록 논리적으로 정렬되어 있다. 이는 음성 렌더링 및 CSS를 지원하지 않는 브라우저에 합리적인 순서를 제공한다. 그러나 더 설득력 있는 시각적 표현을 위해, order를 사용해 이미지가 내용의 뒤쪽에서 카드 맨 위로 올라오게 한다.

article.sale-item {
  display: flex;
  flex-flow: column;
}
article.sale-item > img {
  order: -1; /* 이미지를 다른 내용보다 앞쪽으로 이동(레이아웃 순서에서) */
  align-self: center;
}

<article class="sale-item">
  <h3>컴퓨터 스타터 키트</h3>
  <p>이것은 돈이 많지 않다면 살 수 있는 최고의 컴퓨터입니다.
  <ul>
    <li>컴퓨터
    <li>모니터
    <li>키보드
    <li>마우스
  </ul>
  <img src="images/computer.jpg"
    alt="제공 항목: 어울리는 주변기기가 포함된 흰색 데스크톱 컴퓨터."
    width="250" height="188">
</article>

컴퓨터 스타터 키트

이것은 돈이 많지 않다면 살 수 있는 최고의 컴퓨터입니다.

• 컴퓨터
• 모니터
• 키보드
• 마우스

Flex 및 grid 컨테이너는 가장 낮은 번호의 순서 그룹에서 시작해 위로 올라가며, 그 내용물을 order로 수정된 문서 순서로 배치한다. 같은 순서 그룹을 가진 항목은 원본 문서에 나타나는 순서대로 배치된다. 이는 페인팅 순서 [CSS2]에도 영향을 주며, 마치 flex/grid 항목이 원본 문서에서 재정렬된 것과 정확히 같다. flex/grid 컨테이너의 절대 위치 지정된 자식은 flex/grid 항목에 대한 상대적인 페인팅 순서를 결정하는 목적상 order: 0을 가진 것으로 처리된다.

향후 명세에서 달리 지정하지 않는 한, 이 속성은 flex 항목 또는 grid 항목이 아닌 상자에는 영향을 주지 않는다.

3.1. 재정렬과 접근성

order 속성은 비시각 매체 (예: 음성)에서의 순서에는 영향을 주지 않는다. 마찬가지로, order는 순차 탐색 모드의 기본 순회 순서에도 영향을 주지 않는다 (예: 링크를 순환하는 것, tabindex 참조 [HTML]).

작성자는 order를 내용의 논리적 재정렬이 아니라 공간적 재정렬에만 사용해야 한다. 논리적 재정렬을 수행하기 위해 order를 사용하는 스타일시트는 부적합하다.

참고: 이는 보통 내용을 선형적으로 제시하는 비시각 매체와 비 CSS UA가 논리적 원본 순서에 의존할 수 있도록 하기 위한 것이며, order는 레이아웃 순서를 조정하는 데 사용된다. (시각적 지각은 2차원적이고 비선형적이므로, 원하는 레이아웃 순서가 항상 논리적인 것은 아니다.)

모든 표현 모드에서 작성자의 의도한 순서를 보존하기 위해, WYSIWYG 편집기와 웹 기반 작성 보조 도구를 포함한 작성 도구는 기반 문서 소스를 재정렬해야 하며, 작성자가 공간적 순서가 기반 문서 순서(음성 및 탐색 순서를 결정함)와 동기화되지 않아야 한다고 명시적으로 표시하지 않은 한, 재정렬을 수행하기 위해 order를 사용해서는 안 된다.

참고: 브라우저, 접근성 기술, 확장 기능을 포함한 사용자 에이전트는 공간 탐색 기능을 제공할 수 있다. 이 절은 그러한 공간 탐색 모드에서 요소 순서를 결정할 때 order 속성을 고려하는 것을 배제하지 않는다; 실제로 그러한 기능이 작동하려면 이를 고려해야 할 것이다. 그러나 order는 그러한 공간 탐색 기능을 위해 고려해야 하는 유일한(또는 주된) CSS 속성이 아니다. 잘 구현된 공간 탐색 기능은 공간 관계를 수정하는 CSS의 모든 레이아웃 기능을 고려해야 한다.

4. 보이지 않음: visibility 속성

visibility 속성은 상자가 렌더링되는지 여부를 지정한다. 보이지 않는 상자는 여전히 레이아웃에 영향을 준다. (상자 생성을 완전히 억제하려면 display 속성을 none으로 설정한다.). 값은 다음 의미를 가진다:

visible

생성된 상자는 평소처럼 보인다.

hidden

요소가 생성한 모든 상자는 보이지 않는다. 그러나 요소의 자손은 visibility: visible을 가지고 있다면 보일 수 있다.

collapse

상자가 접힘 상태임을 나타내며, 서식 문맥별 방식으로 그렇지 않은 경우보다 더 적은 공간을 차지하게 할 수 있다. 표에서의 동적 행 및 열 효과 [CSS2] 및 flex 레이아웃의 접힌 flex 항목 [CSS-FLEXBOX-1]을 참조한다. 그러나 그 밖의 모든 경우에는, (즉 달리 지정되지 않는 한) 이는 단순히 상자를 보이지 않게 하며, hidden과 같다.

참고: 현재 많은 사용자 에이전트 및/또는 접근성 도구는 보이지 않는 요소와 의미론적 관계를 가진 보이는 요소의 접근성적 의미를 올바르게 구현하지 못한다. 예를 들어, 특수한 역할을 가진 부모 요소(예: 표 행)를 보이지 않게 만들면서 특수한 역할을 가진 자식 요소(예: 표 셀)는 보이게 두면, 이러한 도구를 사용하는 사용자에게 문제가 될 수 있다. 작성자는 도구 상황이 개선될 때까지 이러한 상황을 만들지 말아야 한다.

보이지 않는 상자는 렌더링되지 않으며 (완전히 투명한 것처럼), 상호작용할 수 없고 (pointer-events: none을 가진 것처럼 동작하며), 탐색에서 제거되고 (display: none과 유사), 음성으로도 렌더링되지 않는다 (단, speak가 always인 경우는 예외 [CSS-SPEECH-1]). 그러나 display: contents와 마찬가지로, 컨테이너로서의 의미론적 역할은 영향을 받지 않으며, 이는 어떤 visible 자손도 올바르게 해석되도록 보장하기 위함이다.

참고: speak가 always이면, 그렇지 않으면 보이지 않는 상자도 음성으로 렌더링되며, 비시각/공간적 방법으로 상호작용할 수 있다.

<p>영화 초반의 상징은 마지막에 명확해진다,
  <spoiler-text><span>Luke가 자기 자신의 아버지라는 사실</span></spoiler-text>이 밝혀지면서,
  마법사의 수수께끼 같은 말들이 의미를 갖게 된다.
<style>
spoiler-text { border-bottom: 1px solid; }
spoiler-text > span { visibility: hidden; }
spoiler-text.shown > span { visibility: visible; }
</style>
<script>
[...document.querySelectorAll("spoiler-text")].forEach(el=>{
  el.addEventListener("click", e=>el.classList.toggle("shown"));
});
</script>

5. Run-In 레이아웃

run-in 상자는 그 뒤에 오는 블록에 병합되어, 그 블록의 인라인 수준 내용의 시작 부분에 자신을 삽입하는 상자이다. 이는 간결한 제목, 정의, 그리고 유사한 항목을 서식화하는 데 유용하며, 적절한 DOM 구조는 이어지는 산문 앞에 제목이 있는 것이지만, 원하는 표시는 텍스트와 함께 배치되는 인라인 제목인 경우에 해당한다.

<dl class='dict'>
  <dt>dictionary
  <dd>a book that lists the words of a language in alphabetical
      order and gives their meaning, or that gives the equivalent
      words in a different language.
  <dt>glossary
  <dd>an alphabetical list of terms or words found in or relating
      to a specific subject, text, or dialect, with explanations; a
      brief dictionary.
</dl>
<style>
.dict > dt {
  display: run-in;
}
.dict > dt::after {
  content: ": "
}
</style>

dictionary: a book that lists the words of a language
in alphabetical order and explains their meaning.

glossary: an alphabetical list of terms or words found
in or relating to a specific subject, text, or dialect,
with explanations; a brief dictionary.

run-in 상자는 다음을 제외하면 다른 인라인 수준 상자와 정확히 동일하게 동작한다:

• run-in 상자가 flow 내부 표시 유형을 가지면, 그 내용물을 인라인화한다.
• run-in 시퀀스 바로 뒤에 새 블록 서식 문맥을 설정하지 않는 블록 상자가 오면, 이는 그 블록 상자의 직접 자식으로 삽입된다: ::marker 의사 요소의 상자(있는 경우) 뒤에, 그러나 블록의 내용이 생성하는 다른 모든 상자 (::before 의사 요소가 생성한 상자(있는 경우)를 포함)보다 앞에 삽입된다. 이 재부모화는 가능하면 재귀적으로 일어난다 (따라서 run-in은 사실상 자신의 서식 문맥에서 가장 깊은 이후의 “문단”의 일부가 되고, 진행하면서 새로 인접하게 된 run-in을 모은다).

  그런 다음 재부모화된 내용은 원래 그곳에 부모가 있었던 것처럼 서식화된다. 레이아웃만 영향을 받으며 상속은 영향을 받지 않는다는 점에 주의하라. 비익명 상자의 속성 상속은 요소 트리에만 기반하기 때문이다.

• 그렇지 않으면 (run-in 시퀀스 뒤에 그러한 블록이 오지 않는 경우), run-in 시퀀스와 바로 뒤따르는 모든 인라인 수준 내용 (다음 run-in 시퀀스가 있다면 그 직전까지)을 둘러싸는 익명 블록 상자가 생성된다.

run-in 시퀀스는 연속된 형제 run-in 상자와, 그 사이에 끼어 있는 공백 및/또는 out-of-flow 상자의 최대 시퀀스이다.

참고: 이 문장은 out-of-flow 상자가 두 run-in 상자 사이에 있으면 재부모화된다는 것을 암시한다. 또 다른 대안은 사이에 끼어 있는 out-of-flow 상자를 그대로 남겨 두거나, out-of-flow 상자가 앞선 상자의 run-in을 방해하도록 하는 것이다. 구현자와 작성자는 선호하는 동작이 있다면 CSSWG에 연락하기를 권장한다. 이 동작은 다소 임의로 선택된 것이기 때문이다.

이 보정은 CSS2§9.2에서 설명하는 익명 블록 및 인라인 상자 보정보다 먼저 발생하며, 영향을 받는 요소들의 첫 번째 서식화된 줄의 결정에 영향을 준다. 이는 run-in 시퀀스가 원래부터 상자 트리의 최종 위치에 있었던 것처럼 처리한다.

참고: 가장 앞선 run-in이 그 컨테이닝 블록의 첫 번째 서식화된 줄에 있는 첫 텍스트를 나타내므로, 그 블록 요소에 적용된 ::first-letter 의사 요소는 자신의 내용의 첫 글자가 아니라 run-in의 첫 글자를 선택한다.

참고: 이 run-in 모델은 [CSS2]의 이전 개정판에서 제안된 모델과 약간 다르다.

부록 A: 용어집

다음 용어는 편의를 위해 여기서 정의된다:

루트 요소

요소 트리의 루트에 있는 문서 트리의 요소. DOM 아래에서 생성된 문서 트리에서는 이것이 문서 요소이며; HTML에서는 html 요소이다. [DOM] [HTML]

주 상자

요소가 하나 이상의 상자를 생성할 때, 그중 하나가 주 상자이며, 이는 자신의 자손 상자와 생성된 내용을 포함하고, 어떤 위치 지정 방식에서도 관여하는 상자이기도 하다.

일부 요소는 주 상자 외에 추가 상자를 생성할 수 있다 (예: 추가 마커 상자를 생성하는 list-item 요소, 또는 table 요소, 이는 주 표 래퍼 상자와 추가 표 그리드 상자를 생성한다). 이러한 추가 상자는 주 상자를 기준으로 배치된다.

인라인 수준

인라인 레이아웃에 참여하는 내용. 구체적으로, 인라인 수준 상자와 텍스트 시퀀스.

블록 수준

블록 레이아웃에 참여하는 내용. 구체적으로, 블록 수준 상자.

인라인 상자

내부 표시 유형이 flow인 비대체 인라인 수준 상자. 인라인 상자의 내용은 인라인 상자 자체와 동일한 인라인 서식 문맥에 참여한다.

inline

모호하지 않은 경우 인라인 상자 또는 인라인 수준 상자의 약칭으로 사용되거나, 인라인 수준을 뜻하는 형용사로 사용된다. 후자의 사용법은 폐기 예정이다.

원자적 인라인

대체된(예: 이미지) 인라인 수준 상자, 또는 새 서식 문맥을 설정하는(예: inline-block 또는 inline-table) 인라인 수준 상자이며, 줄을 가로질러 나뉠 수 없다 (인라인 상자와 ruby 컨테이너는 나뉠 수 있다).

내부 표시 유형이 flow가 아닌 모든 인라인 수준 상자는 지정된 내부 표시 유형의 새 서식 문맥을 설정한다.

블록 컨테이너

블록 컨테이너는 인라인 서식 문맥에 참여하는 인라인 수준 상자만 포함하거나, 블록 서식 문맥에 참여하는 블록 수준 상자만 포함한다 (이 제약을 보장하기 위해 익명 블록 상자를 생성할 수 있으며, 이는 CSS2§9.2.1.1에 정의되어 있다).

인라인 수준 내용만 포함하는 블록 컨테이너는 새 인라인 서식 문맥을 설정한다. 그런 다음 요소는 모든 인라인 내용을 감싸는 루트 인라인 상자도 생성한다. 참고로, 이 루트 인라인 상자 개념은 CSS2§9.2.2.1에서 도입된 "익명 인라인 요소" 개념을 사실상 대체한다.

블록 컨테이너는 그 부모 서식 문맥이 블록 서식 문맥이 아닌 경우 새 블록 서식 문맥을 설정한다; 그렇지 않으면, 자신이 블록 서식 문맥에 참여할 때, 다른 속성의 제약 (예: overflow 또는 align-content)에 따라 자신의 내용을 위한 새 블록 서식 문맥을 설정하거나, 자신이 참여하는 블록 서식 문맥을 계속 이어간다.

참고: 블록 컨테이너 상자는 블록 서식 문맥과 인라인 서식 문맥을 동시에 설정할 수 있다.

블록 상자

블록 수준 상자이면서 블록 컨테이너인 상자.

참고: 모든 블록 컨테이너 상자가 블록 수준 상자인 것은 아니다: 예를 들어 비대체 인라인 블록과 비대체 표 셀은 블록 컨테이너이지만 블록 수준 상자는 아니다. 마찬가지로, 모든 블록 수준 상자가 블록 컨테이너인 것도 아니다: 블록 수준 대체 요소(display: block) 및 flex 컨테이너(display: flex)는 예를 들어 블록 컨테이너가 아니다.

block

모호하지 않은 경우 블록 상자, 블록 수준 상자, 또는 블록 컨테이너 상자의 약칭으로 사용된다.

대체 요소

내용이 CSS 서식 모델의 범위 밖에 있는 요소, 예를 들어 이미지나 임베드된 문서. 예를 들어, HTML img 요소의 내용은 종종 그 src 속성이 지정하는 이미지로 대체된다.

대체 요소는 종종 자연 치수를 가진다. 예를 들어, 비트맵 이미지는 절대 단위로 지정된 자연 너비와 자연 높이를 가지며 (이로부터 자연 비율은 당연히 결정될 수 있다). 반면, 다른 객체는 어떤 자연 치수도 가지지 않을 수 있다 (예를 들어, 빈 HTML 문서). [css-images-3]을 참조한다.

사용자 에이전트는 그러한 치수가 제3자에게 민감한 정보를 누출할 수 있다고 판단되는 경우 대체 요소가 어떤 자연 치수도 가지지 않는 것으로 간주할 수 있다. 예를 들어, HTML 문서가 사용자의 은행 잔고에 따라 자연 크기를 바꾼다면, UA는 그 리소스에 자연 치수가 없는 것처럼 동작하고자 할 수 있다.

대체 요소의 내용은 CSS 서식 모델에서 고려되지 않는다; 그러나 그 자연 치수는 다양한 레이아웃 계산에 사용된다. 대체 요소는 항상 독립 서식 문맥을 설정한다.

비대체 요소는 대체되지 않은 요소, 즉 그 렌더링이 CSS 모델에 의해 지시되는 요소이다.

컨테이닝 블록

자신과 연결된 상자의 크기 지정과 위치 지정의 기반이 되는 직사각형. 특히, 컨테이닝 블록은 상자가 아니다 (직사각형이다), 그러나 종종 상자의 치수에서 파생된다. 각 상자는 그 컨테이닝 블록을 기준으로 위치가 주어지지만, 이 컨테이닝 블록에 의해 제한되지는 않는다; 이는 오버플로할 수 있다. “상자의 컨테이닝 블록”이라는 표현은 “그 상자가 그 안에 존재하는 컨테이닝 블록”을 뜻하며, 그 상자가 생성하는 것을 뜻하지 않는다.

일반적으로, 가장자리를 가진 상자는 자손 상자의 컨테이닝 블록으로 작용한다; 우리는 상자가 그 자손을 위한 컨테이닝 블록을 “설정”한다고 말한다. 컨테이닝 블록의 속성이 참조되면, 이는 그 컨테이닝 블록을 생성한 상자의 값을 참조한다. (초기 컨테이닝 블록의 경우, 달리 지정되지 않는 한 값은 루트 요소에서 가져온다.)

자세한 내용은 [CSS2] 9.1.2절 및 10.1절, 그리고 CSS Positioned Layout 3 § 2.1 위치 지정된 상자의 컨테이닝 블록을 참조한다.

컨테이닝 블록 체인

컨테이닝 블록 관계를 통해 조상-자손 체인을 형성하는 연속된 컨테이닝 블록의 시퀀스. 예를 들어, 인라인 상자의 컨테이닝 블록은 가장 가까운 블록 컨테이너 조상의 내용 상자이다; 그 블록 컨테이너가 in-flow 블록이라면, 그것의 컨테이닝 블록은 그 부모 블록 컨테이너에 의해 형성된다; 그 조부모 블록 컨테이너가 절대 위치 지정되어 있다면, 그것의 컨테이닝 블록은 가장 가까운 위치 지정된 조상(반드시 부모일 필요는 없음)의 패딩 가장자리이며, 이런 식으로 초기 컨테이닝 블록까지 이어진다.

초기 컨테이닝 블록

루트 요소의 컨테이닝 블록. 초기 컨테이닝 블록은 블록 서식 문맥을 설정하고, 문서의 주요 쓰기 모드를 취한다 (CSS Writing Modes 4 § 8.1 초기 컨테이닝 블록으로의 전파 참조). 연속 매체에서는, 이는 small viewport size의 치수를 가지며 캔버스 원점에 고정된다. 페이지 매체에서는, 그 위치와 치수에 대해 [CSS-PAGE-3]을 참조한다.

서식 문맥

서식 문맥은 관련 상자 집합이 배치되는 환경이다. 서로 다른 서식 문맥은 각기 다른 규칙에 따라 상자를 배치한다. 예를 들어, flex 서식 문맥은 flex 레이아웃 규칙 [CSS-FLEXBOX-1]에 따라 상자를 배치하는 반면, 블록 서식 문맥은 블록 및 인라인 레이아웃 규칙 [CSS2]에 따라 상자를 배치한다. 또한, 일부 유형의 서식 문맥은 서로 끼어들고 공존한다: 예를 들어, 인라인 서식 문맥은 이를 설정한 요소의 블록 서식 문맥 안에 존재하고 그와 상호작용하며, ruby 컨테이너는 그 ruby base 컨테이너가 참여하는 인라인 서식 문맥 위에 ruby 서식 문맥을 겹쳐 놓는다.

상자는 새 독립 서식 문맥을 설정하거나, 자신의 컨테이닝 블록의 서식 문맥을 계속 이어간다. 일부 경우에는, 추가로 새 (비독립) 공존 서식 문맥을 설정할 수도 있다. 그러나 달리 지정되지 않는 한, 새 서식 문맥을 설정하면 독립 서식 문맥이 생성된다. 상자가 설정하는 서식 문맥의 유형은 그 내부 표시 유형에 의해 결정된다. 예를 들어 grid 컨테이너는 새 grid 서식 문맥을 설정하고, ruby 컨테이너는 새 ruby 서식 문맥을 설정하며, 블록 컨테이너는 새 블록 서식 문맥 및/또는 새 인라인 서식 문맥을 설정할 수 있다. display 속성을 참조한다.

독립 서식 문맥

상자가 독립 서식 문맥을 설정하면 (그 서식 문맥이 부모와 같은 유형이든 아니든), 본질적으로 새롭고 독립적인 레이아웃 환경을 만든다: 상자 자체의 크기 지정 과정을 통한 경우를 제외하면, 그 자손의 레이아웃은 (일반적으로) 상자 밖의 서식 문맥의 규칙과 내용에 의해 영향을 받지 않으며, 그 반대도 마찬가지이다.

예를 들어, 블록 서식 문맥에서, 플로팅된 상자는 주변 상자의 레이아웃에 영향을 준다. 그러나 그 영향은 자신의 서식 문맥 밖으로 빠져나가지 않는다: 그 서식 문맥을 설정하는 상자가 이를 완전히 포함하도록 커지고, 그 상자 밖의 float는 상자 안쪽 내용으로 돌출해 영향을 줄 수 없다.

또 다른 예로, 마진은 서식 문맥 경계를 가로질러 상쇄되지 않는다.

Exclusion은 독립 서식 문맥 경계를 넘어 내용에 영향을 줄 수 있다. (작성 시점에는, 이것이 가능한 유일한 레이아웃 기능이다.) [CSS3-EXCLUSIONS]

특정 속성은 상자가 보통은 그렇게 하지 않을 경우에도 독립 서식 문맥을 설정하도록 강제할 수 있다. 예를 들어, 상자를 out-of-flow로 만들면 이는 블록화되고 독립 서식 문맥을 설정하게 된다. 또 다른 예로, contain 속성의 특정 값은 상자가 독립 서식 문맥을 설정하게 할 수 있다. 블록을 스크롤 컨테이너로 바꾸면 이는 독립 서식 문맥을 설정하게 된다; 그러나 subgrid를 스크롤 컨테이너로 바꾸는 경우에는 그렇지 않다—​그것은 계속 subgrid로 동작하며, 그 내용은 부모 grid 컨테이너의 레이아웃에 참여한다.

블록 상자가 독립 서식 문맥을 설정하면, 그 내용물을 위해 새 블록 서식 문맥을 설정한다. 대부분의 다른 경우, 상자가 독립 서식 문맥을 설정하도록 강제하는 것은 아무 효과가 없다—​상자가 이미 독립 서식 문맥을 설정하고 있거나 (예: flex 컨테이너), 해당 유형의 상자에 완전히 독립적인 새 서식 문맥을 설정하는 것이 불가능하기 때문이다 (예: 비대체 인라인 상자).

블록 서식 문맥

인라인 서식 문맥

블록 및 인라인 서식 문맥은 CSS 2.1 9.4절에 정의되어 있다. 인라인 서식 문맥은 블록 서식 문맥 안에 존재한다 (그 컨테이닝 문맥의 일부이다); 예를 들어, 인라인 서식 문맥에 속하는 줄 상자는 블록 서식 문맥에 속하는 float와 상호작용한다.

블록 레이아웃

블록 서식 문맥 안에서 수행되는 블록 수준 상자의 레이아웃.

블록 서식 문맥 루트

새 블록 서식 문맥을 설정하는 블록 컨테이너.

BFC

블록 서식 문맥 또는 블록 서식 문맥 루트의 약어. 내부 float를 포함하고, 외부 float를 배제하며, 마진 상쇄를 억제하는 상자를 지칭하는 여러 비공식 정의를 가지므로, 구체적으로 다음 중 하나를 가리킬 수 있다:

• 그 내용물을 위해 새 블록 서식 문맥을 설정하는 블록 컨테이너

• 그 내용물을 위해 블록 서식 문맥을 설정하는 블록 상자 (즉, 블록 수준 블록 컨테이너) (그렇지 않은 블록 상자와 구별됨)

• (매우 느슨하게) 새 서식 문맥 (인라인 서식 문맥이 아닌 것)을 설정하는 모든 블록 수준 상자

out-of-flow

in-flow

상자는 자신의 예상 위치와 주변 내용과의 상호작용에서 추출되어, 부모 서식 문맥 안의 정상 흐름 밖에서 다른 패러다임을 사용해 배치되는 경우 out-of-flow이다. 이는 상자가 (float를 통해) 플로팅되거나, (position을 통해) 절대 위치 지정된 경우에 발생한다. 상자는 out-of-flow가 아니면 in-flow이다.

참고: 일부 서식 문맥은 플로팅을 억제하므로, float: left를 가진 요소가 반드시 out-of-flow인 것은 아니다.

문서 순서

상자나 내용이 문서 안에서 나타나는 순서 (이는 렌더링에서 나타나는 순서와 다를 수 있다). 의사 요소의 상대적 순서를 결정하는 목적상, 상자 트리 순서를 사용한다. CSS Pseudo-Elements 4 § 4 트리 준수 의사 요소를 참조한다.

이러한 용어의 더 완전한 정의는 [CSS2] 9장을 참조한다.

부록 B: 특수한 요소에 대한 display: contents의 영향

이 절은 (현재) 비규범적이다.

일부 요소는 순수하게 CSS 상자 개념만으로 렌더링되지 않는다; 예를 들어, 대체 요소(예: img), 많은 폼 컨트롤(예: input), 그리고 SVG 요소가 있다.

이 부록은 그것들이 display: contents와 어떻게 상호작용하는지 정의한다.

HTML 요소

br

wbr

meter

progress

canvas

embed

object

audio

iframe

img

video

frame

frameset

input

textarea

select

display: contents는 display: none으로 계산된다.

legend

HTML에 따르면, display: contents를 가진 legend는 렌더링된 legend가 아니므로, 마법 같은 표시 동작을 가지지 않는다. (따라서 이는 display: contents에 정상적으로 반응한다.)

button

details

fieldset

이러한 요소는 특별한 동작을 가지지 않는다; display: contents는 단순히 그 주 상자를 제거하며, 그 내용은 평소처럼 렌더링된다.

기타 HTML 요소

display: contents에 대해 정상적으로 동작한다.

SVG 요소

CSS 상자 레이아웃을 가지는 svg 요소 (여기에는 부모가 HTML 요소인 모든 svg와 문서 루트 요소가 포함된다)

display: contents는 display: none으로 계산된다.

그 밖의 모든 SVG 컨테이너 요소 중 렌더링 가능 요소이기도 한 것

SVG 텍스트 내용 자식 요소

use

display: contents는 요소를 서식 트리에서 제거하고, 그 내용을 끌어올려 그 자리에 표시한다. 이 내용에는 use의 shadow-DOM 내용이 포함된다.

기타 SVG 요소

display: contents는 display: none으로 계산된다.

요소가 서식 트리에서 제거되면, 그 요소에 있는 레이아웃과 시각 서식화를 제어하는 모든 SVG 속성은 내용을 렌더링할 때 무시된다. 그러나 CSS 속성에 대응되는 SVG 프레젠테이션 속성은 값 처리와 상속에 계속 영향을 준다 [CSS-CASCADE-3]; 따라서 그러한 속성은 자손에서 해당 속성들의 값에 영향을 줌으로써 요소 자손의 레이아웃과 시각 서식화에 영향을 줄 수 있다.

MathML 요소

모든 MathML 요소에 대해, display: contents는 display: none으로 계산된다.

부록 C: 명세 작성자를 위한 상자 구성 지침

이 절은 명세 작성자를 위한 비규범적 지침이다.

• 상자는 동시에 블록화되고 인라인화될 수 없다; 그런 일이 발생할 수 있다면, 어느 쪽이 다른 쪽보다 우선하는지 정의하라.

• 비주 비익명 상자는 블록화될 수 없다: 블록화는 요소의 계산값에 영향을 주며, 따라서 그 주 상자의 유형을 결정한다.

• 자신의 내용을 블록화하는 상자는 인라인 수준 내용을 직접 포함할 수 없다; 그러한 요소 안에서 생성된 모든 상자나 텍스트 시퀀스는 블록화되거나 익명 블록 컨테이너로 감싸져야 한다.

• 자신의 내용을 인라인화하는 상자는 블록 수준 상자를 직접 포함할 수 없다; 그러한 요소 안에서 생성된 모든 상자는 인라인 수준이어야 한다.

• 근본적으로 독립 서식 문맥을 설정할 수 없는 상자 (예: 비대체 인라인)는 독립 서식 문맥을 설정하도록 요구되어서는 안 된다. 먼저 블록화하거나, 아니면 독립 서식 문맥을 설정할 수 있는 상자 유형으로 변경하라.

감사의 말

수년에 걸쳐 상자 생성의 서로 다른 세부 사항을 분리하려고 시도한 많은 사람들에게 감사드린다. 특히 Bert Bos에게 감사드린다. 그는 display-model과 display-role을 사용한 마지막 시도가 어디에도 이르지는 못했지만, 현재 명세를 준비하는 기반이 되었다; CSS2.1 9장에 대한 끈질긴 공략으로 혼돈 속에서 어느 정도 질서를 끌어낸 Anton Prowse; 그리고 이 명세의 수십 가지 미묘한 구별과 오류를 풀어낸 Oriol Brufau에게도 감사드린다. 또한 David Baron, Mats Palmgren, Ilya Streltsyn, Boris Zbarsky의 피드백에도 특별히 감사드린다.

변경 사항

2023 후보 권고안 스냅샷 이후 변경 사항

2023년 3월 30일 후보 권고안 스냅샷 이후 변경 사항은 다음을 포함한다:

• 연속 매체에 대한 초기 컨테이닝 블록의 CSS2.1 정의를 본문에 통합하고, [CSS-WRITING-MODES-4]에 정의된 대로 그 쓰기 모드 전파를 상호 참조했으며, 그것이 small viewport size를 가리킨다는 점을 명확히 했다. (이슈 6453)

2020 후보 권고안 이후 변경 사항

2020년 5월 19일 후보 권고안 이후의 의견 처리 결과가 제공된다.

2020년 5월 19일 후보 권고안 이후 변경 사항은 다음을 포함한다:

• “text run”을 “text sequence”로 이름을 바꾸었다. (이슈 7768)
• 루트 요소를 정의하고, § 2.8 루트 요소의 주 상자 및 초기 컨테이닝 블록의 정의에서 그 레이아웃을 블록 수준으로 명확히 했다. (PR 8095, 이슈 7207, 이슈 6480, 이슈 7786)
• order 속성 정의를 [CSS-FLEXBOX-1]에서 가져왔다. 이는 grid 항목에도 적용되기 때문이다. (이슈 5865)
• visibility 속성 정의를 [CSS2]에서 가져오고, 더 철저하고 완전하게 업데이트했다. (이슈 6123)
• 레이아웃 내부 display를 가진 대체 요소는 display: inline처럼 처리된다고 정의했다. (이슈 6000)
• <display-legacy> 값이 실제로 두 키워드 대응값과 같은 값으로 계산된다는 점을 명확히 했다. (이슈 5575)

  inline-…

  다음처럼 동작함 다음으로 계산됨 inline ….

  참고: 이러한 키워드와 그 대응값은 같은 값으로 계산되지만, 그 지정값은 서로 구별된 채로 유지된다.

  참고: getComputedStyle() 직렬화 규칙은 가장 짧고, 가장 하위 호환적인 직렬화 원칙 때문에 동등한 두 키워드 쌍이 아니라 항상 이러한 미리 조합된 키워드를 출력한다.

• 블록화와 인라인화가 계산값 변경이라는 점을 명확히 했다. (이슈 6251)

  일부 레이아웃 효과는 상자 유형의 블록화 또는 인라인화를 필요로 하며, 이는 상자의 계산된 외부 표시 유형을 각각 block 또는 inline으로 설정한다.

• 편의를 위해 용어집에 블록 레이아웃 정의를 추가했다.
• CSS Grid Layout 참조를 업데이트했다.
• 여러 사소한 편집상 명확화와 상호 링크 개선.

2019 후보 권고안 이후 변경 사항

2019년 7월 11일 후보 권고안 이후 변경 사항은 다음을 포함한다:

• 컨테이닝 블록의 정의에 [CSS2]의 추가 설명을 병합했다.
• CSS의 목적상, 요소와 텍스트가 아닌 DOM 노드는 무시된다는 점을 명확히 했다.

  (일부 원본 문서는 DOM과 같은 더 복잡한 트리에서 시작하며, 여기에는 주석 노드와 다른 유형의 것들이 있을 수 있다. CSS의 목적상, 이러한 모든 추가 유형의 노드는 존재하지 않았던 것처럼 무시된다.)

• 절대 위치 지정과 관련된 용어집 정의를 개선/이동했다.

2018년 8월 28일 후보 권고안 이후 변경 사항은 다음을 포함한다:

• 상자 트리의 부모 관계를 정의했다; 부모 상자 참조.
• 용어집에 절대 위치 지정의 정의를 추가했다; 더 쉬운 참조를 위해 CSS2에서 복사했다.
• § 1 소개에 여러 형태의 단편화에 대한 상호 참조를 추가했다.
• “table box”를 “table grid box”로 이름을 바꾸어 “table wrapper box”와 더 쉽게 구별되도록 했다.
• HTML body 요소에 대한 유감스러운 특수 예외가 일부 있으므로, 루트 → 초기 컨테이닝 블록 전파에 “달리 지정되지 않는 한”을 추가했다.

후보 권고안 상태 이전의 변경 사항

의견 처리 결과가 제공된다.

2018년 4월 20일 작업 초안 이후 변경 사항은 다음을 포함한다:

• display: none처럼 동작하는 display: contents를 가진 요소는 이제 display: none으로 계산된다. (이슈 2755)
• 특정 서식 문맥이 겹쳐지기 때문에, “새” 서식 문맥을 독립 서식 문맥과 구별했다. (이슈 2597, 이슈 1457)
• 독립 서식 문맥을 설정하는 블록 상자가, 더 쉬운 참조 지점을 제공하기 위해, flow-root의 사용된 display를 가진다고 정의했다. (이슈 1550)
• display가 (이산적으로 애니메이션 가능한 것이 아니라) 애니메이션 가능하지 않다는 점을 명확히 했다. (이슈 2938)
• 사소한 편집 수정.

2017년 7월 20일 작업 초안 이후 변경 사항은 다음을 포함한다:

• CSS2와의 호환성을 보장하기 위해, inline-block / inline flow-root의 블록화 규칙을 강화했다. (이슈 1246) run-in flow-root 처리도 이에 맞게 업데이트했다. (이슈 1715)

• display의 문법을 조정하여 list-item 키워드를 마지막에 나열했다. 이는 예상 직렬화 순서에 영향을 준다. (이슈 1621)

• 인라인 서식 문맥을 설정하는 블록 컨테이너에서 블록 서식 문맥과 인라인 서식 문맥 사이의 상호작용을 더 잘 정의했다. (이슈 1553)

• (요소가 여러 상자를 생성하는 경우) 속성 값이 요소와 그 상자 사이에서 반영되는 방식을 더 명확하게 정의했다. (이슈 1643)

• 빈 텍스트 객체가 CSS 렌더링에서 무시된다는 점을 명확히 했다. (이슈 1808)

• UA에서 흔한 버그이므로, display가 문서 의미론에 영향을 주지 않는다는 점을 명확히 했다. (이슈 2355)

• 다양한 속성에 의해 트리거되는 블록화 및 인라인화 규칙 때문에, 확실히 “지정된 대로”가 아닌 display의 계산값 정의 오류를 수정했다. (이슈 1716)

• 문서 순서 정의를 추가했다.

• 부록 B의 display: contents 세부 사항에 누락된 SVG 요소를 추가하고 (이슈 2118), SVG 속성의 효과를 명확히 했으며 (이슈 2502), MathML에 대한 동작을 정의했다 (이슈 2167).

• 미래 명세 작성자를 위해 익명 상자 구성 규칙에 대한 몇 가지 지침을 추가했다. (이슈 1643)

• “서식 문맥이 되기”에 관한 절을 사용되는 위치인 CSS Containment로 되돌렸다.

• 여러 사소한 문구 수정 및 명확화.

2017년 1월 26일 작업 초안 이후 변경 사항은 다음을 포함한다:

• inline list-item과 동등한 inline-list-item 값을 제거했다.

• display: contents 문맥에서의 동작을 정의하기 위해, 요소 트리에 “텍스트 노드” 개념을, 상자 트리에 “텍스트 런” 개념을 추가했다. (이슈 19, 이슈 32)

• 루트 요소가 “in flow”라고 정의했다. (이슈 3)

• ::first-line/::first-letter와 run-in의 상호작용을 정의했다. (이슈 5, 이슈 42)

• block/inline/run-in은 흐름 레이아웃에서만 동작을 지시하며, 다른 문맥에서는 무시된다는 점을 명확히 했다.

• Run-in은 단지 인라인 상자와 “같은” 것이 아니라 인라인 상자의 한 유형이다.

• run-in의 상자 트리 조정에서 재귀가 없던 문제를 수정했다. (이슈 45)

• “특수한 요소”에서 display: contents가 어떻게 작동하는지에 대한 부록을 추가했다. (이슈 8, 이슈 18)

• 특히 레이아웃 내부 유형 처리와 관련하여, 블록화 및 인라인화 규칙을 수정했다. (이슈 35, 이슈 57)

• 다양한 상자 트리 보정의 상호작용을 명확히 했다. (이슈 38, 이슈 48)

• “서식 문맥이 되기”의 정의를 추가했다.

• 여러 사소한 수정 및 사소한 명확화.

의견 처리 결과도 제공된다.

2015년 10월 15일 작업 초안 이후 변경 사항은 다음을 포함한다:

• box-suppress/display-or-not 속성은 사용 사례에 대한 추가 논의 시간을 제공하기 위해 Display의 다음 수준으로 연기했다.
• 대체 요소와 폼 컨트롤 같은 특수한 요소에서의 display: contents의 효과를 지정했다.
• 요소 자신의 상자가 display: contents 때문에 생성되지 않더라도, 그 요소의 ::before 및 ::after 의사 요소는 여전히 존재한다는 점을 명확히 했다.
• display: contents가 이벤트 버블링에 영향을 주지 않는다는 점을 명확히 했다.
• run-in과 out-of-flow 요소 및 ::first-letter의 상호작용을 명확히 했다.
• table-caption 및 table-cell은 항상 서식 문맥 루트를 형성하므로, 그 내부 표시 유형으로 flow-root를 사용하도록 전환했다.
• 남은 이슈를 종료하고 at-risk 목록을 추가했다.

2015년 7월 21일 작업 초안 이후 변경 사항은 다음을 포함한다:

• 용어집에 in-flow 및 out-of-flow 정의를 추가했다.

2014년 9월 11일 작업 초안 이후 변경 사항은 다음을 포함한다:

• display-inside, display-outside, 및 display-extras 롱핸드를 제거하고, 대신 display를 다중 값으로 만들었다. (이는 무엇이 결합될 수 있는지에 대한 제약을 부과하기 위해 수행되었다. 이 명세의 향후 수준에서는 그러한 제한이 불필요하거나 원치 않는 것이 되면 일부 또는 전부를 완화할 수 있다.)
• 흐름 레이아웃 표시 유형을 더 잘 표현하고, 요소를 BFC 루트로 만드는 명시적 스위치를 만들기 위해 flow 및 flow-root 내부 표시 유형을 만들었다. (이는 이 목적을 달성하기 위한 ::after { clear: both; } 및 overflow: hidden 같은 해킹의 필요성을 없앨 것이다.)

개인정보 보호 고려사항

이 명세는 새로운 개인정보 보호 고려사항을 도입하지 않는다.

보안 고려사항

이 명세는 새로운 보안 고려사항을 도입하지 않는다.

자체 검토 설문지

자체 검토 설문지: 보안 및 개인정보 보호: 고려할 질문에 따름

1. 이 명세는 개인 식별 가능 정보를 다루는가?

   아니요.

2. 이 명세는 고가치 데이터를 다루는가?

   아니요.

3. 이 명세는 브라우징 세션 간에 지속되는 origin의 새 상태를 도입하는가?

   아니요.

4. 이 명세는 지속적이고 cross-origin인 상태를 웹에 노출하는가?

   아니요.

5. 이 명세는 origin이 현재 접근할 수 없는 다른 데이터를 노출하는가?

   아니요.

6. 이 명세는 새로운 스크립트 실행/로드 메커니즘을 가능하게 하는가?

   아니요.

7. 이 명세는 origin이 사용자의 위치에 접근하도록 허용하는가?

   아니요.

8. 이 명세는 origin이 사용자 기기의 센서에 접근하도록 허용하는가?

   아니요.

9. 이 명세는 origin이 사용자의 로컬 컴퓨팅 환경의 측면에 접근하도록 허용하는가?

   아니요.

10. 이 명세는 origin이 다른 기기에 접근하도록 허용하는가?

    아니요.

11. 이 명세는 origin이 사용자 에이전트의 네이티브 UI를 어느 정도 제어하도록 허용하는가?

    아니요.

12. 이 명세는 임시 식별자를 웹에 노출하는가?

    아니요.

13. 이 명세는 first-party와 third-party 문맥에서의 동작을 구별하는가?

    아니요.

14. 이 명세는 사용자 에이전트의 "시크릿" 모드 문맥에서 어떻게 작동해야 하는가?

    다르게 작동하지 않는다.

15. 이 명세는 사용자의 로컬 기기에 데이터를 지속 저장하는가?

    아니요.

16. 이 명세에는 "보안 고려사항" 및 "개인정보 보호 고려사항" 절이 있는가?

    예.

17. 이 명세는 기본 보안 특성의 하향 조정을 허용하는가?

    아니요.