CSS 박스 사이징 모듈 레벨 4

1. 소개

이 문서는 CSS Sizing Level 3에 대한 변경(dif) 명세입니다. 현재 탐색적 워킹 드래프트(Exploratory Working Draft) 단계이므로, 실제 구현 시에는 Level 3를 참조로 사용해 주세요. 이 초안이 CR 단계에 도달하면 Level 3의 내용을 이 초안에 병합할 예정입니다.

1.1. 모듈 상호작용

이 모듈은 width, height, min-width, min-height, max-width, max-height, 그리고 column-width 기능을 [CSS2] 10장과 [CSS3COL]에서 정의된 대로 확장합니다.

1.2. 값 정의

이 명세는 CSS 속성 정의 규칙을 [CSS2]에서 따르며, 값 정의 문법은 [CSS-VALUES-3]을 사용합니다. 이 명세에서 정의되지 않은 값 타입은 CSS Values & Units [CSS-VALUES-3]에서 정의됩니다. 다른 CSS 모듈과 조합될 경우, 이러한 값 타입들의 정의가 확장될 수 있습니다.

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

2. 용어

CSS Sizing 3 §2 용어

3. 박스 크기 지정

CSS Sizing 3 §3 박스 크기 지정

3.1. 크기 지정 속성

축약형 추가 예정. <https://github.com/w3c/csswg-drafts/issues/820>

3.2. 새로운 크기 값: stretch, fit-content, contain 키워드

stretch

스트레치 맞춤 크기 결정을 적용하여, 상자의 마진 박스 크기를 해당 컨테이닝 블록의 크기에 맞추려고 합니다. § 6.1 스트레치 맞춤 크기 결정: 컨테이닝 블록 채우기를 참조하십시오.

fit-content

본질적으로 fit-content(stretch), 즉 min(max-content, max(min-content, stretch))입니다.

contain

상자에 선호 종횡비가 있는 경우, 포함 맞춤 크기 결정을 적용하여, 가능한 한 선호 종횡비를 유지하면서 상자의 제약 조건에 맞추려고 합니다. § 6.2 포함 맞춤 크기 결정: 종횡비를 유지하면서 스트레치하기를 참조하십시오.

상자에 선호 종횡비가 없는 경우, 스트레치 맞춤 크기 결정을 적용합니다.

4. 종횡비

이미지는 종종 자연 종횡비를 가지며, CSS 레이아웃 알고리즘은 요소의 크기를 조정할 때 이를 최대한 보존하려고 합니다.

aspect-ratio 속성은 이 동작을 대체 요소가 아닌(non-replaced) 요소에도 지정할 수 있게 하며, 대체 요소의 실제 종횡비도 변경할 수 있습니다.

이 섹션의 세부 내용은 아직 작업 중입니다. 만약 여기 명시된 동작 중 대체 요소가 기본 종횡비를 가질 때 CSS2, Flex Layout, Grid Layout 명세(이 명세가 적용되지 않은 상태)와 다르게 동작한다면, 이것은 오류이므로 CSSWG에 보고해 주세요.

4.1. 기본 종횡비: aspect-ratio 속성

이 속성은 박스에 기본 종횡비를 설정하며, 이는 auto 크기 및 기타 레이아웃 함수 계산에 사용됩니다.

auto

대체 요소가 자연 종횡비를 가지고 있다면 해당 종횡비를 사용하며; 그렇지 않으면 박스에는 기본 종횡비가 없습니다. 종횡비가 포함된 크기 계산은 항상 콘텐츠 박스의 크기로 처리됩니다.

<ratio>

박스의 기본 종횡비는 지정된 width / height 비율입니다. 종횡비가 포함된 크기 계산은 box-sizing이 지정한 박스의 크기를 사용합니다.

<ratio>가 비정상적(degenerate)이면, 속성은 auto와 동일하게 동작합니다.

auto && <ratio>

auto와 <ratio>가 함께 지정된 경우, 기본 종횡비는 지정된 width / height 비율이며, 만약 대체 요소가 자연 종횡비를 가지면 해당 종횡비가 대신 사용됩니다. 모든 경우에 종횡비가 포함된 크기 계산은 항상 콘텐츠 박스의 크기로 처리됩니다.

<ratio>가 비정상적(degenerate)이면, 속성은 auto와 동일하게 동작합니다.

