CSS 박스 크기 조정 모듈 레벨 4

1. 소개

이것은 CSS Sizing 레벨 3에 대한 차이 명세입니다. 현재 탐색적 작업 초안입니다: 무언가를 구현하고 있다면 레벨 3을 참조해 주세요. 이 초안이 CR에 도달하면 레벨 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. 크기 조정 속성

CSS Sizing 3 § 3.1 크기 조정 속성

size 속성은 단축 속성으로, width와 height를 하나의 선언으로 설정합니다. 두 번째 값을 생략하면 첫 번째 값이 복사됩니다.

size 단축 속성은 @page 컨텍스트에서 사용할 수 없습니다. @page에는 이미 페이지 크기를 설정하기 위한 별개의 size 디스크립터가 있기 때문입니다.

size 속성은 CSSOM의 선호 단축 속성 순서에서 제외되어야 합니다. 이는 호환성 문제 및 @page와의 충돌을 방지하기 위한 것입니다.

min-size 속성은 단축 속성으로, min-width와 min-height를 하나의 선언으로 설정합니다. 두 번째 값을 생략하면 첫 번째 값이 복사됩니다.

max-size 속성은 단축 속성으로, max-width와 max-height를 하나의 선언으로 설정합니다. 두 번째 값을 생략하면 첫 번째 값이 복사됩니다.

3.2. 새로운 크기 조정 값: contain, fit-content() 및 calc-size() 값

CSS Sizing 3 § 3.2 크기 조정 값: <length-percentage>, auto | none, min-content, max-content 및 fit-content() 값

레벨 4에서는 contain, fit-content() 및 calc-size() 값을 크기 조정 속성에서 사용할 수 있는 기능이 추가되며, 이에 따라 <box-size> 생성식이 다음과 같이 확장됩니다:

<box-size> = <length-percentage> | stretch | contain | min-content | max-content | fit-content | fit-content() | calc-size()

fit-content(<length-percentage [0,∞]>)

지정된 인수로 사용 가능한 공간을 대체하여 fit-content 공식을 사용합니다. 즉, min(max-content, max(min-content, <length-percentage>))이며, 여기서 <length-percentage> 인수는 단독으로 사용되는 <length-percentage> 값과 정확히 같은 방식으로 해석됩니다.

음수 <length-percentage> 값은 유효하지 않습니다.

테스트

• auto-scrollbar-inside-stf-abspos.html (실시간 테스트) (소스)
• block-fit-content-as-initial.html (실시간 테스트) (소스)
• fit-content-length-percentage-001.html (실시간 테스트) (소스)
• fit-content-length-percentage-002.html (실시간 테스트) (소스)
• fit-content-length-percentage-003.html (실시간 테스트) (소스)
• fit-content-length-percentage-004.html (실시간 테스트) (소스)
• fit-content-length-percentage-005.html (실시간 테스트) (소스)
• fit-content-length-percentage-006.html (실시간 테스트) (소스)
• fit-content-length-percentage-007.html (실시간 테스트) (소스)
• fit-content-length-percentage-008.html (실시간 테스트) (소스)
• fit-content-length-percentage-009.html (실시간 테스트) (소스)
• fit-content-length-percentage-010.html (실시간 테스트) (소스)
• fit-content-length-percentage-011.html (실시간 테스트) (소스)
• fit-content-length-percentage-012.html (실시간 테스트) (소스)
• fit-content-length-percentage-013.html (실시간 테스트) (소스)
• fit-content-length-percentage-014.html (실시간 테스트) (소스)
• fit-content-length-percentage-015.html (실시간 테스트) (소스)
• fit-content-length-percentage-016.html (실시간 테스트) (소스)

contain

박스에 선호 종횡비가 있는 경우, contain-fit 크기 조정을 적용하여, 가능한 한 선호 종횡비를 유지하면서 박스의 제약 조건에 맞추려고 합니다. § 6.1 Contain-fit 크기 조정: 종횡비를 유지하면서 늘이기를 참조하세요.

박스에 선호 종횡비가 없는 경우, stretch-fit 크기 조정을 적용합니다.

