CSS 박스 사이징 모듈 레벨 3

1. 소개

이 섹션은 규범적이지 않습니다.

CSS 레이아웃에는 다양한 레이아웃 계산에 사용되는 여러 가지 자동 크기 지정 개념이 있습니다. 이 섹션에서는 이 명세의 레이아웃 동작을 다른 모듈에서 사용되는 계산과 연결하는 데 도움이 되는 보다 정확한 용어를 정의하고, width 및 height 속성을 위한 새로운 키워드를 정의하여 작성자가 이러한 크기 계산 결과로 요소의 치수를 지정할 수 있도록 합니다.

이 명세에는 삽화가 필요합니다! 이슈를 참고하세요.

1.1. 모듈 상호작용

이 모듈은 width, height, min-width, min-height, max-width, max-height 및 column-width 기능을 [CSS2] 10장과 [CSS3COL]에서 정의한 내용을 확장합니다.

이 모듈에서 box-sizing 속성의 정의는 [CSS-UI-3]의 정의를 대체합니다.

1.2. 값 정의

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

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

2. 용어

좌표 축과 치수에 관련된 주요 용어는 CSS Writing Modes 3 § 6 추상 박스 용어에서 정의되어 있습니다.

size

하나 또는 두 개의 차원 측정값: block size 및/또는 inline size; 또는 width 및/또는 height.

inner size

content-box size를 box에 대해 의미합니다.

outer size

margin-box size를 box에 대해 의미합니다.

definite size

레이아웃을 수행하지 않고도 결정할 수 있는 크기; 즉, <length>, 텍스트의 측정값(줄 바꿈 고려 없이), initial containing block의 크기, 또는 <percentage> 또는 기타 수식 (예를 들어 비-대체 블록의 “stretch-fit” 크기 지정 [CSS2]) 이 전적으로 definite 크기를 기준으로 해석되는 경우를 의미합니다.

또한, 절대 위치 지정된 요소의 containing block의 크기는 해당 요소에 대해 항상 definite입니다.

indefinite size

definite가 아닌 크기. Indefinite available space는 사실상 무한합니다.

available space

박스가 배치되는 공간을 나타내는 크기로, 해당 포맷팅 컨텍스트의 규칙에 따라 결정됩니다. 박스에 허용되는 공간은 보통 containing block의 측정값(만약 definite인 경우) 또는 무한 크기( indefinite인 경우)입니다. Available space는 min-content constraint 또는 max-content constraint가 될 수도 있으며, 이는 그 공간에 배치되는 박스가 해당 제약 조건 하에 배치되도록 강제합니다.

stretch fit

주어진 크기에 stretch fit하는 것은 해당 크기에서 박스의 계산된 마진(겹치지 않고, auto는 0으로 처리), 테두리, 패딩을 해당 차원에서 뺀 값 (즉, outer size가 완벽히 맞도록), 그리고 0이하일 경우 바닥값을 0으로 하여 (inner size가 음수가 되지 않도록) 계산합니다.

참고: 이는 auto 너비를 정상 흐름에 있는 비-대체 블록에 대해 CSS2.1§10.3.3에서 계산하는 데 사용되는 공식입니다.

fallback size

일부 크기 지정 알고리즘은 무한 크기와 잘 작동하지 않습니다. 이 경우에는 fallback size를 대신 사용합니다. 별도로 명시되지 않는 한, 이는 initial containing block의 크기입니다.

2.1. 자동 박스 크기

CSS에는 자동으로 결정되는 크기의 네 가지 유형이 있습니다 (컨텍스트에 따라 auto 크기 지정 규칙의 결과):

stretch-fit size

stretch-fit inline size

stretch-fit block size

박스의 size가 해당 축의 available space를 outer size가 채울 때의 값입니다; 다시 말해, stretch fit이 available space에 들어맞는 경우, 해당 공간이 definite일 때를 의미합니다. available space가 indefinite인 경우에는 정의되지 않습니다.

참고: inline axis에서는 이 값을 CSS2.1§10.3.5에서 "available width"라고 하며, CSS2.1§10.3.3 규칙으로 계산합니다.

참고: 이 크기를 사용하는 계산에서는 available space가 indefinite일 때의 대체 동작(fallback)을 지정해야 합니다.

max-content size

