CSS 박스 사이징 모듈 레벨 4

W3C 워킹 드래프트,

이 버전:
https://www.w3.org/TR/2021/WD-css-sizing-4-20210520/
최신 공개 버전:
https://www.w3.org/TR/css-sizing-4/
에디터스 드래프트:
https://drafts.csswg.org/css-sizing-4/
이전 버전:
이슈 추적:
CSSWG 이슈 리포지터리
CSSWG 깃허브
명세 내 인라인
에디터:
Tab Atkins (Google)
Elika J. Etemad / fantasai (초청 전문가)
Jen Simmons (Apple)
이 명세에 대한 수정 제안:
GitHub 에디터

요약

이 모듈은 CSS 크기 지정 속성에 콘텐츠 기반 "내재적(intrinsic)" 크기와 컨텍스트 기반 "외재적(extrinsic)" 크기를 나타내는 키워드를 확장하여, CSS가 콘텐츠에 맞게 박스를 지정하거나 특정 레이아웃 컨텍스트에 맞게 박스를 지정하는 것을 더 쉽게 설명할 수 있도록 합니다. 이 명세는 CSS Sizing Level 3에 대한 변화(델타) 명세입니다.

CSS는 구조화된 문서(예: HTML 및 XML)의 화면, 인쇄물 등에서의 렌더링을 설명하기 위한 언어입니다.

이 문서의 상태

이 섹션은 이 문서가 발행된 시점의 상태를 설명합니다. 다른 문서가 이 문서를 대체할 수 있습니다. 현재 W3C 발행 목록과 이 기술 보고서의 최신 개정판은 W3C 기술 보고서 인덱스 https://www.w3.org/TR/에서 확인할 수 있습니다.

이 문서는 CSS 작업 그룹에 의해 워킹 드래프트로 발행되었습니다. 워킹 드래프트로 발행되었다고 해서 W3C 회원의 승인(endorsement)을 의미하지는 않습니다.

이 문서는 초안(draft) 문서이며 언제든지 다른 문서에 의해 업데이트, 대체 또는 폐기될 수 있습니다. 이 문서를 진행 중인 작업 외의 용도로 인용하는 것은 적절하지 않습니다.

피드백은 GitHub에 이슈 등록(권장)으로 보내주시고, 제목에 명세 코드 “css-sizing”을 포함해 주세요. 예시: “[css-sizing] …의견 요약…”. 모든 이슈와 의견은 아카이브됩니다. 또는 (아카이브됨) 공개 메일링 리스트 www-style@w3.org로 피드백을 보낼 수도 있습니다.

이 문서는 2020년 9월 15일 W3C 프로세스 문서의 적용을 받습니다.

이 문서는 W3C 특허 정책에 따라 운영되는 그룹에 의해 작성되었습니다. W3C는 그룹 산출물과 관련하여 제출된 공개 특허 목록을 유지하며, 해당 페이지에는 특허 공개 방법도 안내되어 있습니다. 어떤 개인이 필수적 권리(essential claim)를 포함한다고 믿는 특허에 대해 실제로 인지하고 있다면 W3C 특허 정책 6절에 따라 정보를 공개해야 합니다.

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 키워드

이름: width, height, inline-size, block-size, min-width, min-height, min-inline-size, min-block-size, max-width, max-height, max-inline-size, max-block-size
새로운 값: stretch | fit-content | contain
stretch
stretch-fit 크기 지정을 적용하여, 박스의 마진 박스 크기를 포함 블록의 크기와 맞추려 시도합니다. § 6.1 Stretch-fit 크기 지정: 포함 블록 채우기를 참고하세요.
fit-content
본질적으로 fit-content(stretch), 즉 min(max-content, max(min-content, stretch))와 동일합니다.
contain
박스에 기본 종횡비가 있을 경우, contain-fit 크기 지정이 적용되며, 종횡비를 최대한 유지하면서 박스의 제약에 맞게 맞추려 시도합니다. § 6.2 Contain-fit 크기 지정: 종횡비를 유지하며 늘리기를 참고하세요.

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

4. 종횡비

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

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

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

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

