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 크기 지정 규칙의 결과):

스트레치 맞춤 크기

스트레치 맞춤 인라인 크기

스트레치 맞춤 블록 크기

상자의 크기로, 해당 외부 크기가 주어진 축의 사용 가능한 공간을 채운다면 상자가 차지하게 될 크기입니다. 즉, 사용 가능한 공간이 확정적인 경우, 해당 공간에 대한 스트레치 맞춤입니다. 사용 가능한 공간이 비확정적이면 정의되지 않습니다.

참고: 인라인 축의 경우, 이는 CSS2.1§10.3.5에서 “사용 가능한 너비”라고 하며 CSS2.1§10.3.3의 규칙에 따라 계산됩니다.

참고: 이 크기가 관련된 계산에서는 사용 가능한 공간이 비확정적일 수 있는 경우 그때의 대체 동작을 지정해야 합니다.

최대 콘텐츠 크기

무한한 사용 가능 공간이 주어졌을 때 주어진 축에서 상자의 “이상적인” 크기입니다. 일반적으로 이는 콘텐츠를 계속 감싸면서 해당 축에서 상자가 취할 수 있는 가장 작은 크기, 즉 오버플로를 피하면서 채워지지 않은 공간을 최소화하는 크기입니다.

최대 콘텐츠 인라인 크기

인라인 축에서 상자의 “이상적인” 크기입니다. 일반적으로 상자 내부의 소프트 줄 바꿈 기회가 하나도 사용되지 않는 경우 콘텐츠를 감싸면서 취할 수 있는 가장 좁은 인라인 크기입니다. (§ 5 내재 크기 결정을 참조하십시오.)

참고: 이는 CSS2.1§10.3.5에서는 “선호 너비”라고 하며 CSS2.1§17.5.2.2에서는 “최대 셀 너비”라고 합니다.

최대 콘텐츠 블록 크기

블록 축에서 상자의 “이상적인” 크기입니다. 일반적으로 레이아웃 후 콘텐츠의 블록 크기입니다.

최소 콘텐츠 크기

명목상 더 큰 크기를 선택하여 피할 수 있는 오버플로를 발생시키지 않으면서 상자가 취할 수 있는 가장 작은 크기입니다. 형식적으로는 최소 콘텐츠 제약 아래에서 크기가 결정될 때의 상자 크기이며, § 5 내재 크기 결정을 참조하십시오.

최소 콘텐츠 인라인 크기

인라인 축에서의 최소 콘텐츠 크기입니다. 일반적으로 상자 내부의 소프트 줄 바꿈 기회를 모두 사용하는 경우 콘텐츠를 감싸게 되는 인라인 크기입니다.

참고: 이는 CSS2.1§10.3.5에서는 “선호 최소 너비”라고 하며 CSS2.1§17.5.2.2에서는 “최소 콘텐츠 너비”라고 합니다.

최소 콘텐츠 블록 크기

블록 축에서의 최소 콘텐츠 크기입니다. 블록 컨테이너, 테이블 및 인라인 박스의 경우, 이는 최대 콘텐츠 블록 크기와 같습니다.

콘텐츠 맞춤 크기

콘텐츠 맞춤 인라인 크기

콘텐츠 맞춤 블록 크기

주어진 축의 사용 가능한 공간이 확정적이면, 다음과 같습니다. clamp(최소 콘텐츠 크기, 스트레치 맞춤 크기, 최대 콘텐츠 크기) (즉, max(최소 콘텐츠 크기, min(최대 콘텐츠 크기, 스트레치 맞춤 크기))). 최소 콘텐츠 제약 아래에서 크기를 결정할 때에는 최소 콘텐츠 크기와 같습니다. 그 밖의 경우에는 해당 축의 최대 콘텐츠 크기와 같습니다.

참고: 이는 CSS2.1§10.3.5 및 CSS 다중 열 레이아웃 § 3.4에서 “축소하여 맞추기” 너비라고 합니다.

내재 크기