박스가 무한한 available space를 가질 때 해당 축에서의 "이상적" size입니다. 일반적으로 해당 축에서 박스가 콘텐츠를 감싸면서 가질 수 있는 가장 작은 size이며, 남는 공간을 최소화하면서 오버플로우를 방지합니다.

max-content inline size

박스가 size가 inline axis에서의 "이상적" 값. 보통, 박스 내의 모든 소프트 줄바꿈 기회를 사용하지 않을 때 콘텐츠를 감싸는 가장 좁은 inline size입니다. (§ 5 내재적 크기 결정 참고.)

참고: 이것은 CSS2.1§10.3.5에서 "preferred width", CSS2.1§17.5.2.2에서 "maximum cell width"라고 불립니다.

max-content block size

박스가 size가 block axis에서의 "이상적" 값. 보통은 레이아웃 후 콘텐츠의 block size입니다.

min-content size

명목상, 박스가 오버플로우를 피할 수 있는 가장 작은 size입니다. 더 큰 size를 선택하면 오버플로우를 피할 수 있지만, 그 외에는 오버플로우가 발생합니다. 공식적으로는 박스가 min-content constraint에서 크기 지정된 값입니다. § 5 내재적 크기 결정 참고.

min-content inline size

min-content size의 inline axis 값. 박스 내의 모든 소프트 줄바꿈 기회를 사용할 때 콘텐츠를 감싸는 inline size입니다.

참고: CSS2.1§10.3.5에서는 "preferred minimum width", CSS2.1§17.5.2.2에서는 "minimum content width"라고 불립니다.

min-content block size

min-content size의 block axis 값. block container, 테이블, inline box의 경우 max-content block size와 동일합니다.

fit-content size

fit-content inline size

fit-content block size

주어진 축의 available space가 definite인 경우, clamp(min-content size, stretch-fit size, max-content size) (즉, max(min-content size, min(max-content size, stretch-fit size)))와 같습니다. min-content constraint 하에서는 min-content size와 같고, 그 외에는 해당 축의 max-content size와 같습니다.

참고: 이것은 CSS2.1§10.3.5와 CSS Multi-column Layout § 3.4에서 "shrink-to-fit" width라고 불립니다.

intrinsic size

max-content size 또는 min-content size처럼 주로 콘텐츠의 크기에서 발생하는 값입니다. (이 용어가 때로는 이 두 크기 중 하나에서 파생된 값을 뜻하기도 합니다.)

대체 요소(replaced elements)는 종종 intrinsic size를 natural dimensions에서 가져옵니다.

2.2. 내재적 크기 기여

max-content contribution

박스가 자신의 containing block의 max-content size에 기여하는 크기입니다.

min-content contribution

박스가 자신의 containing block의 min-content size에 기여하는 크기입니다.

intrinsic size contribution

max-content contribution, min-content contribution 또는 이와 유사하게 계산된 콘텐츠 기반 크기 기여입니다.

내재적 크기 기여는 박스의 outer size를 기준으로 계산되며, 이때 auto 마진은 0으로 처리됩니다.

2.3. 내재적 크기 제약

max-content constraint

박스의 containing block이 부여하는 크기 제약으로, max-content contribution을 산출하게 합니다.

min-content constraint

박스의 containing block이 부여하는 크기 제약으로, min-content contribution을 산출하게 합니다.

preferred aspect ratio

박스에 내재된 너비:높이 비율로, 여러 크기 지정 알고리즘이 가능한 한 다른 크기 입력을 존중하면서 해당 비율에 맞는 값을 산출하도록 합니다. 별도로 명시하지 않는 한, 박스의 preferred aspect ratio는 natural aspect ratio가 있을 경우 그 값을 사용하며, content box에 적용됩니다. 대부분의 박스는 preferred aspect ratio가 없습니다.

3. 박스 크기 지정

3.1. 크기 속성

이 섹션에서는 크기 속성 width, height, min-width, min-height, max-width, 그리고 max-height를 정의합니다. 이들의 가능한 값은 다음 섹션 § 3.2 크기 값: <length-percentage>, auto | none, min-content, max-content, fit-content() 값에서 정의합니다.

참고: 이 속성들의 추가적인 플로우-상대 별칭은 [CSS-LOGICAL-1]에서 정의됩니다.

각 크기 속성 쌍별로 (예: width와 height) 축약형(shorthand)을 정의하고 싶으나 @page size 디스크립터와 이름 충돌이 있어 Level 4로 연기되었습니다. 이 문제의 해결 방법에 대한 제안을 환영합니다. 논의를 참고하세요.