이름: aspect-ratio
값: auto || <ratio>
초기값: auto
적용 대상: 모든 요소(단, 인라인 박스 및 내부 ruby, table 박스 제외)
상속: 아니오
백분율: 해당 없음
계산값: 지정된 키워드 또는 숫자 쌍
표준 순서: 문법 순서
애니메이션 타입: 계산값 기준

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

auto
대체 요소자연 종횡비를 가지고 있다면 해당 종횡비를 사용하며; 그렇지 않으면 박스에는 기본 종횡비가 없습니다. 종횡비가 포함된 크기 계산은 항상 콘텐츠 박스의 크기로 처리됩니다.
<ratio>
박스의 기본 종횡비는 지정된 width / height 비율입니다. 종횡비가 포함된 크기 계산은 box-sizing이 지정한 박스의 크기를 사용합니다.

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

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

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

참고: 기본 종횡비가 있다고 해서 박스가 대체 요소가 되는 것은 아닙니다. 대체 요소에만 적용되는 레이아웃 규칙은 비대체(non-replaced) 박스의 기본 종횡비에는 일반적으로 적용되지 않습니다. 예를 들어, 비대체 절대 위치 박스는 justify-self: normalstretch로 처리하며, start로 처리하지 않습니다(CSS Box Alignment 3 §6.1.2 Absolutely-Positioned Boxes). 기본 종횡비가 있더라도 마찬가지입니다.

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 요소의 widthheight 속성을 aspect-ratio 속성에 매핑하여, iframe에 종횡비를 부여해 이미지와 동일한 종횡비로 동작하도록 합니다.
<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 § 10CSS Flexible Box Model Level 1 § 9.2를 참고하세요. 종횡비에 따라 기본 크기 계산에 영향을 미치는 축을 종횡비 종속 축(ratio-dependent axis)이라고 하며, 입력 크기가 확정적(definite)이면 결과 크기도 확정적입니다. 반대 축(종횡비 종속 축의 크기에 따라 결정되는 축)은 종횡비 결정 축(ratio-determining axis)입니다.

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

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

4.2.1. 마진 병합

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

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

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

아래 예시에서, 박스는 컨테이너의 너비만큼 넓어지고(일반적임), 높이는 콘텐츠를 담기에 필요한 만큼 커지지만, 최소한 너비와 같은 높이를 가집니다.
div {
  aspect-ratio: 1/1;
  /* 'width'와 'height' 모두 기본값은 'auto' */
}
+----------+  +----------+  +----------+
| ~~~~~~~~ |  | ~~~~~~~~ |  | ~~~~~~~~ |
| ~~~~~~~~ |  | ~~~~~~~~ |  | ~~~~~~~~ |
| ~~~~~~~  |  | ~~~~~~~~ |  | ~~~~~~~~ |
|          |  | ~~~      |  | ~~~~~~~~ |
+----------+  +----------+  | ~~~~~~~~ |
                            | ~~~~~~   |
                            +----------+

하지만 overflow: auto가 지정되면, 콘텐츠가 넘치는 박스도 1:1 종횡비를 유지하며 (오버플로우는 스크롤 가능하게 처리됩니다).

div {
  overflow: auto;
  aspect-ratio: 1/1;
}
+----------+  +----------+  +----------+
| ~~~~~~~~ |  | ~~~~~~~~ |  | ~~~~~~~~^|
| ~~~~~~~~ |  | ~~~~~~~~ |  | ~~~~~~~~ |
| ~~~~~~~  |  | ~~~~~~~~ |  | ~~~~~~~~ |
|          |  | ~~~      |  | ~~~~~~~~v|
+----------+  +----------+  +----------+

min-height 속성을 재정의해도 1:1 종횡비가 유지되지만, 별도로 처리하지 않는 한 콘텐츠가 박스 밖으로 넘치게 됩니다.

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>

컨테이너의 widthauto일 때, 종횡비를 통해 100px로 계산됩니다. 하지만 min-widthauto이므로, 150px로 해석됩니다. 따라서 컨테이너의 실제 너비는 150px이 됩니다. 컨테이너 크기 지정 시 콘텐츠를 무시하려면 min-width: 0을 지정할 수 있습니다.

4.4. 최소/최대 크기 전달