calc-size()

CSS Values 5 § 10. 내재적 크기로 계산하기: calc-size() 함수를 참조하세요.

참고: none 키워드는 calc-size() 내에서 사용할 수 없습니다.

참고: 이러한 새로운 값은 <calc-size()>의 정의가 “컨텍스트에서 허용되는” 값이라고 지칭하는 값 집합에 추가됩니다.

4. 종횡비

이미지는 흔히 고유 종횡비를 가지며, CSS 레이아웃 알고리즘은 요소의 크기를 조정할 때 이 비율을 유지하려고 합니다.

aspect-ratio 속성을 사용하면 비대체 요소에 대해 이 동작을 지정하고, 대체 요소의 유효 종횡비를 변경할 수 있습니다.

이 절의 세부 사항은 아직 작업 중입니다. 여기에서 지정된 동작 중 대체 요소가 선호 종횡비를 가질 때 CSS2, Flex Layout 및 Grid Layout 명세의 요구 사항을 결합했을 때(이 명세가 적용되지 않는 경우)와 다르게 동작하게 하는 내용이 있다면, 이는 오류이며 CSSWG에 보고해야 합니다. 열려 있는 aspect-ratio 이슈 목록이 있습니다.

4.1. 선호 종횡비: aspect-ratio 속성

이 속성은 박스에 선호 종횡비를 설정하며, 이는 auto 크기와 일부 다른 레이아웃 함수의 계산에 사용됩니다.

auto

대체 요소에 고유 종횡비가 있으면 해당 종횡비를 사용합니다. 그렇지 않으면 박스에는 선호 종횡비가 없습니다. 종횡비가 관련된 크기 계산은 항상 콘텐츠 박스의 치수를 사용합니다.

<ratio>

박스의 선호 종횡비는 지정된 width / height 비율입니다. 종횡비가 관련된 크기 계산은 box-sizing으로 지정된 박스의 치수를 사용합니다.

<ratio>가 퇴화된 경우, 이 속성은 대신 auto처럼 동작합니다.

auto && <ratio>

auto와 <ratio>가 함께 지정되면, 선호 종횡비는 지정된 width / height 비율입니다. 다만 대체 요소이고 고유 종횡비가 있는 경우에는 해당 종횡비가 대신 사용됩니다. 모든 경우에 종횡비가 관련된 크기 계산은 항상 콘텐츠 박스의 치수를 사용합니다.

<ratio>가 퇴화된 경우, 이 속성은 대신 auto처럼 동작합니다.

테스트

• block-aspect-ratio-050.html (실시간 테스트) (소스)

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

CSS2.1은 대체 요소와 종횡비를 가진 요소를 명확하게 구분하지 않습니다. 불명확한 구체적인 사례를 찾아 정의해야 하며, 적절한 레벨 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에 억지로 끼워 넣지 않게 되면, 여기서의 핵심 원칙은 단순합니다: 비율 결정 축에서 해석된 선호 크기가 (최소/최대값을 적용하기 전에) 비율을 통해 전달됩니다. 최소/최대 제약 조건은 그 이후에 전달되며, 종횡비와 관계없이 각 축에 독립적으로 적용됩니다.

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 축으로 변환되어 전달됩니다. 이렇게 전달된 최소값은 destination 축의 모든 확정 선호 또는 최대 크기를 상한으로 합니다.

• 그다음, 모든 확정 최대 크기는 origin에서 destination으로 변환되어 전달됩니다. 이렇게 전달된 최대값은 destination 축의 모든 확정 선호 또는 최소 크기, 그리고 존재하는 경우 전달된 최소값을 하한으로 합니다.

참고: 따라서 확정 크기는 전달된 제약 조건의 영향을 전혀 받지 않습니다. 또한 전달된 최소값으로 인해 요소가 확정 선호/최대 크기를 초과하는 일은 없으며, 전달된 최대값으로 인해 요소가 선호/최소 크기를 위반하는 일도 없습니다.