3.1.1. 선호 크기 속성: width 및 height 속성

width 및 height (physical) 속성은 박스의 선호 width 및 height를 각각 지정합니다.

3.1.2. 최소 크기 속성: min-width 및 min-height 속성

min-width 및 min-height 속성은 박스의 최소 너비(또는 “min width”) 및 최소 높이(또는 “min height”)를 각각 지정합니다.

참고: auto의 초기값은 새롭게 변경되었습니다. [CSS2]에서는 초기값이 0이었습니다.

3.1.3. 최대 크기 속성: max-width 및 max-height 속성

max-width 및 max-height 속성은 박스의 최대 너비(또는 “max width”) 및 최대 높이(또는 “max height”)를 각각 지정합니다.

3.2. 크기 값: <length-percentage>, auto | none, min-content, max-content, 그리고 fit-content() 값

<length-percentage>

<length> 및/또는 <percentage>를 사용하여 박스의 크기를 지정합니다. box-sizing 속성은 content box 또는 border box 중 어떤 영역이 측정되는지 나타냅니다.

백분율은 박스의 containing block의 width/height에 따라 해석됩니다. 만약 특정 축에서 containing block의 크기가 박스의 크기에 따라 달라지는 경우, 백분율 해석에 관한 특별 규칙은 해당 레이아웃 모듈을 참고하세요.

음수 값은 사용할 수 없습니다.

auto

width/height의 경우, 자동 크기 (자동 block size/자동 inline size) 를 지정합니다. 관련 레이아웃 모듈에서 계산 방법을 참고하세요.

min-width/min-height의 경우, 자동 최소 크기를 지정합니다. 관련 레이아웃 모듈에서 다르게 정의하지 않는 한, 사용 값은 0으로 처리됩니다. 하위 호환을 위해, 이 키워드의 resolved value는 모든 [CSS2] display type에 대해 0입니다: 블록 및 인라인 박스, 인라인 블록, 그리고 모든 테이블 레이아웃 박스에 대해. 박스가 생성되지 않는 경우에도 0으로 처리됩니다.

none

박스의 크기에 제한이 없습니다.

min-content

관련 축에서 min-content size를 사용합니다. 박스의 block size의 경우, 별도 명시가 없다면 자동 크기와 동일합니다.

max-content

관련 축에서 max-content size를 사용합니다. 박스의 block size의 경우, 별도 명시가 없다면 자동 크기와 동일합니다.

fit-content(<length-percentage>)

fit-content 공식에서 available space를 지정된 인수로 대체하여 사용합니다, 즉, min(max-content, max(min-content, <length-percentage>))와 같습니다. <length-percentage> 인수의 해석은 독립적으로 사용할 때와 동일하게 처리됩니다.

음수 <length-percentage> 값은 사용할 수 없습니다.

모든 경우에서, 사용 값은 음수가 되지 않도록 바닥값 처리되어 inner size가 음수가 되지 않습니다.

참고: min-content, max-content, fit-content() 값은 Level 3에서 새롭게 추가된 내용입니다.

참고: flex-basis 속성도 이 새로운 키워드를 지원하며, 값 정의는 <width>를 참조합니다.

참고: 이 섹션은 이전에 stretch 및 fit-content를 각각 stretch-fit size와 fit-content size를 나타내는 키워드로 정의했었습니다. 이 키워드는 Level 4로 연기되었으며, (추가적으로 contain 키워드도 stretch와 유사하게 동작하지만, preferred aspect ratio를 유지함) indefinite available space 상황에서의 동작을 더 잘 정리하기 위해 연기되었습니다.

3.2.1. “auto처럼 동작”

width/height가 auto로 계산되거나, auto가 지정된 것처럼 동작하도록 정의된 경우 (예: 블록 백분율 높이가 indefinite 크기 기준으로 해석될 때, CSS2§10.5 참고), 두 경우 모두 해당 속성이 auto처럼 동작한다고 합니다.

참고: 레거시 명세에서 레이아웃 동작을 정의할 때, 특히 [CSS2]에서는 width/height의 계산값이 auto인 조건을 명시적으로 언급할 수 있습니다; 이 중 일부는 auto처럼 동작으로 해석해야 하며, CSSWG에 업데이트 요청해야 합니다.