어느 한 축(여기서는 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>

#item의 height가 확정적인 컨테이너에 대해 백분율로 지정되어 있으므로, item의 width는 내재적 크기 기여와 최종 레이아웃 모두에서 100px로 계산됩니다. 따라서 컨테이너의 너비도 100px이 됩니다.

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

다음 예시에서는, item의 백분율 height를 해석할 수 없으므로 auto로 동작합니다(참고: CSS 2 §10.5 Content height: the 'height' property). 이제 두 축 모두 자동 크기이므로, 높이가 종횡비 종속 축이 됩니다. 박스의 내재적 크기 기여를 계산하면, 너비는 콘텐츠에서 파생되고, 높이는 그 너비와 종횡비를 통해 계산되어, 단어 "content"의 너비만큼 정사각형 박스(그리고 컨테이너)로 크기가 결정됩니다.

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

5. 내재적 크기 결정

5.1. 내재적 크기

CSS Sizing 3 §5.1 Intrinsic Sizes

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

이름: contain-intrinsic-width, contain-intrinsic-height, contain-intrinsic-block-size, contain-intrinsic-inline-size
값: none | <length> | auto && <length>
초기값: none
적용 대상: size containment이 적용된 요소
상속: 아니오
백분율: 해당 없음
계산값: 지정된 대로, <length> 값은 계산됨
표준 순서: 문법 순서
애니메이션 타입: 계산값 타입 기준

이 속성들은 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
값: [ none | <length> | auto && <length> ]{1,2}
초기값: 각 속성별 참고
적용 대상: 각 속성별 참고
상속: 각 속성별 참고
백분율: 각 속성별 참고
계산값: 각 속성별 참고
애니메이션 타입: 각 속성별 참고
표준 순서: 문법 순서

contain-intrinsic-sizecontain-intrinsic-widthcontain-intrinsic-height 속성을 설정하는 축약형 속성입니다.

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

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

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

contain-intrinsic-size: auto 값은 절충안을 제공합니다: 요소가 한 번이라도 size containment아닐 때, 이 값은 요소가 자신의 크기를 기억하게 합니다 (레이아웃에 의해 평소처럼 계산됨); 그리고 나중에 요소가 size containment를 얻게 되면, 기억된 크기를 사용하게 되어, size containment의 성능 이점을 제공하면서도 아마도 콘텐츠에 맞는 정확한 크기를 제공합니다.

요소의 마지막으로 기억된 크기는 다음과 같이 결정됩니다:

요소가 마지막으로 기억된 크기를 가지지 않을 수도 있습니다. 이는 해당 요소가 한 번도 size containment 없이 렌더링된 적이 없는 경우입니다. (이 경우, 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;
}

이 요소는 100px 너비와 100px 높이를 갖게 됩니다. contain-intrinsic-size가 max-content 너비와 높이를 제공합니다.

만약 요소에 150px 높이의 콘텐츠가 들어가면, 수직 스크롤바가 나타납니다. 스크롤바가 오버레이가 아니라면, 100px 너비 일부를 차지하므로 남은 공간은 (일반적으로 대략 84px)이 됩니다. (참고: CSS Overflow 3 §3.2 Scrollbars and Layout.)

이제 가로 공간이 100px보다 적어졌더라도, contain-intrinsic-size100px 너비를 나타낸다는 이유만으로는 가로 스크롤바가 생성되지 않습니다. 실제 콘텐츠가 남은 공간보다 더 넓은 깨지지 않는 무언가를 포함할 때만 그렇습니다.

반대로, 다음 예시 코드에서는:
div {
  width: max-content;
  contain-intrinsic-size: 100px 100px;
  height: 50px;
  overflow: auto;
}

이 요소는 고정된 50px 높이를 가지지만, contain-intrinsic-size100px "예상 콘텐츠 높이"를 나타냅니다. 따라서 실제로 콘텐츠로 채워질 때 수직 스크롤바가 필요할 것으로 가정하고, max-content 너비는 100px보다 좀 더 크게(일반적으로 약 116px) 결정됩니다. 여기엔 contain-intrinsic-size가 주는 100px의 max-content 너비와, 수직 스크롤바 너비(보통 약 16px)가 더해집니다.

다만, 스크롤바가 필요하다고 공간을 예약하더라도, 실제 콘텐츠가 50px보다 작으면 스크롤바는 생성되지 않고, 요소는 여전히 116px 너비를 가집니다.

5.3. 내재적 크기 기여

CSS Sizing 3 §5.2 Intrinsic Contributions

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

이름: min-intrinsic-sizing
값: legacy | zero-if-scroll || zero-if-extrinsic
초기값: legacy
적용 대상: 인라인 박스를 제외한 모든 요소
상속: 아니오
백분율: 해당 없음
계산값: 지정된 대로
표준 순서: 문법 순서
애니메이션 타입: 분리(discrete)

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

이 속성은 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; }