최대 콘텐츠 크기 또는 최소 콘텐츠 크기, 즉 주로 콘텐츠의 크기에서 발생하는 크기입니다. (이 용어의 일부 용례에서는 주로 이 두 크기 중 하나에서 파생된 크기도 가리킬 수 있습니다.)

대체 요소는 흔히 자신의 내재 크기를 자신의 고유 치수에서 도출합니다.

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 속성은 콘텐츠 박스 또는 테두리 박스 중 어느 것이 측정되는지를 나타냅니다.

백분율은 적절하게 상자의 컨테이닝 블록의 너비/높이를 기준으로 해석됩니다. 특정 축에서 컨테이닝 블록의 크기가 상자의 크기에 따라 달라지는 경우, 백분율을 해석하는 방법에 관한 특별한 규칙은 관련 레이아웃 모듈을 참조하십시오.

음수 값은 유효하지 않습니다.

auto

width/height의 경우, 자동 크기 (자동 블록 크기/자동 인라인 크기)를 지정합니다. 이를 계산하는 방법은 관련 레이아웃 모듈을 참조하십시오.

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

none

상자의 크기에 제한이 없습니다.

min-content

해당 축에서 최소 콘텐츠 크기를 사용합니다. 상자의 블록 크기의 경우, 달리 지정되지 않는 한, 이는 해당 상자의 자동 크기와 같습니다.

max-content

해당 축에서 최대 콘텐츠 크기를 사용합니다. 상자의 블록 크기의 경우, 달리 지정되지 않는 한, 이는 해당 상자의 자동 크기와 같습니다.

fit-content(<length-percentage>)

지정된 인수로 사용 가능한 공간을 대체한 fit-content 공식을 사용합니다. 즉, min(max-content, max(min-content, <length-percentage>))이며, 여기서 <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. 백분율 크기 박스의 내재적 기여

때로는 백분율 크기 상자의 컨테이닝 블록의 크기가 상자 자체의 내재 크기 기여도에 따라 달라져, 순환 종속성이 생성됩니다. 이러한 상자의 내재 크기 기여도를 계산할 때 (콘텐츠 기반 자동 최소 크기에 대한 모든 계산을 포함하여), 내재 크기 기여도와 동일한 축의 크기를 기준으로 해석되는 백분율 값 (순환 백분율 크기)은 특별한 방식으로 해석됩니다:

1. 상자가 비대체인 경우, 백분율을 포함하는 표현식으로 지정된 모든 최대 크기 속성 또는 선호 크기 속성 (width/max-width/height/max-height)의 전체 값은 (10% 또는 calc(10px + 0%) 등) 순환하는 경우 상자의 내재 크기 기여도를 계산하는 목적으로만 해당 속성의 초기값으로 처리됩니다. 예를 들어, width: calc(20px + 50%)인 상자가 주어지면, 해당 상자의 최대 콘텐츠 기여도는 width가 auto인 것처럼 계산됩니다. (그러나 상자 자체의 실제 크기를 결정할 때에는 백분율이 평소와 같이 적용됩니다. 아래를 참조하십시오.)
2. 마찬가지로 상자가 대체인 경우, 백분율을 포함하는 표현식으로 지정된 모든 최대 크기 속성 또는 선호 크기 속성의 전체 값은 순환하는 경우 상자의 최대 콘텐츠 기여도를 계산하는 목적으로만 해당 속성의 초기값으로 처리됩니다.
3. 상자가 대체인 경우, 모든 최대 크기 속성 또는 선호 크기 속성 (width/max-width/height/max-height)의 값에 포함된 순환 백분율은 해당 축의 최소 콘텐츠 기여도를 계산할 때 0을 기준으로 해석됩니다. (HTML에서 이 규칙이 적용되는 요소 목록은 § 5.2.2 압축 가능한 대체 요소를 참조하십시오.) 상자에 선호 종횡비도 있는 경우, 이 최소 콘텐츠 기여도는 반대쪽 축의 모든 <length-percentage> 최소 크기를—그러한 백분율을 0을 기준으로 해석한 뒤—선호 종횡비를 통해 전이한 값으로 하한이 제한됩니다.

   전이하기 전에 전이되는 백분율을 0 대신 해당 컨테이닝 블록을 기준으로 해석해야 할까요? 논의를 참조하십시오.

   UA는 UI상의 고려 사항에 따라 최소 콘텐츠 기여도의 하한을 추가로 제한할 수 있습니다. 예를 들어 특정 UI 요소가 계속 표시되도록 보장하기 위한 경우입니다 (예: select의 드롭다운 화살표).

   참고: 최소 콘텐츠 기여도는 언제나 그렇듯이, 자체 축의 최소 크기에 의해서도 하한이 제한됩니다.

   이 규칙은 콘텐츠 기반 자동 최소 크기 또는 그에 대응하는 크기 기여도를 계산할 때에도 적용되어, 확정된 “지정 크기 제안”을 산출합니다.

   예를 들어, width: calc(50% + 50px)가 지정된 input의 최소 콘텐츠 기여도는 50px이며, 여기에 모든 수평 margin/border/padding이 더해집니다.