이 섹션을 새로운 용어 automatic size 참조로 대체해야 합니다.

3.2.2. 플로트 포함 또는 제외

이 섹션은 규범적이지 않습니다.

block box 경계는 일반적으로 플로트에 영향을 받지만, 때로는 작성자가 자신(자식)의 플로트만 포함하거나 외부 플로트를 제외해야 할 때가 있습니다. 블록 레이아웃의 경우, display: flow-root를 지정하면 해당 박스가 formatting context 루트가 되어 이러한 동작을 하게 됩니다.

참고: Flex, Grid, Table 레이아웃에 참여하는 박스는 자동으로 이 동작을 가집니다.

3.3. 크기 지정 박스 경계: box-sizing 속성

box-sizing 속성은 고정 크기(<length>와 <percentage> 등)가 content box 또는 border box에 할당되는지 정의합니다. 이 속성은 모든 크기 속성의 해석에 영향을 주며, flex-basis도 포함됩니다.

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

content-box

크기 속성에 <length-percentage>로 지정된 크기는 박스의 inner size를 의미하며, 마진/테두리/패딩은 제외됩니다: 해당 값은 content box에 적용됩니다. 박스의 패딩과 테두리는 지정된 width 및 height 외부에 레이아웃/그려집니다.

참고: 이는 CSS2.1에서 width/height가 지정되는 기본 동작입니다.

border-box

크기 속성에 <length-percentage>로 지정된 크기는 시각적으로 보이는 박스 크기(테두리/패딩 포함, 마진 제외)를 의미하며, border box에 적용됩니다. 박스의 패딩과 테두리는 지정된 width 및 height 내부에 레이아웃/그려지며, content box는 남은 공간을 채우고, 0 이하로는 바닥값 처리됩니다.

콘텐츠 width/height는 지정된 <length-percentage>에서 해당 면의 테두리/패딩 너비를 빼서 계산됩니다. 콘텐츠 width/height는 음수가 될 수 없으므로, 해당 계산은 0으로 바닥값 처리됩니다.

사용 값(예: getComputedStyle() 등으로 노출되는 값)은 border box 기준입니다.

box-sizing에 영향을 받는 값에는 원시 <length-percentage> 값과 fit-content()와 같은 함수적 표기 안의 값이 포함됩니다. 반대로, auto 및 min-content와 같은 비수치 값은 box-sizing의 영향을 받지 않습니다 (별도 명시가 없는 한).

.box {
  box-sizing:   content-box; /* 기본값 */
  width:        100px;
  padding-left: 10px;
  border-left:  10px solid;
}

.box {
  box-sizing:   border-box;
  width:        100px;
  padding-left: 10px;
  border-left:  10px solid;
}

.box {
  box-sizing:   border-box;
  width:        100px;
  padding-left: 60px;
  border-left:  60px solid;
  /* padding + border = 120px */
}

div.container {
  width:38em;
  border:1em solid black;
}

div.split {
  box-sizing:border-box;
  width:50%;
  border:1em silver ridge;
  float:left;
}

<div class="container">
<div class="split">이 div는 왼쪽 절반을 차지합니다.</div>
<div class="split">이 div는 오른쪽 절반을 차지합니다.</div>
</div>

참고: button과 같은 일부 HTML 요소는 기본적으로 border-box 동작을 가집니다. 어떤 요소가 이 동작을 가지는지는 HTML에서 확인하세요.

레거시 CSS 명세에서는 width, height, 최소(min) 너비, 최소(min) 높이, 최대(max) 너비, 최대(max) 높이 용어가, 별도 명시가 없다면 보통 inner size (content-box 크기) 를 의미합니다. box의 경우도 마찬가지입니다.

명확한 용어 구분을 위해서는 CSS User Interface 3 § 3.1 박스 모델 변경: box-sizing 속성의 Visual formatting model details 섹션([CSS2])을 참고하세요.

3.4. 새로운 컬럼 크기 값: min-content, max-content, fit-content() 값

column-width의 값으로 사용할 때, 새로운 키워드는 최적의 컬럼 너비를 지정합니다:

min-content

멀티컬럼 컨테이너의 콘텐츠의 min-content inline size로 최적의 컬럼 너비를 지정합니다.

max-content

멀티컬럼 컨테이너의 콘텐츠의 max-content inline size로 최적의 컬럼 너비를 지정합니다.

