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. 용어
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: normal을 stretch로 처리하며, 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 ( 12 em , 1 fr )); } li{ aspect-ratio : 1 /1 ; overflow : auto; }
iframe
요소의 width 및 height 속성을
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 § 10과 CSS Flexible Box Model Level 1 § 9.2를 참고하세요. 종횡비에 따라 기본 크기 계산에 영향을 미치는 축을 종횡비 종속 축(ratio-dependent axis)이라고 하며, 입력 크기가 확정적(definite)이면 결과 크기도 확정적입니다. 반대 축(종횡비 종속 축의 크기에 따라 결정되는 축)은 종횡비 결정 축(ratio-determining axis)입니다.
참고: 기본 종횡비는 박스의 크기 중 적어도 하나가 자동이어야만 효과가 있습니다. 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' */ }
+----------+ +----------+ +----------+
| ~~~~~~~~ | | ~~~~~~~~ | | ~~~~~~~~ |
| ~~~~~~~~ | | ~~~~~~~~ | | ~~~~~~~~ |
| ~~~~~~~ | | ~~~~~~~~ | | ~~~~~~~~ |
| | | ~~~ | | ~~~~~~~~ |
+----------+ +----------+ | ~~~~~~~~ |
| ~~~~~~ |
+----------+
하지만 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 >
컨테이너의 width가 auto일 때, 종횡비를 통해 100px로 계산됩니다. 하지만 min-width는 auto이므로, 150px로 해석됩니다. 따라서 컨테이너의 실제 너비는 150px이 됩니다. 컨테이너 크기 지정 시 콘텐츠를 무시하려면 min-width: 0을 지정할 수 있습니다.
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 >
#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-size는 contain-intrinsic-width 및 contain-intrinsic-height 속성을 설정하는 축약형 속성입니다.
첫 번째 값은 contain-intrinsic-width 값을 나타내고, 두 번째 값은 contain-intrinsic-height 값을 나타냅니다. 값이 하나만 주어진 경우, 두 속성 모두에 적용됩니다.
5.2.1. 마지막으로 기억된 크기
Size containment은 페이지가 효율적으로 렌더링될 수 있도록 보장하고, 요소의 렌더링 변경으로 인해 발생할 수 있는 레이아웃 작업의 범위를 제한하는 데 매우 유용합니다. 하지만 이는 작성자에게 매우 제한적이기도 하여, 요소의 크기가 어떻게 될지 정확히 예측해야 합니다. 만약 이 예측이 조금이라도 틀리면, 보기 싫은 스크롤바가 생기거나 콘텐츠가 실수로 숨겨질 수 있습니다.
contain-intrinsic-size: auto 값은 절충안을 제공합니다: 요소가 한 번이라도 size containment가 아닐 때, 이 값은 요소가 자신의 크기를 기억하게 합니다 (레이아웃에 의해 평소처럼 계산됨); 그리고 나중에 요소가 size containment를 얻게 되면, 기억된 크기를 사용하게 되어, size containment의 성능 이점을 제공하면서도 아마도 콘텐츠에 맞는 정확한 크기를 제공합니다.
-
ResizeObserver 이벤트가 결정 및 전달되는 시점에, 요소에 contain-intrinsic-size: auto가 지정되어 있지만 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 : 100 px 100 px ; overflow : auto; }
이 요소는 100px 너비와 100px 높이를 갖게 됩니다. contain-intrinsic-size가 max-content 너비와 높이를 제공합니다.
만약 요소에 150px 높이의 콘텐츠가 들어가면, 수직 스크롤바가 나타납니다. 스크롤바가 오버레이가 아니라면, 100px 너비 일부를 차지하므로 남은 공간은 (일반적으로 대략 84px)이 됩니다. (참고: CSS Overflow 3 §3.2 Scrollbars and Layout.)
이제 가로 공간이 100px보다 적어졌더라도, contain-intrinsic-size가 100px 너비를 나타낸다는 이유만으로는 가로 스크롤바가 생성되지 않습니다. 실제 콘텐츠가 남은 공간보다 더 넓은 깨지지 않는 무언가를 포함할 때만 그렇습니다.
div{ width : max-content; contain-intrinsic-size : 100 px 100 px ; height : 50 px ; overflow : auto; }
이 요소는 고정된 50px 높이를 가지지만, contain-intrinsic-size는 100px "예상 콘텐츠 높이"를 나타냅니다. 따라서 실제로 콘텐츠로 채워질 때 수직 스크롤바가 필요할 것으로 가정하고, 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 정렬이 적용되지 않거나 백분율 크기가 해석되지 않는 경우, 박스는 자동 크기로 해석됩니다.
<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; }
<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에서 동작하는 것과 유사합니다.
먼저, 타깃 사각형을 결정합니다:
- 처음 타깃 사각형은 박스의 포함 블록 크기가 되며, 불확정적인 크기는 무한대로 간주합니다. 두 차원 모두 불확정적이면, 처음 타깃 사각형은 박스를 stretch-fit 크기로 지정했을 때의 외곽선과 일치하게 설정됩니다.
- 그 다음, 박스에 none이 아닌 max-width 또는 max-height가 있다면, 타깃 사각형의 해당 차원을 박스 마진 박스의 "최대 크기" 이하로 제한합니다. 즉, 박스가 max-width/height로 지정되었을 때의 마진 박스 크기입니다. (일반적인 box-sizing 규칙과 일관되게, 이 "최대 크기"는 박스의 min-width/min-height의 효과로 바닥(floor) 처리됨에 유의.)
- 마지막으로, 타깃 사각형은 박스의 기본 종횡비를 맞추기 위해 한 차원에서 최소한으로 줄어듭니다.
각 차원에서의 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 이후 주요 변경점:
-
ratio-determining axis 용어 정의.
-
min/max 크기 제약이 종횡비를 통해 전달된다는 것 정의, (이슈 5257)
또한, 어느 한 축(origin 축)의 크기 제약은 기본 종횡비를 통해 다른 축(destination 축)으로 아래와 같이 전달됨:
-
먼저, 확정적 최소 크기가 있다면, 이를 변환하여 origin에서 destination 축으로 전달, 이 전달된 최소값은 확정적 기본 또는 최대 크기로 제한됨.
-
그 다음, 확정적 최대 크기가 있다면, 이를 변환하여 origin에서 destination으로 전달, 이 전달된 최대값은 확정적 기본 또는 최소 크기, 그리고 (있다면) 전달된 최소값 이상으로 제한됨.
참고: 기본 원칙은 크기 제약이 종횡비를 통해 다른 축으로 전달되어, 명시적으로 지정된 크기를 침해하지 않는 한 종횡비를 최대한 보존한다는 것.
-
-
aspect-ratio가 대체 요소에 자연 크기가 하나만 있을 때 다른 차원을 결정한다는 것 명확화. (이슈 5306)
대체 요소의 자연 치수가 자연 너비 또는 자연 높이 하나만 있는 경우, 기본 종횡비를 부여하면, 기존 크기를 기본 종횡비를 통해 전달하여 누락된 자연 높이나 너비도 갖게 됨.
-
aspect-ratio가 마진 self-collapsing을 방해한다는 것 정의 (이슈 5328)
마진 병합(CSS 2 §8.3.1 Collapsing margins)을 위해, 블록 축이 종횡비 종속 축이면, 계산된 block-size가 auto라고 간주하지 않음.
Level 3 이후 추가 사항
- stretch, fit-content, contain 키워드가 sizing 속성에 추가됨.
- aspect-ratio 속성 추가.
- contain-intrinsic-size 속성 추가.
감사의 글
이 모듈에 기여해주신 Aaron Gustafson, L. David Baron께 특별히 감사드립니다.
개인정보 및 보안 고려사항
이 명세는 새로운 개인정보 또는 보안 고려사항을 도입하지 않습니다.