이렇게 하면 스크롤 컨테이너가 테이블이나 긴 줄의 깨지지 않는 텍스트 등 큰 아이템을 포함할 때 상위 요소의 크기가 커지는 것을 막을 수 있습니다. 반면, 스크롤 컨테이너가 아닌 박스는 여전히 min-content 크기에 영향을 줍니다.

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

“압축된” min-content 기여는 박스가 비어 있다고 가정하여 계산됩니다. 단, 명시적 min-content, max-content, fit-content 값이 sizing 속성에 지정된 경우는 예외입니다.

6. 외재적 크기 결정

CSS Sizing 3 §4 Extrinsic Size Determination

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

Stretch-fit 크기 지정은 박스의 사용 크기를 포함 블록을 최대한 꽉 채우도록 필요한 길이로 맞추려 시도합니다. 이때 min-height, min-width, max-height, max-width로 부여된 제약도 존중합니다.

형식적으로는, 관련 축에서 자동 크기self-alignment 속성stretch를 지정한 것과 동일하게 동작합니다. 단, 결과 박스가 정렬 컨테이너를 꼭 맞게 채우지 못할 수도 있고, 그럴 경우 실제 self-alignment 속성 값에 따라 추가 정렬이 일어날 수 있습니다.

또한, 포매팅 컨텍스트 및 해당 축에서 self-alignment 속성이 적용되지 않는 경우 (예: 블록 레이아웃에서 블록 축, Flex 레이아웃에서 메인 축 등), 그 축의 백분율 크기가 확정적 값으로 해석될 수 있다면, stretch-fit 크기는 박스가 포함 블록을 채우도록 만듭니다. 즉, 100%처럼 동작하지만 box-sizing이 지정한 박스가 아니라 margin box에 크기를 적용합니다. 이때 auto 마진은 0으로 간주하며, 특히 블록 레벨 박스의 경우, block-start/block-end 마진이 상위의 block-start/block-end 마진과 인접(adjoining)하게 되는 상황이 sizing 속성들이 모두 초기값일 때라면, 해당 마진은 0으로 처리됩니다.

참고: stretch 정렬이 적용되지 않거나 백분율 크기가 해석되지 않는 경우, 박스는 자동 크기로 해석됩니다.

예를 들어, 다음 HTML은 두 개의 블록 박스를 나타냅니다:
<div class="outer">
  <div class="inner"></div>
</div>

다음과 같이 지정하면, 내부 박스의 외부 높이가 외부 박스의 높이(200px)와 정확히 일치하지만, 내부 높이는 마진(20px)만큼 작아집니다.

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

다음과 같이 지정하면, 내부 박스의 높이가 외부 박스의 높이(200px)와 정확히 일치합니다. 위쪽 마진은 병합되지만, 아래쪽 마진은 병합되지 않습니다 (부모의 높이가 auto가 아닌 경우 부모의 아래 마진과 인접하지 않기 때문입니다. CSS 2 §8.3.1 Collapsing margins 참조). 따라서 내부 박스의 아래쪽 마진은 잘립니다.

.outer { height: 200px; margin: 0; }
.inner { height: stretch; margin: 10px; }
비슷하게, width: stretch 는 박스가 컨테이너를 채우도록 하며, (마진 10px 때문에) "some more text"의 너비보다 20px 더 좁아집니다:
<div class="outer">
  <div class="inner">text</div>
</div>
some more text
.outer { float: left; margin: 0; }
.inner { width: stretch; margin: 10px; }
반면에, 이 예시에서는 컨테이너의 높이가 불확정적이어서, 자식의 백분율 높이가 auto로 동작하게 되며, height: stretchauto로 동작하게 됩니다.
.outer { height: auto; margin: 0; }
.inner { height: stretch; margin: 10px; }

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