fit-content(<length-percentage>)

최적의 컬럼 너비를 다음과 같이 지정합니다: min(max-content size, max(min-content size, <length-percentage>))

참고: 컬럼 너비는 컬럼마다 달라지지 않습니다. 컬럼 너비가 멀티컬럼 컨테이너의 콘텐츠에 의해 결정될 때 (위 키워드처럼), 모든 콘텐츠가 고려되며, 계산된 너비는 모든 컬럼에 동일하게 적용됩니다.

4. 외재적 크기 결정

외재적 크기 결정은 요소의 컨텍스트에 따라 크기를 결정하며, 콘텐츠는 고려하지 않습니다.

4.1. 백분율 크기 결정

백분율은 박스의 containing block 기준으로 박스의 크기를 지정합니다.

<article style="height: 60em">
  <figure style="height: 50%;">
    <img style="height: 50%;">
  </figure>
</article>

상위 박스의 크기가 콘텐츠에 따라 달라질 때 백분율을 해석하는 방법은 § 5.2.1 백분율 크기 박스의 내재적 기여에서 확인하세요.

5. 내재적 크기 결정

내재적 크기 결정은 요소의 콘텐츠를 바탕으로 크기를 결정하며, 컨텍스트는 고려하지 않습니다.

5.1. 내재적 크기

박스의 각 축에서의 min-content size는 해당 축에서 float 요소가 auto 크기를 가지며 (그리고 해당 축에 최소 또는 최대 크기가 없고) containing block이 해당 축에서 0 크기일 때의 크기입니다. (즉, “shrink-to-fit”로 크기가 지정될 때의 최소 크기입니다.)

박스의 각 축에서의 max-content size는 해당 축에서 float 요소가 auto 크기를 가지며 (그리고 해당 축에 최소 또는 최대 크기가 없고) containing block이 해당 축에서 무한대 크기일 때의 크기입니다. (즉, “shrink-to-fit”로 크기가 지정될 때의 최대 크기입니다.)

min-content size와 max-content size를 합쳐 내재적 크기라고 부릅니다.

참고: 박스에 preferred aspect ratio가 있으면, 반대 방향의 크기 제약이 전달되어 해당 축의 auto 크기에 영향을 줄 수 있습니다. CSS2§10 참고.

이 명세는 float의 크기 결정 방법을 정의하지 않습니다. [CSS2]를 참고하세요. 다만, 내재적 크기는 대체 요소 중 natural size가 없는 경우 아래처럼 정의합니다:

preferred aspect ratio가 있는 경우:

min-content size는 0을 사용합니다.

max-content size의 경우:

• available space가 definite인 inline axis라면, 해당 크기로 stretch fit하여 inline size를 구하고, aspect ratio로 block size를 계산합니다.

• 그 외의 경우 박스의 <length>가 계산값으로 min-width 또는 min-height에 지정되어 있다면, 해당 크기를 사용해 다른 방향을 aspect ratio로 계산합니다; 두 방향 모두 <length> 최소값이면, 더 큰 전체 크기가 되도록 선택합니다.

  참고: 이 경우는 이전까지 300x150 기본값에서 계산했으나, 이제 박스의 min size에서 계산합니다. 이 방식이 더 적절하고 웹 호환성도 높을 것으로 보이지만, 문제가 있다면 CSSWG에 피드백을 주세요.

• 그 외의 경우 inline size를 initial containing block의 해당 방향과 맞추고, 다른 방향은 aspect ratio로 계산합니다.

preferred aspect ratio가 없는 경우:

min-content size와 max-content size 모두에 대해:

• 박스가 해당 방향에 <length>로 계산된 최소 크기 (min-width/min-height)가 지정되어 있다면, 해당 크기를 사용합니다.

  참고: 이 동작은 auto 값이 min size properties에 추가되어 가능해졌습니다. 더 나은 동작이라 생각되지만, 웹 호환성에 문제가 있으면 CSSWG에 피드백을 주세요.

• 그 외의 경우, 너비에 300px, 높이에 150px을 사용합니다.

height 또는 width가 auto처럼 동작하는 블록/인라인 대체 요소의 경우, 사실상 max-content size(CSS2§10.3.2)를 사용하게 되므로, 이 명세는 height와 width가 모두 auto처럼 동작하는 대체 요소의 미정의 케이스에 대해 위 규칙을 적용합니다.