참고: 기본 원칙은 크기 조정 제약 조건이 종횡비를 통해 반대쪽으로 전달되어, 영향을 받는 축에 명시적으로 지정된 크기를 위반하지 않는 범위에서 가능한 한 종횡비를 유지하는 것입니다. (이 원칙은 CSS2 제10.4절의 제약 조건 표 내용을 결정한 원칙입니다.)

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

이 절은 올바르게 작성되지 않았을 수 있습니다. [이슈 #6071]

5. 내재적 크기 결정

5.1. 내재적 크기

CSS Sizing 3 § 5.1 내재적 크기

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

이러한 속성을 사용하면 크기 격리가 있는 요소가 명시적 내재적 내부 크기를 지정할 수 있으며, 박스가 흐름 내 콘텐츠의 총 너비와 높이가 지정된 명시적 내재적 내부 크기와 일치하는 것처럼 크기가 정해지게 합니다. (비어 있는 것처럼 크기를 정하는 대신입니다.)

참고: 이것이 항상 요소에 지정된 명시적 내재적 내부 크기를 가진 자식 하나가 있는 것처럼 레이아웃하는 것과 같지는 않습니다. 예를 들어 지정된 크기의 자식 하나를 가진 그리드 컨테이너는 여전히 지정된 그리드에 따라 크기가 정해지므로, 일반적으로 지정된 것보다 더 큰 콘텐츠 크기가 됩니다.

none | <length>

다른 contain-intrinsic-size 값 (예: auto)이 명시적 내재적 내부 크기를 제공하지 않는 경우, 해당 축에는 명시적 내재적 내부 크기가 없거나 (none이 지정된 경우), 지정된 <length>의 명시적 내재적 내부 크기를 갖습니다.

auto

auto가 지정되고 요소에 마지막으로 기억된 크기가 있으며 현재 콘텐츠를 건너뛰고 있는 경우, 해당 축의 명시적 내재적 내부 크기는 그 축의 마지막으로 기억된 크기입니다.

참고: 예를 들어 content-visibility: auto가 지정된 요소가 화면 밖에 있을 때 이러한 일이 발생합니다.

테스트

• content-visibility-058.html (실시간 테스트) (소스)

요소가 한 축에 명시적 내재적 내부 크기를 가진 경우, 크기 격리에 대해 평소와 같이 요소를 레이아웃한 후, 해당 축의 콘텐츠 크기는 레이아웃에서 계산된 값 대신 명시적 내재적 내부 크기인 것으로 처리되며, 필요한 경우 레이아웃을 다시 수행합니다. (두 축 모두에 명시적 내재적 내부 크기가 있는 경우, 첫 번째 레이아웃을 건너뛸 수 있음을 의미합니다.)

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

참고: 크기 격리가 있는 요소는 콘텐츠가 없는 것처럼 레이아웃됩니다 [CSS-CONTAIN-1]. 이 때문에 많은 경우 요소의 내부 높이가 0으로 축소됩니다. 예상되는 콘텐츠를 표시할 수 있도록 명시적인 height를 선택하여 이를 수정할 수 있지만, Flex 및 Grid Layout과 같은 일부 레이아웃 시스템에서는 의도하지 않은 영향을 줄 수 있습니다. 이러한 시스템은 명시적인 height를 암시적인 콘텐츠 기반 높이보다 더 강한 명령으로 취급합니다. 따라서 요소는 단순히 해당 높이까지 콘텐츠가 채워진 경우와 비교해 상당히 다르게 레이아웃될 수 있습니다. 요소에 명시적 내재적 내부 크기를 제공하면, 레이아웃에서 콘텐츠를 무시함으로써 얻는 성능상의 이점을 유지하면서도 콘텐츠가 있는 것처럼 크기를 정할 수 있습니다.

contain-intrinsic-size는 contain-intrinsic-width와 contain-intrinsic-height 속성을 설정하는 단축 속성입니다.

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

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

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

contain-intrinsic-size의 auto 키워드는 중간적인 선택지를 제공합니다: 요소가 어느 시점에든 크기 격리되지 않은 상태라면, 이 값은 요소가 자신의 크기를 기억하게 합니다 (레이아웃에서 평소와 같이 계산됨). 이후 요소에 크기 격리가 적용되면, 기억된 크기를 사용하여 크기 격리의 성능상 이점을 제공하면서 대체로 콘텐츠에 정확히 맞는 크기를 사용할 수 있습니다.

ResizeObserver 대상이 될 수 있는 요소만 마지막으로 기억된 크기를 가질 수 있습니다.

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. 반응형으로 크기가 조정되는 iframe: frame-sizing 속성

일부 대체 요소는 HTML iframe과 같이 "일반적인" 흐름 콘텐츠를 포함할 수 있습니다. 개인정보 보호 및 보안상의 이유로 이러한 요소는 기본적으로 내부 콘텐츠의 크기 조정에 관한 정보를 외부 페이지에 노출하지 않고, 대신 정적이고 미리 정해진 내재적 크기를 사용하며 콘텐츠를 스크롤할 수 있도록 합니다. frame-sizing 속성을 사용하면 이러한 요소가 실제 콘텐츠 크기를 노출하도록 선택할 수 있으며, 이를 해당 요소의 내부 레이아웃 내재적 크기라고 합니다. 값의 의미는 다음과 같습니다:

auto

요소의 내부 레이아웃 내재적 크기가 있더라도 무시합니다.

content-width

content-height

content-block-size

content-inline-size

요소에 내부 레이아웃 내재적 크기가 있으면, 해당 요소의 내재적 크기는 대응하는 치수 (너비 또는 높이)를 내부 레이아웃 내재적 크기에서 가져옵니다. (다른 치수는 일반적인 방식으로 결정됩니다.)

논리적 방향은 요소의 쓰기 모드를 기준으로 해석됩니다. (임베드된 문서가 아닙니다.)

어떤 요소가 내부 레이아웃 내재적 크기를 가질 수 있는지와 그것을 어떻게 결정하는지는 문서 언어가 결정합니다. HTML에서는 iframe 요소만 내부 레이아웃 내재적 크기를 가질 수 있으며, 또한 포함된 문서도 <meta name=responsive-embedded-sizing> 요소를 통해 이 기능을 사용하도록 선택한 경우에만 가능합니다. (§ 5.3.1 HTML iframe 세부사항을 참조하세요.)

<meta name="responsive-embedded-sizing">
<div style="height: 500px"></div>

iframe {
  frame-sizing: content-height;
}

또한 내부 문서는 window.requestResize()를 호출하여 나중에 자신의 내부 레이아웃 내재적 크기를 업데이트할 수 있습니다.

5.3.1. HTML iframe 세부사항

HTML에서는 iframe 요소만 내부 레이아웃 내재적 크기를 가질 수 있으며, iframe의 임베드된 문서가 적절하게 이 기능을 사용하도록 선택한 경우에만 가능합니다.

HTML Document 객체에는 반응형 임베디드 크기 조정 플래그가 연결되어 있으며, 처음에는 설정되지 않은 상태입니다. 이 플래그는 초기 문서 파싱 중 다음 항목 중 먼저 발생하는 것에 따라 true 또는 false로 설정됩니다:

• <meta name=responsive-embedded-sizing> 요소를 만나면 true로 설정합니다.

• body 요소가 열리거나(명시적 또는 암시적으로), 파서에 의해 문서에 삽입되면 false로 설정합니다.

한 번 true 또는 false로 설정되면, 이 플래그는 해당 Document의 수명 동안 다시 값을 변경하지 않습니다.

참고: 현재 HTML에서는 HTML 문서의 head에 나타나는 meta 요소가 임베드된 문서에서 이 기능을 사용하도록 선택할 수 있는 유일한 방법입니다. 이는 iframe 안의 SVG 문서는 이 기능을 사용할 수 없음을 의미합니다.

참고: HTML 파서의 특성 때문에 meta 요소는 기술적으로 head 요소와 body 요소 사이에 나타날 수 있으며, 이후 head로 부모가 변경됩니다. 이 위치는 body가 아직 열리지 않았으므로 <meta name=responsive-embedded-sizing> 요소에 여전히 유효한 위치입니다. 대부분의 HTML 요소는 body 시작 태그가 없더라도 암시적으로 body 요소를 연다는 점에 유의하세요. 또한 문서에 해당 요소가 전혀 없으면, 빈 요소가 자동으로 생성되어 삽입됩니다.

내부 레이아웃 내재적 크기는 임베드된 문서가 DOMContentLoaded 이벤트를 발생시킨 후 수행되는 첫 번째 레이아웃의 결과로 처음 설정되고, load 이벤트가 Window에서 발생할 때 다시 설정됩니다. 이후 임베드된 문서의 콘텐츠, 스타일 또는 레이아웃 변경은 내부 레이아웃 내재적 크기에 자동으로 영향을 주지 않지만, requestResize()를 참조하세요.

임베드된 문서는 추가로 고정된 임베디드 ICB 크기를 가질 수 있으며, 처음에는 null입니다. 문서가 레이아웃을 수행할 때 문서의 반응형 임베디드 크기 조정 플래그가 true이고 해당 문서의 고정된 임베디드 ICB 크기가 null이면, 현재 초기 컨테이닝 블록 크기를 고정된 임베디드 ICB 크기로 기록합니다. 이후 레이아웃에서는 초기 컨테이닝 블록 크기를 일반적으로 계산하는 대신 고정된 임베디드 ICB 크기를 사용합니다.

참고: ICB를 이렇게 고정하면 레이아웃 루프가 발생할 가능성을 줄일 수 있습니다. (iframe 문서의 크기가 ICB보다 약간 더 커지고, 그에 맞춰 상위 iframe의 크기가 변경된 다음, 다음 레이아웃에서 다시 ICB보다 약간 더 커지고, 이런 과정이 무한히 반복되는 경우 등입니다.)

iframe이 자신의 고정된 임베디드 ICB 크기를 강제로 잊게 하는 방법이 필요할까요? 아마 frame-sizing을 껐다가 다시 켜는 방식일까요?

iframe의 문서를 탐색하면 해당 문서는 자신의 고정된 임베디드 ICB 크기를 잊습니다. 새 문서의 반응형 임베디드 크기 조정 플래그가 설정되지 않은 동안에는 내부 레이아웃 내재적 크기를 잊지 않습니다. 플래그가 설정되면(true 또는 false), 내부 레이아웃 내재적 크기를 잊으며, 플래그가 true로 설정된 경우 두 값 모두 일반적인 방식으로 새로 계산됩니다.

5.3.2. Window 인터페이스 확장

partial interface Window {
  undefined requestResize();
};

5.4. 내재적 크기 기여

CSS 크기 조정 3 § 5.2 내재적 기여

5.5. 최소 콘텐츠 크기 기여를 0으로 만들기: min-intrinsic-sizing 속성

이 속성은 이름을 진지하게 다시 논의할 필요가 있습니다.

이 속성은 비대체 박스의 최소 콘텐츠 기여가 특정 상황에서 “압축”되는지 여부를 정의합니다. 값의 의미는 다음과 같습니다:

legacy

박스의 최소 콘텐츠 기여를 일반적인 방식으로 처리합니다.

zero-if-scroll

박스가 해당 축에서 스크롤 컨테이너인 경우, 박스의 최소 콘텐츠 기여가 “압축”됩니다.

zero-if-extrinsic

박스에 외재적 선호 크기 또는 최대 크기가 있으면, 박스의 최소 콘텐츠 기여가 “압축”됩니다.

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

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

참고: zero-if-scroll의 동작이 더 나은 기본값이었겠지만, Web 호환성 때문에 초깃값으로 사용할 수 없습니다. :(

“압축된” 최소 콘텐츠 기여는 박스가 비어 있다고 가정하여 계산합니다. 단, 크기 조정 속성의 명시적 min-content, max-content 및 fit-content 값이 부과하는 크기 조정 제약을 고려할 때는 예외입니다.

5.6. 새로운 열 크기 조정 값: stretch, min-content, max-content, fit-content 및 fit-content() 값

column-width의 값으로 사용되는 경우, 새로운 키워드는 최적의 열 너비를 지정합니다:

stretch

다단 컨테이너의 stretch-fit 인라인 크기를 최적의 열 너비로 지정합니다.

min-content

다단 컨테이너 콘텐츠의 최소 콘텐츠 인라인 크기를 최적의 열 너비로 지정합니다.

max-content

다단 컨테이너 콘텐츠의 최대 콘텐츠 인라인 크기를 최적의 열 너비로 지정합니다.

fit-content

최적의 열 너비를 min(최대 콘텐츠 인라인 크기, max(최소 콘텐츠 인라인 크기, stretch-fit 인라인 크기))로 지정합니다.

fit-content(<length-percentage>)

최적의 열 너비를 min(최대 콘텐츠 크기, max(최소 콘텐츠 크기, <length-percentage>))로 지정합니다.

참고: 열 너비는 열마다 달라지지 않습니다. 열 너비가 다단 컨테이너의 콘텐츠에 의해 결정되는 경우 (위의 키워드와 같은 경우), 모든 콘텐츠가 고려되며 계산된 너비가 모든 열에 공통으로 적용됩니다.

6. 외재적 크기 결정

CSS 크기 조정 3 § 4 외재적 크기 결정

6.1. Contain-fit 크기 조정: 종횡비를 유지하면서 늘이기

Contain-fit 크기 조정은 본질적으로 stretch-fit 크기 조정을 적용하지만, 박스의 한 축 크기를 줄여 박스의 선호 종횡비를 유지합니다. 이는 object-fit 및 background-size 속성의 contain 키워드와 유사합니다.

먼저 대상 사각형을 결정합니다:

1. 초기 대상 사각형은 박스의 컨테이닝 블록 크기이며, 정해지지 않은 크기는 무한대로 가정합니다. 두 치수 모두 정해지지 않은 경우, 초기 대상 사각형은 박스가 stretch-fit 크기 조정되었을 때의 박스 바깥쪽 가장자리와 일치하도록 설정합니다.
2. 다음으로, 박스에 none이 아닌 max-width 또는 max-height가 있으면, 대상 사각형의 해당 치수를 박스 마진 박스의 “최대 크기” 이하로 제한합니다. 즉, 박스가 max-width/height 크기로 조정되었을 때 마진 박스가 갖게 되는 크기입니다. (일반적인 박스 크기 조정 규칙과 일관되게, 이 “최대 크기”에는 박스의 min-width/min-height 효과에 따른 하한이 적용된다는 점에 유의하세요.)
3. 마지막으로 대상 사각형의 한 치수를 박스의 선호 종횡비와 일치시키는 데 필요한 최소한의 양만큼 줄입니다.

각 치수의 contain-fit 크기는 대상 사각형에 stretch-fit을 적용했을 때 얻어지는 크기입니다.

마진 상쇄와 관련하여 stretch-fit이 최종적으로 수행하는 동작을 그대로 복사하세요.

한 치수에 최소 크기가 있고, 종횡비를 유지할 경우 대상 사각형을 오버플로하게 된다면, 종횡비를 유지해야 할까요, 아니면 이미지를 왜곡해야 할까요? 전자라면 관련 최소값을 적용하는 #2와 유사한 단계가 필요합니다.

6.2. 백분율 크기 조정

…

변경 사항

2021년 5월 5일 작업 초안 이후 변경 사항

2021년 5월 5일 작업 초안 이후의 주요 변경 사항은 다음과 같습니다:

• size, min-size 및 max-size 단축 속성을 추가했습니다. (이슈 820)

• calc-size()를 크기 조정 속성에 추가했습니다. (이슈 6265)

• frame-sizing 속성 정의를 추가했습니다. (1771)

• 레벨 3에서 fit-content()를 가져오고, fit-content 및 stretch를 다시 레벨 3으로 내렸습니다. (이슈 10601)

• 크기 조정 값을 통합하기 위해 <box-size> 문법 생성식을 도입했습니다. (이슈 13478)

• contain-intrinsic-size의 값 순서를 바꾸는 것을 허용하지 않도록 했습니다. (이슈 6391).

• 유령 크기를 방지하기 위해 요소가 자신의 콘텐츠를 건너뛰는 경우에만 contain-intrinsic-* 속성의 auto 값에 대해 마지막으로 기억된 크기를 사용하도록 했습니다. (이슈 6308).

• 어떤 요소가 언제 마지막으로 기억된 크기를 갖는지 명확히 했습니다. (이슈 6220)

• contain-intrinsic-size 속성을 위한 논리 속성 그룹을 추가했습니다. (이슈 2822).

• 더 유연한 값 조합을 허용하도록 contain-intrinsic-size의 문법을 변경했습니다. (이슈 8407).

• contain-intrinsic-* 속성에서 음수 길이를 허용하지 않도록 했습니다. (이슈 11945).

• 'contain-intrinsic-size/from-element' 값을 통해 반응형으로 크기가 조정되는 iframe을 추가했습니다. (이슈 1771).

• Flexbox의 stretch-fit 크기 조정 동작이 stretch와 약간 다르다는 점을 명확히 했습니다. (이슈 11784).

• Web Platform Tests 적용 범위를 추가했습니다.

• 그 밖의 여러 사소한 편집 수정 및 개선을 수행했습니다.

2020년 10월 20일 작업 초안 이후 변경 사항

2020년 10월 20일 작업 초안 이후의 주요 변경 사항은 다음과 같습니다:

• 스크롤 컨테이너의 최소 콘텐츠 기여를 더 잘 제어할 수 있도록 min-intrinsic-sizing 속성을 초안으로 작성했습니다. (이슈 1865, 이슈 4585)

• 각 축을 독립적으로 제어할 수 있도록 contain-intrinsic-size에 개별 속성을 추가했습니다. (이슈 5432)

• 이전에 계산된 크기를 “기억”할 수 있도록 contain-intrinsic-size의 auto 값을 초안으로 작성했습니다. (이슈 5668, 이슈 5815)

• aspect-ratio에서 퇴화 비율의 처리 방식을 정의했습니다. (이슈 5557)

• aspect-ratio가 대체 요소의 자연 크기에 어떤 영향을 미치는지 정의했습니다. (이슈 5306)

• § 4.4 최소/최대 크기 전달 절의 일부 오류를 수정하고, CSS2 / CSS Flex Layout / 기타 명세에서 정의된 동작과 충돌하지 않도록 동작을 맞췄습니다. (이슈 6071)

• contain-intrinsic-size: auto none 문법을 추가했습니다.

2020년 5월 26일 최초 공개 작업 초안 이후의 주요 변경 사항은 다음과 같습니다:

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

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

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

  • 먼저 모든 확정된 최소 크기는 origin 축에서 destination 축으로 변환되어 전달됩니다. 전달된 최소값의 상한은 destination 축의 모든 확정된 선호 크기 또는 최대 크기입니다.

  • 그다음 모든 확정된 최대 크기는 origin에서 destination으로 변환되어 전달됩니다. 전달된 최대값의 하한은 destination 축의 모든 확정된 선호 크기 또는 최소 크기와, 전달된 최소값이 있는 경우 그 최소값입니다.

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

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

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

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

  마진 상쇄를 위해(CSS 2 § 8.3.1 마진 상쇄), 블록 축이 비율 종속 축이면, 해당 축은 auto의 계산된 block-size를 갖는 것으로 간주하지 않습니다.

레벨 3 이후 추가 사항

• 크기 조정 속성을 위한 fit-content() 함수와 contain 키워드를 추가했습니다.
• aspect-ratio 속성을 추가했습니다.
• contain-intrinsic-width, contain-intrinsic-height, contain-intrinsic-block-size 및 contain-intrinsic-inline-size 속성과 이들의 단축 속성인 contain-intrinsic-size를 추가했습니다.
• min-intrinsic-sizing 속성을 추가했습니다.
• frame-sizing 속성을 추가했습니다.

감사의 말

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

개인정보 보호 고려사항

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

보안 고려사항

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