참고: 선호 종횡비가 있다고 해서 상자가 대체 요소가 되는 것은 아닙니다. 대체 요소에만 적용되는 레이아웃 규칙은 일반적으로 비대체 상자에 선호 종횡비가 있더라도 적용되지 않습니다. 예를 들어, 비대체 절대 위치 지정된 상자는 justify-self: normal을 stretch로 처리하며, start로 처리하지 않습니다(CSS 박스 정렬 3 §6.1.2 절대 위치 지정된 박스). 선호 종횡비가 있더라도 마찬가지입니다

CSS2.1은 대체 요소와 종횡비가 있는 요소를 명확히 구분하지 않습니다. 명확하지 않은 특정 사례를 파악하여, 적절한 Level 3 명세 또는 이곳에 정의가 필요합니다.

<ul>
  <li>…
  <li>…
  <li>…
  <li>…
</ul>

ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
}
li {
  aspect-ratio: 1/1;
  overflow: auto;
}

<iframe
  src="https://www.youtube.com/embed/0Gr1XSyxZy0"
  width=560
  height=315
  >

@supports (aspect-ratio: attr(width number) / 1) {
  iframe {
    aspect-ratio: attr(width number) / attr(height number);
    width: 100%;
    height: auto;
  }
}

대체 요소의 자연 치수가 자연 너비 또는 자연 높이만 있을 경우, 기본 종횡비를 부여하면 자연 높이 또는 너비(누락된 값을)도 함께 부여되어, 기존 치수가 기본 종횡비를 통해 전달됩니다.

4.2. 기본 종횡비가 자동 크기에 미치는 영향

상자에 선호 종횡비가 있는 경우, 해당 자동 크기는 고유 종횡비가 있고 해당 축에 고유 크기가 없는 대체 요소와 동일하게 계산됩니다. 예를 들어 CSS2 § 10 및 CSS Flexible Box Model Level 1 § 9.2를 참조하십시오. 선호 크기 계산이 이 종횡비에 의존하는 축을 비율 종속 축이라고 하며, 그 결과 크기는 입력 크기도 확정적인 경우 확정적입니다. 반대쪽 축(비율 종속 축의 크기가 의존하는 축)은 비율 결정 축입니다.

참고: 기본 종횡비는 박스의 크기 중 적어도 하나가 자동이어야만 효과가 있습니다. width와 height가 모두 자동 크기가 아니라면, 기본 크기에 영향을 줄 수 없습니다.

모든 크기 지정 정보를 이곳으로 이동하면, 2.1에 억지로 끼워넣기보다는, 여기서의 핵심 원칙은 다음과 같습니다: 종횡비 결정 축(ratio-determining axis)에서의 최종 기본 크기(min/max 적용 전)가 종횡비를 통해 전달됩니다. min/max 제약은 그 후에 전달되고, 각 축에 독립적으로 적용되어 종횡비와는 무관하게 처리됩니다.

4.2.1. 마진 병합

마진 병합(CSS 2 §8.3.1 마진 병합)을 위해, 블록 축이 종횡비 종속 축인 경우, 계산된 block-size가 auto라고 간주하지 않습니다.

4.3. 자동 콘텐츠 기반 최소 크기

의도치 않은 오버플로우를 방지하기 위해, 자동 최소 크기는 종횡비 종속 축에 대해, 기본 종횡비가 있지만 대체 요소도 아니고 스크롤 컨테이너도 아닌 박스의 경우 min-content 크기로 정해지며, 이는 최대 크기로 제한됩니다.

div {
  aspect-ratio: 1/1;
  /* 'width'와 'height' 모두 기본값은 'auto' */
}

+----------+  +----------+  +----------+
| ~~~~~~~~ |  | ~~~~~~~~ |  | ~~~~~~~~ |
| ~~~~~~~~ |  | ~~~~~~~~ |  | ~~~~~~~~ |
| ~~~~~~~  |  | ~~~~~~~~ |  | ~~~~~~~~ |
|          |  | ~~~      |  | ~~~~~~~~ |
+----------+  +----------+  | ~~~~~~~~ |
                            | ~~~~~~   |
                            +----------+

div {
  overflow: auto;
  aspect-ratio: 1/1;
}

+----------+  +----------+  +----------+
| ~~~~~~~~ |  | ~~~~~~~~ |  | ~~~~~~~~^|
| ~~~~~~~~ |  | ~~~~~~~~ |  | ~~~~~~~~ |
| ~~~~~~~  |  | ~~~~~~~~ |  | ~~~~~~~~ |
|          |  | ~~~      |  | ~~~~~~~~v|
+----------+  +----------+  +----------+