Contain-fit 크기 지정은 본질적으로 stretch-fit 크기 지정을 적용하지만, 한 축의 크기를 줄여 박스의 기본 종횡비를 유지합니다. 이는 contain 키워드가 object-fitbackground-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 이후 주요 변경점:

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

Level 3 이후 추가 사항

감사의 글

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

개인정보 및 보안 고려사항

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

적합성

문서 관례

적합성 요구사항은 설명적 주장과 RFC 2119 용어의 조합으로 표현됩니다. “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, “OPTIONAL”이라는 단어는 이 명세의 규범 부분에서 RFC 2119에 따라 해석해야 합니다. 단, 가독성을 위해 이 명세에서는 이러한 단어들이 모두 대문자로 나타나지 않습니다.

이 명세의 모든 텍스트는 명시적으로 비규범(nonnormative)으로 표시된 섹션, 예시, 주석을 제외하고는 규범적입니다. [RFC2119]

이 명세의 예시는 “예를 들어”라는 문구로 소개되거나, class="example"처럼 규범 텍스트와 구분되어 있습니다:

이것은 정보 제공용 예시입니다.

정보 제공 주석은 “Note”라는 단어로 시작하며, class="note"로 규범 텍스트와 구분됩니다:

참고, 이것은 정보 제공용 주석입니다.

권고(advisement)란 특별한 주의를 환기하도록 스타일링된 규범 섹션으로, <strong class="advisement">로 다른 규범 텍스트와 구분됩니다: UA는 반드시 접근 가능한 대안을 제공해야 합니다.

적합성 클래스

이 명세의 적합성은 세 가지 클래스에 대해 정의됩니다:

스타일 시트
CSS 스타일 시트.
렌더러
스타일 시트의 의미를 해석하고 그것을 사용하는 문서를 렌더링하는 UA.
작성 도구
스타일 시트를 작성하는 UA.

이 모듈에 정의된 문법을 사용하는 모든 구문이 일반 CSS 문법 및 각 기능별 개별 문법에 따라 유효하다면, 스타일 시트는 이 명세에 적합한 것으로 간주됩니다.

렌더러는 스타일 시트를 해당 명세에 따라 해석하는 것 외에도, 이 명세에서 정의한 모든 기능을 올바르게 파싱하고 문서를 그에 맞게 렌더링하면 이 명세에 적합한 것으로 간주됩니다. 단, UA가 장치의 한계로 인해 문서를 올바르게 렌더링하지 못해도 UA가 비적합한 것은 아닙니다. (예: 흑백 모니터에서 색상을 렌더링할 필요는 없음.)

작성 도구는 이 모듈의 기능별 개별 문법 및 일반 CSS 문법에 따라 문법적으로 올바른 스타일 시트를 작성하고, 이 모듈에 설명된 스타일 시트의 모든 다른 적합성 요구사항을 충족하면 적합한 것으로 간주됩니다.

부분 구현

작성자가 미래 호환성 있는 파싱 규칙을 활용하여 대체값을 지정할 수 있도록, CSS 렌더러는 반드시 지원 불가능한 구문(규칙, 속성, 값, 키워드 등)을 무효로 간주하고(무시해야 합니다). 특히, 사용자 에이전트는 지원하지 않는 부분값을 무시하고 지원하는 값만 적용해서는 안 되며: 어떤 값이 무효(지원 불가)로 간주되면 CSS는 전체 선언을 무시해야 합니다.

불안정 및 독점 기능의 구현

향후 안정적인 CSS 기능과의 충돌을 피하기 위해, CSSWG는 최선의 사례를 따라 CSS의 불안정 기능 및 독점 확장 구현을 권장합니다.

비실험적 구현

명세가 후보 권고(Candidate Recommendation) 단계에 도달하면, 비실험적 구현이 가능해지며, 구현자는 명세에 따라 올바르게 구현되었음을 입증할 수 있는 CR 단계 기능에 대해 접두어 없는(정식) 구현을 배포해야 합니다.