4. 최소 크기 속성뿐만 아니라, 마진과 패딩 (및 거터)에서도, 순환 백분율은 내재 크기 기여도를 결정할 때 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 크기 정의에 min-content 제약을 처리하는 누락된 문장을 추가했습니다.
• 내재 크기와의 혼동을 피하기 위해 대체 요소의 “내재” 치수를 “고유” 치수로 이름을 변경했습니다(이슈 4961 참조).
• 그 밖의 다양한 사소한 편집상 수정 및 개선.

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

• 관련 레이아웃 모듈에서 달리 지정한 경우, min-content와 max-content가 반드시 해당 속성의 초기값과 동일하게 동작하는 것은 아니라고 정의했습니다. (이슈 3973)
• fit-content()의 내재 기여도를 내재 기여도 계산에서 해당 인수가 단독으로 사용될 때와 동일하게 처리하고 그에 따라 fit-content 공식을 해석하도록 변경했으며, 내재 기여도를 계산할 때 fit-content() 해석에 특별한 동작을 적용하는 방식은 사용하지 않도록 했습니다. (이슈 3731)
• 내재 크기가 없는 대체 상자의 max-content 크기가 ICB 또는 300px×150px 대신 해당 상자의 최소 크기를 사용하도록 변경했으며, 이는 해당 값이 <length>인 경우에만 적용됩니다. § 5.1 내재 크기를 참조하십시오. (이슈 4217)
• 고유 종횡비가 있는 객체의 기본 크기 결정을 300px×150px 대신 ICB 크기를 사용하도록 변경했습니다. (이슈 4218)
• 선호 종횡비를 정의하고 적절한 곳에서 “내재 종횡비” 대신 사용했습니다.
• 기타 사소한 / 편집상 수정.

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

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

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

• 대체 요소의 min-content 및 max-content 크기에 대한 정의를 더 정확하게 했습니다.
• 새 키워드가 블록 축에 적용될 때 잠재적으로 존재하지 않을 수 있는 auto가 아니라 초기값으로 계산되도록 했습니다.
• 대체 요소의 백분율 크기가 해당 요소의 min-content 기여도를 0으로 만든다고 명시했습니다.
• 종속적인 컨테이닝 블록을 기준으로 해석되는 백분율 크기에 대한 혼란스럽거나 잘못된 정의를 수정했습니다. (여기에는 추가 작업이 필요할 수 있습니다.)
• stretch 및 fit-content 키워드는 비확정적 컨테이닝 블록에서의 동작을 추가로 검토할 수 있도록 레벨 4로 연기했습니다.
• 모든 크기 지정 속성의 전체 정의를 (차이만 표시하는 대신) 포함했습니다: 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 등)는 이미지와 같은 대체 요소가 자연 크기/비율을 노출하는 경우를 제외하고는 외부 페이지에 크기 정보를 노출하지 않습니다.