div {
  aspect-ratio: 1/1;
  min-height: 0;
}

+----------+  +----------+  +----------+
| ~~~~~~~~ |  | ~~~~~~~~ |  | ~~~~~~~~ |
| ~~~~~~~~ |  | ~~~~~~~~ |  | ~~~~~~~~ |
| ~~~~~~~  |  | ~~~~~~~~ |  | ~~~~~~~~ |
|          |  | ~~~      |  | ~~~~~~~~ |
+----------+  +----------+  +-~~~~~~~~-+
                              ~~~~~~    

<div style="height: 100px; aspect-ratio: 1/1;">
  <span style="display: inline-block; width: 50px;"></span>
  <span style="display: inline-block; width: 150px;"></span>
</div>

4.4. 최소/최대 크기 전달

어느 한 축(여기서는 origin 축)의 크기 제약 조건은 기본 종횡비를 통해 변환되어, 다른 축(destination 축)의 불확정 최소 또는 최대 혹은 기본 크기에 아래와 같이 적용됩니다:

• 먼저, 확정적 최소 크기가 있다면, 이를 변환하여 origin에서 destination 축으로 전달합니다. 이 전달된 최소값은 확정적 기본 또는 최대 크기로 제한됩니다.

• 그 다음, 확정적 최대 크기가 있다면, 이를 변환하여 origin에서 destination으로 전달합니다. 이 전달된 최대값은 확정적 기본 또는 최소 크기, 그리고 (있다면) 전달된 최소값 이상으로 제한됩니다.

참고: 따라서 확정적인 크기는 전달된 제약 조건에 의해 전혀 영향을 받지 않습니다. 그리고 전달된 최소값이 요소가 확정적인 기본/최대 크기를 초과하게 만들지 않으며, 전달된 최대값이 요소가 자신의 기본/최소 크기를 위반하게 만들지도 않습니다.

참고: 기본 원칙은 크기 제약 조건이 종횡비를 통해 다른 쪽으로 전달되어 명시적으로 지정된 크기를 침해하지 않는 한 종횡비를 최대한 보존한다는 것입니다. (이 원칙은 CSS2 10.4절의 constraint table 내용을 이끈 원리입니다.)

<div id=container style="height: 100px; float: left;">
  <div id=item style="height: 100%; aspect-ratio: 1/1;">content</div>
</div>

<div id=container style="height: auto; float: left;">
  <div id=item style="height: 100%; aspect-ratio: 1/1;">content</div>
</div>

이 섹션이 올바르게 작성되지 않았을 수 있습니다. <https://github.com/w3c/csswg-drafts/issues/6071>

5. 내재적 크기 결정

5.1. 내재적 크기

CSS Sizing 3 §5.1 Intrinsic Sizes

5.2. 포함된 내재적 크기 재정의: contain-intrinsic-* 속성

이 속성들은 size containment이 적용된 요소에 명시적 내재적 내부 크기를 지정할 수 있게 해줍니다. 박스는 in-flow 콘텐츠의 합이 지정된 명시적 내재적 내부 크기와 일치하는 너비와 높이를 가진 것처럼 크기가 결정됩니다(비어 있는 것처럼 크기를 지정하지 않음).

참고: 이는 항상 지정된 명시적 내재적 내부 크기만큼 크기를 가지는 자식이 있는 것처럼 레이아웃하는 것과 동일하지 않습니다. 예를 들어, 그리드 컨테이너에 지정된 크기의 자식이 한 개 있을 때, 그리드는 여전히 지정된 그리드에 따라 크기가 결정되어, 실제로는 지정된 크기보다 더 큰 콘텐츠 크기를 가지게 됩니다.

값 정의는 다음과 같습니다:

none

해당 축에는 명시적 내재적 내부 크기가 없습니다.

<length>

해당 축에는 지정한 명시적 내재적 내부 크기가 있습니다: <length>.

auto && <length>

해당 축에는 명시적 내재적 내부 크기로 마지막으로 기억된 크기를 사용합니다. 마지막으로 기억된 크기가 아직 없다면, 명시적으로 지정된 <length>를 사용합니다.