CSS의 구현 간 상호 운용성을 확립하고 유지하기 위해, CSS 작업 그룹은 비실험적 CSS 렌더러가 어떤 CSS 기능에 대해 접두어 없는 구현을 배포하기 전에 W3C에 구현 보고서(및 필요한 경우, 해당 구현 보고서에 사용된 테스트 케이스도)를 제출해줄 것을 요청합니다. W3C에 제출된 테스트 케이스는 CSS 작업 그룹의 검토 및 수정이 이루어질 수 있습니다.

테스트 케이스와 구현 보고서 제출에 대한 자세한 정보는 CSS 작업 그룹 웹사이트 https://www.w3.org/Style/CSS/Test/에서 확인할 수 있습니다. 문의 사항은 public-css-testsuite@w3.org 메일링 리스트로 보내주시기 바랍니다.

색인

이 명세에서 정의된 용어

참조에 의해 정의된 용어

참고 문헌

규범적 참고문헌

[CSS-ALIGN-3]
Elika Etemad; Tab Atkins Jr.. CSS Box Alignment Module Level 3. 2020년 4월 21일. WD. URL: https://www.w3.org/TR/css-align-3/
[CSS-BACKGROUNDS-3]
Bert Bos; Elika Etemad; Brad Kemper. CSS Backgrounds and Borders Module Level 3. 2020년 12월 22일. CR. URL: https://www.w3.org/TR/css-backgrounds-3/
[CSS-BOX-4]
Elika Etemad. CSS Box Model Module Level 4. 2020년 4월 21일. WD. URL: https://www.w3.org/TR/css-box-4/
[CSS-CASCADE-5]
Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. CSS Cascading and Inheritance Level 5. 2021년 3월 19일. WD. URL: https://www.w3.org/TR/css-cascade-5/
[CSS-CONTAIN-1]
Tab Atkins Jr.; Florian Rivoal. CSS Containment Module Level 1. 2020년 12월 22일. REC. URL: https://www.w3.org/TR/css-contain-1/
[CSS-DISPLAY-3]
Tab Atkins Jr.; Elika Etemad. CSS Display Module Level 3. 2020년 12월 18일. CR. URL: https://www.w3.org/TR/css-display-3/
[CSS-IMAGES-3]
Tab Atkins Jr.; Elika Etemad; Lea Verou. CSS Images Module Level 3. 2020년 12월 17일. CR. URL: https://www.w3.org/TR/css-images-3/
[CSS-LOGICAL-1]
Rossen Atanassov; Elika Etemad. CSS Logical Properties and Values Level 1. 2018년 8월 27일. WD. URL: https://www.w3.org/TR/css-logical-1/
[CSS-OVERFLOW-3]
David Baron; Elika Etemad; Florian Rivoal. CSS Overflow Module Level 3. 2020년 6월 3일. WD. URL: https://www.w3.org/TR/css-overflow-3/
[CSS-SIZING-3]
Tab Atkins Jr.; Elika Etemad. CSS Box Sizing Module Level 3. 2021년 3월 17일. WD. URL: https://www.w3.org/TR/css-sizing-3/
[CSS-VALUES-3]
Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 3. 2019년 6월 6일. CR. URL: https://www.w3.org/TR/css-values-3/
[CSS-VALUES-4]
Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 4. 2020년 11월 11일. WD. URL: https://www.w3.org/TR/css-values-4/
[CSS-WRITING-MODES-4]
Elika Etemad; Koji Ishii. CSS Writing Modes Level 4. 2019년 7월 30일. CR. URL: https://www.w3.org/TR/css-writing-modes-4/
[CSS2]
Bert Bos; et al. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. 2011년 6월 7일. REC. URL: https://www.w3.org/TR/CSS21/
[CSS3COL]
Håkon Wium Lie; Florian Rivoal; Rachel Andrew. CSS Multi-column Layout Module Level 1. 2021년 2월 12일. WD. URL: https://www.w3.org/TR/css-multicol-1/
[RFC2119]
S. Bradner. Key words for use in RFCs to Indicate Requirement Levels. 1997년 3월. Best Current Practice. URL: https://tools.ietf.org/html/rfc2119

참고용 참고문헌

[CSS-GRID-2]
Tab Atkins Jr.; Elika Etemad; Rossen Atanassov. CSS Grid Layout Module Level 2. 2020년 12월 18일. CR. URL: https://www.w3.org/TR/css-grid-2/
[CSS-POSITION-3]
Elika Etemad; et al. CSS Positioned Layout Module Level 3. 2020년 5월 19일. WD. URL: https://www.w3.org/TR/css-position-3/
[HTML]
Anne van Kesteren; et al. HTML Standard. Living Standard. URL: https://html.spec.whatwg.org/multipage/