참고: 이 명세는 float의 크기 결정 방법을 정의하지 않습니다. [CSS2] 및 해당 display type의 CSS 명세, 또는 기존 구현을 참고하시기 바랍니다. 향후 명세에서 자세히 정의할 예정이며, CSS2의 “정의”를 대체할 것입니다.

HTML의 <input type=text> 및 <textarea>와 같은 텍스트 입력 컨트롤의 auto 크기는 일반적으로 고정 크기이지만, 해당 요소의 콘텐츠를 활용해 비대체 블록 컨테이너처럼 콘텐츠 기반 내재적 크기를 결정할 수 있습니다. min-content, max-content 키워드는 크기 속성에서 값으로 사용될 때, 폼 컨트롤의 값이 박스 내 텍스트로 렌더링되는 경우 콘텐츠 기반 크기를 의미하며, 일반 비대체 요소처럼 시각적 콘텐츠에 맞게 크기를 조정할 수 있습니다.

이 경우 콘텐츠는 입력 컨트롤의 값 (textarea의 경우 raw value, input의 경우 value)이며, 사람이 읽기 쉽거나/로컬라이즈된 형태로 변환될 수 있습니다. 이 값이 입력 컨트롤의 자식 text run으로 처리되어, 입력 컨트롤이 실제로 줄바꿈을 허용하는 곳에만 소프트 줄바꿈 기회를 허용합니다. 입력 컨트롤에 플레이스홀더 텍스트가 값 표시 영역에 오버레이되도록 지정된 경우, 해당 텍스트도 콘텐츠 기반 크기 계산에 포함됩니다—현재 플레이스홀더가 보이는지와 관계없이 측정됩니다. (즉, 입력 컨트롤의 콘텐츠 기반 내재적 크기는 플레이스홀더 텍스트에 맞추는 크기와 값에 맞추는 크기 중 더 큰 값입니다.)

UA는 폼 컨트롤의 min-content 및 max-content size에 최소값을 지정할 수 있습니다 (예: 0폭 문자 1개를 포함할 수 있는 크기, 또는 터치 타겟의 최소 사용 가능 크기 등). 이를 통해 캐럿 표시 공간 확보 및 폼 컨트롤의 사용성을 보장합니다.

참고: 이는 iframe 또는 기타 콘텐츠 포함 대체 요소에도 확장될 수 있습니다 (논의 참고), 하지만 텍스트 입력이 주요 사례이며, 문서 내부 요소라 추가적인 복잡성이 가장 적습니다.

5.2. 내재적 기여

박스의 각 축에서 min-content contribution/max-content contribution은 해당 박스만 포함하는 가상의 auto 크기 float의 콘텐츠 박스 크기이며, 그 float의 containing block이 0 크기/무한 크기일 때를 기준으로 합니다.

참고: 이 명세는 이러한 크기를 정확히 어떻게 결정하는지 정의하지 않습니다. [CSS2]와 관련 display type의 CSS 명세, 아래의 백분율 처리 규칙, 그리고 기존 구현을 참고하세요.

5.2.1. 백분율 크기 박스의 내재적 기여

때때로 백분율 크기 박스의 containing block의 크기가 박스 자체의 내재적 크기 기여에 따라 달라져서, 순환적 의존성이 생길 수 있습니다. 이러한 박스의 내재적 크기 기여(콘텐츠 기반 automatic minimum size 계산 포함)를 계산할 때, 동일 축의 크기를 기준으로 해석되는 백분율 값 (순환 백분율 크기) 은 특별히 해석됩니다:

1. 박스가 비-대체(non-replaced)일 경우, 최대 크기 속성 또는 선호 크기 속성 (width/max-width/height/max-height) 값에 백분율이 포함되어 있고 그 값이 순환적인 경우, 박스의 내재적 크기 기여만 계산할 때 해당 속성의 초기값으로 취급합니다. 예를 들어, width: calc(20px + 50%)인 박스의 max-content contribution은 width가 auto인 것처럼 계산합니다. (실제 박스 크기 산정 시에는 백분율이 정상적으로 적용됩니다; 아래 참고.)
2. 박스가 대체(replaced)일 경우도 마찬가지로, 최대 크기 속성 또는 선호 크기 속성 값에 백분율이 포함되고 그 값이 순환적이면, 박스의 max-content contribution만 계산할 때 초기값으로 취급합니다.
3. 박스가 대체(replaced)인 경우, 순환 백분율이 최대 크기 속성 또는 선호 크기 속성 (width/max-width/height/max-height) 값에 있으면, 해당 축에서 min-content contribution 계산 시 0으로 해석합니다. (HTML에서 적용되는 요소 목록은 § 5.2.2 압축 가능한 대체 요소 참고.) 박스에 preferred aspect ratio가 있다면, 이 min-content contribution은 반대 축의 <length-percentage> 최소 크기로 바닥값 처리합니다—해당 백분율도 0으로 해석—aspect ratio를 통해 전달합니다.

   전달된 백분율을 0이 아닌 containing block 기준으로 해석할지 논의 필요. 논의

   UA는 UI 요소가 항상 보여야 할 때 등 UI 고려에 따라 min-content contribution의 바닥값을 추가로 지정할 수 있습니다 (예: select의 드롭다운 화살표 등).

   참고: min-content contribution은 항상 해당 축의 최소 크기로도 바닥값 처리됩니다.

   이 규칙은 콘텐츠 기반 automatic minimum size 또는 그에 상응하는 크기 기여 계산에도 적용되며, definite “지정 크기 제안”을 산출합니다.

   예를 들어, input 에 width: calc(50% + 50px)가 지정된 경우 min-content contribution은 50px이 되며, 추가로 수평 마진/테두리/패딩이 더해집니다.
4. 최소 크기 속성, 마진, 패딩, gutter의 경우, 순환 백분율은 내재적 크기 기여 산정 시 0으로 해석합니다.

그런 다음, 별도 명시가 없는 한 containing block의 콘텐츠의 실제 크기와 위치를 계산할 때:

• containing block의 block-size 또는 max-block-size로 인해 콘텐츠 크기에 의존성이 생긴 경우, 박스의 백분율은 해석되지 않고 auto처럼 동작합니다.

  참고: Grid item과 flex item은 이 경우에도 백분율 해석을 허용합니다.

• 그 외에는, 백분율은 containing block의 크기를 기준으로 해석됩니다. (containing block의 크기가 박스의 결과 크기에 따라 다시 결정되지는 않으므로, 콘텐츠가 containing block을 넘치거나 모자랄 수 있습니다.)

참고: 이 규칙은 CSS2§10.2, CSS2§8.3, CSS2§8.4 등에서 이전에 정의되지 않았던 순환 케이스의 동작을 명확히 지정합니다. CSS2§10.5의 동작은 각 레이아웃 모드(예: flex layout)별 명세에서 재정의됩니다.

<article style="width: min-content">
  <aside style="width: 50%;">
  LOOOOOOOOOOOOOOOOOOOONG
  </aside>
</article>

<article style="height:auto">
  <aside style="height: 50%;">
    <div class=block style="height: 150px;"></div>
  </aside>
  <section style="height: 30px;"></section>
</article>

<article style="height:100px; min-height: min-content;">
  <aside style="height: 50%;">
    <div style="height: 150px;"></div>
  </aside>
  <section style="height: 30px;"></section>
</article>

<article style="height:auto; min-height: min-content;">
  <aside style="height: 50%;">
    <div class=block style="height: 150px;"></div>
  </aside>
  <section style="height: 30px;"></section>
</article>

<article style="height:100px; min-height: min-content;">
  <aside style="height: 200%;">
    <div style="height: 150px;"></div>
  </aside>
  <section style="height: 30px;"></section>
</article>

5.2.2. 압축 가능한 대체 요소

대체 요소 목록(HTML§14.4 [HTML]) 외에도, 아래 HTML 요소들도 위의 백분율 크기 대체 요소 규칙에서 대체 요소로 간주되며, min-content contribution이 width/height 또는 max-width/max-height가 순환 백분율 크기로 지정될 때 압축될 수 있습니다:

• input (단, "버튼류"가 아닌 type 값일 때; UA마다 다를 수 있음)

  특정 UA에서 "버튼류"란 button 요소처럼 표시되어 실제 콘텐츠가 요소 레이아웃을 결정하는 경우를 의미합니다. 대부분의 UA에서 "button", "reset", "submit", "color" 타입이 버튼류이며, "file" 타입은 일부 UA에서 텍스트 입력(축소 가능)과 버튼(버튼류, 축소 불가)을 조합하여 부분적으로 버튼류로 간주합니다.