요소가 어떤 축에 명시적 내재적 내부 크기를 지정받았다면, size containment에 맞게 일반적으로 레이아웃한 후, 해당 축의 콘텐츠 크기는 레이아웃에서 계산된 값이 아니라 명시적 내재적 내부 크기로 간주되며, 필요하다면 레이아웃을 다시 수행합니다. (양 축 모두 명시적 내재적 내부 크기가 있다면, 첫 번째 레이아웃은 건너뛸 수 있습니다.)

이 네 가지 속성은 논리 속성 그룹의 일부입니다.

참고: size containment이 적용된 요소는 내용이 없는 것처럼 레이아웃됩니다 [CSS-CONTAIN-1], 이는 많은 경우 요소가 내부 높이 0으로 축소됨을 의미합니다. 기대하는 콘텐츠를 보이게 하려면 height를 명시적으로 지정해야 하는데, 이는 일부 레이아웃 시스템(Flex, Grid 등)에서 명시적 height가 암묵적인 콘텐츠 기반 높이보다 더 강한 명령으로 처리되기 때문에 의도와 다르게 레이아웃될 수 있습니다. 요소가 단순히 해당 높이만큼 콘텐츠로 채워진 것처럼 동작하지 않을 수 있습니다. 이때 요소에 명시적 내재적 내부 크기를 지정하면 레이아웃에서 내용을 무시함으로써 얻는 성능 이점을 유지하면서도 실제로 콘텐츠가 있는 것처럼 크기를 지정할 수 있습니다.

contain-intrinsic-size는 contain-intrinsic-width 및 contain-intrinsic-height 속성을 설정하는 축약형 속성입니다.

첫 번째 값은 contain-intrinsic-width 값을 나타내고, 두 번째 값은 contain-intrinsic-height 값을 나타냅니다. 값이 하나만 주어진 경우, 두 속성 모두에 적용됩니다.

5.2.1. 마지막으로 기억된 크기

Size containment은 페이지가 효율적으로 렌더링될 수 있도록 보장하고, 요소의 렌더링 변경으로 인해 발생할 수 있는 레이아웃 작업의 범위를 제한하는 데 매우 유용합니다. 하지만 이는 작성자에게 매우 제한적이기도 하여, 요소의 크기가 어떻게 될지 정확히 예측해야 합니다. 만약 이 예측이 조금이라도 틀리면, 보기 싫은 스크롤바가 생기거나 콘텐츠가 실수로 숨겨질 수 있습니다.

contain-intrinsic-size: auto 값은 절충안을 제공합니다: 요소가 한 번이라도 그렇지 않게 크기 격리된 경우, 이 값은 요소가 자신의 크기를 기억하게 합니다 (레이아웃에 의해 평소와 같이 계산됨). 그런 다음 요소가 나중에 크기 격리를 적용받게 되면, 기억된 크기를 사용하여, 아마도 콘텐츠에 맞게 정확하게 크기를 정하면서 크기 격리의 성능상 이점을 제공합니다.

5.2.2. overflow: auto와의 상호작용

contain-intrinsic-size 속성은 작성자가 요소의 콘텐츠 크기를 어느 정도 예측하는지 추정값을 제공합니다. 하지만 이 추정값은 실제 콘텐츠가 아니며, 사용자에게 보여줘야 할 무언가를 의미하지도 않습니다. 따라서 overflow: auto가 지정된 요소는 contain-intrinsic-size로 인해 스크롤바가 생성되어서는 안 됩니다.

하지만 contain-intrinsic-size가 실제로 해당 크기의 콘텐츠가 들어가면 스크롤바가 생길 만큼 큰 크기를 지정한다면, 요소는 그러한 가상 콘텐츠에 따라 스크롤바가 생기는 것처럼 크기가 정해져야 합니다.

div {
  width: max-content;
  contain-intrinsic-size: 100px 100px;
  overflow: auto;
}

div {
  width: max-content;
  contain-intrinsic-size: 100px 100px;
  height: 50px;
  overflow: auto;
}

5.3. 내재적 크기 기여

CSS Sizing 3 §5.2 Intrinsic Contributions

5.4. min-content 크기 기여 0으로 만들기: min-intrinsic-sizing 속성

이 속성 이름은 정말로 고민이 필요합니다.

이 속성은 min-content 기여가 비대체(non-replaced) 박스에서 특정 조건에서 “압축”되는지 여부를 정의합니다. 값의 의미는 다음과 같습니다:

legacy