속성 색인

이름 초기값 적용 대상 상속 백분율 애니메이션 타입 표준 순서 계산값
aspect-ratio auto || <ratio> auto 인라인 박스 및 내부 루비/테이블 박스를 제외한 모든 요소 아니오 해당 없음 계산값 기준 문법 순서 지정된 키워드 또는 숫자 쌍
contain-intrinsic-block-size none | <length> | auto && <length> none size containment이 적용된 요소 아니오 해당 없음 계산값 타입 기준 문법 순서 지정된 대로, <length> 값은 계산됨
contain-intrinsic-height none | <length> | auto && <length> none size containment이 적용된 요소 아니오 해당 없음 계산값 타입 기준 문법 순서 지정된 대로, <length> 값은 계산됨
contain-intrinsic-inline-size none | <length> | auto && <length> none size containment이 적용된 요소 아니오 해당 없음 계산값 타입 기준 문법 순서 지정된 대로, <length> 값은 계산됨
contain-intrinsic-size [ none | <length> | auto && <length> ]{1,2} 각 속성별 참고 각 속성별 참고 각 속성별 참고 각 속성별 참고 각 속성별 참고 문법 순서 각 속성별 참고
contain-intrinsic-width none | <length> | auto && <length> none size containment이 적용된 요소 아니오 해당 없음 계산값 타입 기준 문법 순서 지정된 대로, <length> 값은 계산됨
min-intrinsic-sizing legacy | zero-if-scroll || zero-if-extrinsic legacy 인라인 박스를 제외한 모든 요소 아니오 해당 없음 분리(discrete) 문법 순서 지정된 대로

이슈 색인

이 문서는 CSS Sizing Level 3에 대한 변경(dif) 명세입니다. 현재 탐색적 워킹 드래프트(Exploratory Working Draft) 단계이므로, 실제 구현 시에는 Level 3를 참조로 사용해 주세요. 이 초안이 CR 단계에 도달하면 Level 3의 내용을 이 초안에 병합할 예정입니다.
CSS Sizing 3 §2 용어
CSS Sizing 3 §3 박스 크기 지정
축약형 추가 예정. <https://github.com/w3c/csswg-drafts/issues/820>
이 섹션의 세부 내용은 아직 작업 중입니다. 만약 여기 명시된 동작 중 대체 요소기본 종횡비를 가질 때 CSS2, Flex Layout, Grid Layout 명세(이 명세가 적용되지 않은 상태)와 다르게 동작한다면, 이것은 오류이므로 CSSWG에 보고해 주세요.
CSS2.1은 대체 요소와 종횡비가 있는 요소를 명확히 구분하지 않습니다. 명확하지 않은 특정 사례를 파악하여, 적절한 Level 3 명세 또는 이곳에 정의가 필요합니다.
모든 크기 지정 정보를 이곳으로 이동하면, 2.1에 억지로 끼워넣기보다는, 여기서의 핵심 원칙은 다음과 같습니다: 종횡비 결정 축(ratio-determining axis)에서의 최종 기본 크기(min/max 적용 전)가 종횡비를 통해 전달됩니다. min/max 제약은 그 후에 전달되고, 각 축에 독립적으로 적용되어 종횡비와는 무관하게 처리됩니다.
이 섹션이 올바르게 작성되지 않았을 수 있습니다. <https://github.com/w3c/csswg-drafts/issues/6071>
CSS Sizing 3 §5.1 Intrinsic Sizes
CSS Sizing 3 §5.2 Intrinsic Contributions
이 속성 이름은 정말로 고민이 필요합니다.
CSS Sizing 3 §4 Extrinsic Size Determination
margin 병합과 관련해서는 stretch-fit이 하는 대로 복사해야 함.
한 차원에서의 최소 크기가 종횡비를 유지하면 타깃 사각형을 넘치게 될 경우, 종횡비를 지킬지, 이미지를 왜곡할지 정의 필요. 전자라면 #2와 유사하게 최소값을 적용하는 단계 필요.