• select, textarea, progress, meter, marquee.

이 규칙을 max-width/height에 적용한 웹 호환성과 구현 현황은 이슈 6348에서 추적 중입니다. [Issue #6348]

변경 사항

최근 변경 사항

2020년 12월 18일 작업 초안 이후 변경 사항:

• § 5.1 내재적 크기에서 대체 요소의 max-content 크기 정의 오류 수정. (이슈 6072)
• fit-content size 정의에 min-content constraint 처리 누락된 부분 추가.
• 대체 요소 "intrinsic" 크기 명칭을 "natural" 크기로 변경(내재적 크기와 혼동 방지, 이슈 4961 참고).
• 기타 사소한 편집/개선.

2019년 5월 22일 작업 초안 이후 주요 변경 사항:

• min-content 및 max-content가 속성 초기값과 반드시 동일하게 동작하지 않을 수 있음을 명시(관련 레이아웃 모듈에 따라 다름, 이슈 3973).
• fit-content()의 내재적 기여 산정 시 인수 단독으로 산정한 값을 fit-content 공식에 적용하도록 변경 (특별 동작 제거, 이슈 3731).
• 내재적 크기 없는 대체 박스의 max-content size는 ICB 또는 300px×150px 대신 최소 크기를 사용(단, <length>인 경우만, § 5.1 내재적 크기 참고, 이슈 4217)
• natural aspect ratio가 있는 객체의 기본 크기 산정 시 300px×150px 대신 ICB 크기 사용. (이슈 4218)
• preferred aspect ratio 정의 및 “intrinsic aspect ratio” 대신 사용.
• 기타 사소한 편집/수정.

2018년 3월 4일 작업 초안 이후 주요 변경 사항:

• box-sizing 정의를 CSS UI Level 3에서 가져옴.
• 순환 백분율 처리 명확화. (#1132, #2384, #2297, #2674)
• *-content 값을 block axis에 적용할 때 속성 초기값이 아니라 “초기값처럼 동작”하도록 변경. (#2708)
• 기타 자잘한 오류 수정.

2017년 2월 7일 작업 초안 이후 주요 변경 사항:

• 대체 요소의 min-content/max-content 크기 정의 개선.
• block axis에 적용할 때 새로운 키워드가 초기값이 아닌 존재하지 않을 수도 있는 auto로 계산되지 않음을 명시.
• 대체 요소의 percent 크기가 min-content contribution을 0으로 처리함을 명시.
• 종속적인 containing block에 대해 백분율 크기 정의가 잘못된 점 수정(추가 검토 필요).
• stretch 및 fit-content 키워드 Level 4로 연기(불확실 containing block 상황 추가 고려).
• 모든 크기 속성 정의를 전체로 가져옴(diff 기반 아님): width, height, min-width, min-height, max-width', max-height, box-sizing.

CSS Level 2 이후 추가 사항

다양한 자동/콘텐츠 기반 크기 알고리즘을 대폭 상세화함과 더불어, 다음과 같은 새로운 기능이 [CSS2] 이후 추가되었습니다:

• box-sizing 속성(원래 [CSS-UI-3]에서, 이후 본 명세로 이동).
• min-content, max-content, fit-content() 값(크기 속성).
• auto 초기값이 min-width 및 min-height에 추가됨(원래 [CSS-FLEXBOX-1]에서, 이후 본 명세로 이동).

감사의 글

특별히 L. David Baron, Aaron Gustafson, Daniel Holbert, Mats Palmgren 에 감사드립니다.

개인정보 및 보안 고려사항

자동 레이아웃을 지원하기 위해 CSS는 박스를 그 콘텐츠에 맞게 사이즈를 조정합니다. [DOM] 및 [CSSOM] API와 결합해 스크립트에서 박스 크기를 반환할 수 있는데, 이는 콘텐츠에 대한 정보를 노출할 수 있습니다. 하지만 이런 정보는 박스 크기보다 DOM에서 직접 콘텐츠를 조회하는 것이 더 쉽고 직접적입니다. 콘텐츠를 조회할 수 없는 컨테이너(예: 교차 출처 iframe 등)는 이미지와 같은 대체 요소가 자연 크기/비율을 노출하는 경우를 제외하고는 외부 페이지에 크기 정보를 노출하지 않습니다.