박스의 min-content 기여는 평소처럼 처리됩니다.

zero-if-scroll

박스가 스크롤 컨테이너인 경우, min-content 기여가 “압축”됩니다.

zero-if-extrinsic

박스에 외재적 기본 또는 최대 크기가 있으면 min-content 기여가 “압축”됩니다.

참고: 이 동작은 대부분의 대체 요소의 기본 동작입니다.

*, ::before, ::after { min-intrinsic-size: zero-if-scroll; }

참고: zero-if-scroll이 기본값이었으면 더 좋았겠지만, 웹 호환성(Web-compat) 때문에 초기값으로 지정할 수 없습니다. :(

“압축된” 최소 콘텐츠 기여도는 상자가 비어 있다고 가정하여 계산합니다. 단, 크기 지정 속성의 명시적인 min-content, max-content 및 fit-content 값에 의해 부과되는 크기 제약을 고려하는 경우는 제외합니다.

6. 외재적 크기 결정

CSS Sizing 3 §4 Extrinsic Size Determination

6.1. Stretch-fit 크기 지정: 포함 블록 채우기

스트레치 맞춤 크기 결정은 상자의 사용 크기를 해당 외부 크기가 컨테이닝 블록을 가능한 한 가득 채우는 데 가까워지도록 필요한 길이로 설정하려고 하면서도 min-height/min-width/max-height/max-width에 의해 부과되는 제약을 준수합니다.

형식적으로 그 동작은 자동 크기와 함께 자기 정렬 속성 값으로 stretch를 (관련 축에서) 지정하는 것과 동일합니다. 단, 그 결과로 생성된 상자는 자신의 정렬 컨테이너에 정확히 맞지 않을 수도 있으며, 이후 실제 자기 정렬 속성 값에 따라 정렬될 수 있습니다.

또한, 관련 자기 정렬 속성이 적용되지 않는 서식 컨텍스트와 축에서 (예: 블록 레이아웃의 블록 축 또는 플렉스 레이아웃의 주축), 해당 축의 백분율 크기가 확정값으로 해석되는 경우, 스트레치 맞춤 크기는 상자가 자신의 컨테이닝 블록을 채우려고 하게 합니다—100%처럼 동작하지만 결과 크기를 box-sizing이 나타내는 상자 대신 해당 마진 박스에 적용합니다. 이를 위해 auto 마진은 0으로 처리되며, 또한 특히 블록 레벨 박스의 경우, 부모의 크기 결정 속성이 모두 자신의 초기값을 갖는다면 해당 블록 시작/블록 끝 마진이 부모의 블록 시작/블록 끝 마진에 인접하게 되는 경우, 해당 블록 시작/블록 끝 마진은 0으로 처리됩니다.

참고: 따라서 stretch 정렬도 적용되지 않고 백분율 크기 결정도 해석될 수 없는 경우, 상자는 자신의 자동 크기로 해석됩니다.

<div class="outer">
  <div class="inner"></div>
</div>

.outer { height: 200px; border: solid; }
.inner { height: stretch; margin: 10px; }

.outer { height: 200px; margin: 0; }
.inner { height: stretch; margin: 10px; }

<div class="outer">
  <div class="inner">text</div>
</div>
some more text

.outer { float: left; margin: 0; }
.inner { width: stretch; margin: 10px; }

.outer { height: auto; margin: 0; }
.inner { height: stretch; margin: 10px; }

6.2. Contain-fit 크기 지정: 종횡비 유지하며 늘리기

Contain-fit 크기 지정은 본질적으로 stretch-fit 크기 지정을 적용하지만, 한 축의 크기를 줄여 박스의 기본 종횡비를 유지합니다. 이는 contain 키워드가 object-fit 및 background-size에서 동작하는 것과 유사합니다.

먼저, 타깃 사각형을 결정합니다:

1. 처음 타깃 사각형은 박스의 포함 블록 크기가 되며, 불확정적인 크기는 무한대로 간주합니다. 두 차원 모두 불확정적이면, 처음 타깃 사각형은 박스를 stretch-fit 크기로 지정했을 때의 외곽선과 일치하게 설정됩니다.
2. 그 다음, 박스에 none이 아닌 max-width 또는 max-height가 있다면, 타깃 사각형의 해당 차원을 박스 마진 박스의 "최대 크기" 이하로 제한합니다. 즉, 박스가 max-width/height로 지정되었을 때의 마진 박스 크기입니다. (일반적인 box-sizing 규칙과 일관되게, 이 "최대 크기"는 박스의 min-width/min-height의 효과로 바닥(floor) 처리됨에 유의.)
3. 마지막으로, 타깃 사각형은 박스의 기본 종횡비를 맞추기 위해 한 차원에서 최소한으로 줄어듭니다.

각 차원에서의 contain-fit 크기는 타깃 사각형에 stretch-fit 시켰을 때의 크기와 동일합니다.

margin 병합과 관련해서는 stretch-fit이 하는 대로 복사해야 함.

한 차원에서의 최소 크기가 종횡비를 유지하면 타깃 사각형을 넘치게 될 경우, 종횡비를 지킬지, 이미지를 왜곡할지 정의 필요. 전자라면 #2와 유사하게 최소값을 적용하는 단계 필요.

6.3. 백분율 크기 지정

…

변경 사항

최근 변경 사항

2020년 10월 20일 Working Draft 이후 주요 변경점:

• min-intrinsic-sizing 속성을 초안화하여, 스크롤 컨테이너의 min-content 기여를 더 잘 제어할 수 있게 함. (이슈 1865, 이슈 4585)

• contain-intrinsic-size에 각 축을 독립적으로 제어할 수 있도록 롱핸드 추가. (이슈 5432)

• auto 값을 contain-intrinsic-size에 초안화하여, 이전에 계산된 크기를 "기억"할 수 있도록 함. (이슈 5668, 이슈 5815)

• aspect-ratio에서 비정상적(degenerate) 비율 처리 정의. (이슈 5557)

• aspect-ratio가 대체 요소의 자연 크기에 미치는 영향 정의. (이슈 5306)

• § 4.4 최소/최대 크기 전달 섹션의 오류 수정, CSS2 / CSS Flex Layout 등에서 정의된 동작과 충돌하지 않게 조정. (이슈 6071)

2020년 5월 26일 First Public Working Draft 이후 주요 변경점:

• 비율 결정 축을 용어로 정의했습니다.

• 최소/최대 크기 제약이 종횡비를 통해 전달된다고 정의했습니다. (이슈 5257)

  또한 어느 한 축 (origin 축)의 크기 제약은 선호 종횡비를 통해 다른 축( destination 축)으로 다음과 같이 전달됩니다:

  • 먼저 모든 확정적인 최소 크기를 변환하여 origin 축에서 destination 축으로 전달합니다. 이렇게 전달된 최소값은 destination 축의 모든 확정적인 선호 크기 또는 최대 크기로 상한이 제한됩니다.

  • 그런 다음 모든 확정적인 최대 크기를 변환하여 origin 축에서 destination 축으로 전달합니다. 이렇게 전달된 최대값은 destination 축의 모든 확정적인 선호 크기 또는 최소 크기뿐만 아니라, 전달된 최소값이 있는 경우 그 값으로도 하한이 제한됩니다.

  참고: 기본 원칙은 크기 제약이 종횡비를 통해 반대쪽 축으로 전달되어, 영향을 받는 해당 축에 명시적으로 지정된 크기를 위반하지 않는 범위에서 가능한 한 종횡비를 유지하도록 하는 것입니다.

• 하나의 고유 크기만 있는 대체 요소의 aspect-ratio가 다른 치수를 결정한다는 점을 명확히 했습니다. (이슈 5306)

  대체 요소의 유일한 고유 치수가 고유 너비 또는 고유 높이인 경우, 해당 요소에 선호 종횡비를 지정하면 누락된 쪽에 따라 고유 높이 또는 고유 너비도 부여되며, 기존 크기를 선호 종횡비를 통해 전달하여 결정합니다.

• aspect-ratio가 마진의 자체 겹침을 억제한다고 정의했습니다. (이슈 5328)

  마진 겹침(CSS 2 §8.3.1 마진 겹침)의 목적상, 블록 축이 비율 종속 축인 경우, 해당 축은 계산된 block-size가 auto인 것으로 간주되지 않습니다.

Level 3 이후 추가 사항

• stretch, fit-content, contain 키워드가 sizing 속성에 추가됨.
• aspect-ratio 속성 추가.
• contain-intrinsic-size 속성 추가.

감사의 글

이 모듈에 기여해주신 Aaron Gustafson, L. David Baron께 특별히 감사드립니다.

개인정보 및 보안 고려사항

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