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. 값 정의

이 명세는 [CSS2]의 CSS 속성 정의 규칙을 따르며, [CSS-VALUES-3]의 값 정의 구문을 사용합니다. 이 명세에서 정의하지 않은 값 유형은 CSS 값 및 단위 [CSS-VALUES-3]에서 정의합니다. 다른 CSS 모듈과 결합하면 이러한 값 유형의 정의가 확장될 수 있습니다.

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

2. 용어

좌표축 및 치수와 관련된 몇 가지 주요 용어는 CSS 쓰기 모드 3 § 6 추상 박스 용어에 정의되어 있습니다.

크기

1차원 또는 2차원 측정값: 블록 크기 및/또는 인라인 크기; 또는 너비 및/또는 높이입니다.

위에서 아래, 오른쪽에서 왼쪽으로 진행되는 세로쓰기 일본어에서는
가로 너비와 블록 크기가 동의어이며,
세로 높이와 인라인 크기가 동의어입니다. — 너비 또는 높이가 인라인 크기 또는 블록 크기 중 어느 것에 대응하는지는 쓰기 모드에 따라 달라집니다.

내부 크기

박스의 콘텐츠 박스 크기입니다.

내부 크기

외부 크기

박스의 여백 박스 크기입니다.

외부 크기

확정 크기

레이아웃을 수행하지 않고 결정할 수 있는 크기입니다. 즉, <length>, 텍스트 측정값(줄 바꿈은 고려하지 않음), 초기 컨테이닝 블록의 크기, 또는 <percentage>나 기타 공식 (예: 비대체 블록의 “stretch-fit” 크기 조정 [CSS2]) 중 오직 확정 크기만을 기준으로 해석되는 것입니다.

또한 절대 위치 지정 요소의 컨테이닝 블록 크기는 해당 요소에 대해서는 항상 확정입니다.

미확정 크기

확정이 아닌 크기입니다. 미확정 사용 가능 공간은 사실상 무한합니다.

참고: 내재적 크기 조정 키워드인 max-content 등은 미확정입니다. 이는 크기 컨테인먼트 또는 자식이 없는 등의 이유로 자식을 레이아웃하지 않고도 결정할 수 있는 경우에도 마찬가지입니다.

사용 가능 공간

박스가 배치되는 공간을 나타내는 크기로, 해당 박스가 참여하는 서식 컨텍스트의 규칙에 따라 결정됩니다. 박스에 사용 가능한 공간은 일반적으로 그 컨테이닝 블록의 측정값(해당 크기가 확정인 경우)이거나 무한한 크기(미확정인 경우)입니다. 사용 가능 공간은 또는 min-content 제약이나 max-content 제약일 수 있으며, 이 경우 그 안에 배치되는 박스는 해당 제약에 따라 레이아웃됩니다.

테스트

늘림 맞춤

주어진 크기에 대한 늘림 맞춤은 해당 크기에서 주어진 치수의 박스 계산 여백(상쇄하지 않으며 auto는 0으로 취급), 테두리 및 패딩을 뺀 값이며 (외부 크기가 정확하게 맞도록), 최솟값은 0입니다 (따라서 내부 크기가 음수가 되지 않습니다).

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

대체 크기

일부 크기 조정 알고리즘은 무한한 크기에서 제대로 동작하지 않습니다. 이러한 경우에는 대신 대체 크기를 사용합니다. 달리 명시하지 않는 한, 이는 초기 컨테이닝 블록의 크기입니다.

2.1. 자동 박스 크기

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

늘림 맞춤 크기

늘림 맞춤 인라인 크기

늘림 맞춤 블록 크기

주어진 축에서 박스의 외부 크기가 사용 가능 공간을 채운다면 박스가 취하게 될 크기입니다. 다시 말해, 해당 사용 가능 공간이 확정인 경우 그 공간에 대한 늘림 맞춤입니다. 사용 가능 공간이 미확정이면 정의되지 않습니다.

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

참고: 이 크기를 사용하는 계산은 사용 가능 공간이 미확정일 가능성이 있다면, 그 경우에 사용할 대체 동작을 지정해야 합니다.

max-content 크기

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

max-content 인라인 크기

인라인 축에서 박스의 “이상적인” 크기입니다. 일반적으로 박스 내부의 소프트 줄 바꿈 기회를 전혀 사용하지 않았을 때 콘텐츠를 감쌀 수 있는 가장 좁은 인라인 크기입니다. (§ 5 내재적 크기 결정을 참조하십시오.)

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

max-content 블록 크기

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

이상적인 max-content 크기가 min-content 크기보다 작아지는 경우 (예: 음수 여백 사용으로 인해) 유효한 max-content 크기의 최솟값은 min-content 크기입니다.

min-content 크기

명목상, 더 큰 크기를 선택하면 피할 수 있는 오버플로를 발생시키지 않으면서 박스가 취할 수 있는 가장 작은 크기입니다. 형식적으로는 min-content 제약하에서 크기를 정했을 때의 박스 크기이며, § 5 내재적 크기 결정을 참조하십시오.

min-content 인라인 크기

인라인 축에서의 min-content 크기입니다. 일반적으로 박스 내부의 소프트 줄 바꿈 기회를 모두 사용했을 때 콘텐츠를 감쌀 수 있는 인라인 크기입니다.

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

min-content 블록 크기

블록 축에서의 min-content 크기입니다. 블록 컨테이너, 테이블 및 인라인 박스에서는 max-content 블록 크기와 같습니다.

fit-content 크기

fit-content 인라인 크기

fit-content 블록 크기

특정 축의 사용 가능 공간이 확정이면, 다음과 같습니다. clamp(min-content 크기, 늘림 맞춤 크기, max-content 크기) (즉, max(min-content 크기, min(max-content 크기, 늘림 맞춤 크기))). min-content 제약하에서 크기를 정할 때는 min-content 크기와 같습니다. 그 밖의 경우에는 해당 축의 max-content 크기와 같습니다.

참고: 이는 CSS2.1§10.3.5 및 CSS 다중 열 레이아웃 § 3.4에서 “shrink-to-fit” 너비라고 합니다.

내재적 크기

max-content 크기 또는 min-content 크기, 즉 주로 콘텐츠 크기에서 비롯되는 크기입니다. (이 용어의 일부 용례에서는 주로 이 두 크기 중 하나에서 파생된 크기까지 포함할 수 있습니다.)

대체 요소는 흔히 그 내재적 크기를 자연 치수에서 파생합니다.

다음 예제에서는 내부 <div>의 너비에 fit-content 크기 조정을 적용하고, 서로 다른 크기의 컨테이닝 블록 내부에 배치합니다.

가장 좁은 컨테이닝 블록(2ch)에서는 박스가 min-content 크기를 취합니다. 즉, 가능한 한 좁게 줄 바꿈된 모든 콘텐츠를 완전히 포함하기 위해 컨테이닝 블록을 넘쳐 나옵니다.
중간 크기의 컨테이닝 블록(9ch)에서는 박스가 늘림 맞춤 크기를 취합니다. 즉, 콘텐츠가 내부에 맞게 줄 바꿈되는 동안 컨테이닝 블록을 정확히 채웁니다.
가장 넓은 컨테이닝 블록(16ch)에서는 박스가 max-content 크기를 취합니다. 즉, 컨테이닝 블록보다 작지만 줄 바꿈되지 않은 콘텐츠를 정확히 감쌉니다.

<!DOCTYPE html>
<style>div > div { width: fit-content; }</style>
<div style="width: 2ch;">
  <div>abc def ehg</div>
</div>
<div style="width: 9ch;">
  <div>abc def ehg</div>
</div>
<div style="width: 16ch;">
  <div>abc def ehg</div>
</div>

위 예제를 나타낸 그림:
“abc”만큼 너비가 있는 빨간색 박스,
“abc def”보다 약간 더 넓은 또 다른 박스,
그리고 전체 문자열을 한 줄에 표시할 만큼 넓은 세 번째 박스입니다.

여기서 width 대신 min-width 또는 max-width 속성을 사용하면 이러한 동일한 크기를 각각 최소 너비 또는 최대 너비로 적용하여, 사용 너비를 구하기 위해 선호 너비를 제한합니다. § 3 박스 크기 지정 및 § 3.2 크기 조정 값: <length-percentage>, auto | none, stretch, min-content, max-content 및 fit-content 값을 참조하십시오.

2.2. 내재적 크기 기여분

max-content 기여분: 박스가 그 컨테이닝 블록의 max-content 크기에 기여하는 크기입니다.
min-content 기여분: 박스가 그 컨테이닝 블록의 min-content 크기에 기여하는 크기입니다.
내재적 크기 기여분: max-content 기여분, min-content 기여분, 또는 이와 유사하게 계산된 콘텐츠 기반 크기 기여분입니다.

내재적 크기 기여분은 박스의 외부 크기를 기반으로 하며, 이를 위해 auto 여백은 0으로 취급합니다.

이상적인 max-content 기여분이 min-content 기여분보다 작아지는 경우 (예: 음수 여백 사용으로 인해) 유효한 max-content 기여분의 최솟값은 min-content 기여분입니다.

2.3. 내재적 크기 제약

max-content 제약

박스의 컨테이닝 블록이 부과하여 박스가 max-content 기여분을 생성하도록 하는 크기 조정 제약입니다.

min-content 제약

박스의 컨테이닝 블록이 부과하여 박스가 min-content 기여분을 생성하도록 하는 크기 조정 제약입니다.

선호 종횡비

박스에 내재된 너비:높이 비율로, 다른 크기 조정 입력을 준수하면서 가능한 한 해당 종횡비와 일치하는 크기가 생성되도록 여러 크기 조정 알고리즘에 영향을 줍니다. 달리 명시하지 않는 한, 박스의 선호 종횡비는 존재하는 경우 그 자연 종횡비이며, 박스의 콘텐츠 박스에 적용됩니다. 대부분의 박스에는 선호 종횡비가 없습니다.

테스트

replaced-fractional-height-from-aspect-ratio.html (실시간 테스트) (소스)

3. 박스 크기 지정

3.1. 크기 조정 속성

이 절에서는 적용되는 박스의 선호, 최소 및 최대 크기를 지정하는 크기 조정 속성을 정의합니다. 가능한 값은 다음 절인 § 3.2 크기 조정 값: <length-percentage>, auto | none, stretch, min-content, max-content 및 fit-content 값에 정의되어 있습니다.

흐름 상대 변형(inline-size, block-size 등)은 요소 자체의 쓰기 모드를 사용하여 매핑되며, [CSS-LOGICAL-1]에 정의된 대로 해당 물리적 대응 속성(width, height 등)과 상호 작용합니다. 또한 CSS 쓰기 모드 3 § 6 추상 박스 용어를 참조하십시오.

CSS에서는 최소 및 최대 크기가 모두 사용 크기를 제한하지만, 최소 크기 제약이 항상 가장 강한 제약입니다. 또한 내부 크기의 최솟값은 항상 0입니다.

3.1.1. 선호 크기 속성: width, height, inline-size 및 block-size 속성

이름:	width, height, inline-size, block-size
값:	auto \| <box-size>
초깃값:	auto
적용 대상:	비대체 인라인을 제외한 모든 요소
상속:	아니요
백분율:	컨테이닝 블록의 너비/높이에 상대적
계산값:	지정된 대로이며, <length-percentage> 값은 계산됨
정규 순서:	문법에 따름
애니메이션 유형:	계산값 유형에 따르며, fit-content() 내부까지 재귀적으로 적용
논리적 속성 그룹:	size

테스트

width 및 height(물리적)와 inline-size 및 block-size(흐름 상대)는 각각 박스의 선호 너비 및 높이(물리적) 또는 인라인 크기 및 블록 크기(흐름 상대)를 지정하는 크기 조정 속성입니다.

3.1.2. 최소 크기 속성: min-width, min-height, min-inline-size 및 min-block-size 속성

이름:	min-width, min-height, min-inline-size, min-block-size
값:	auto \| <box-size>
초깃값:	auto
적용 대상:	width 또는 height를 허용하는 모든 요소
상속:	아니요
백분율:	컨테이닝 블록의 너비/높이에 상대적
계산값:	지정된 대로이며, <length-percentage> 값은 계산됨
정규 순서:	문법에 따름
애니메이션 유형:	계산값에 따르며, fit-content() 내부까지 재귀적으로 적용
논리적 속성 그룹:	min-size

테스트

min-width 및 min-height(물리적)와 min-inline-size 및 min-block-size(흐름 상대)는 각각 박스의 최소 너비(“min width”) 및 최소 높이(“min height”) 또는 최소 인라인 크기(“min inline size”) 및 최소 블록 크기(“min block size”)를 지정하는 크기 조정 속성입니다.

참고: auto라는 초깃값은 새로 추가된 것입니다. [CSS2]에서는 초깃값이 0이었습니다.

3.1.3. 최대 크기 속성: max-width, max-height, max-inline-size 및 max-block-size 속성

이름:	max-width, max-height, max-inline-size, max-block-size
값:	none \| <box-size>
초깃값:	none
적용 대상:	width 또는 height를 허용하는 모든 요소
상속:	아니요
백분율:	컨테이닝 블록의 너비/높이에 상대적
계산값:	지정된 대로이며, <length-percentage> 값은 계산됨
정규 순서:	문법에 따름
애니메이션 유형:	계산값에 따르며, fit-content() 내부까지 재귀적으로 적용
논리적 속성 그룹:	max-size

테스트

max-width 및 max-height(물리적)와 max-inline-size 및 max-block-size(흐름 상대)는 각각 박스의 최대 너비(“max width”) 및 최대 높이(“max height”) 또는 최대 인라인 크기(“max inline size) 및 최대 블록 크기(“max block size)를 지정하는 크기 조정 속성입니다.

3.2. 크기 조정 값: <length-percentage>, auto | none, stretch, min-content, max-content 및 fit-content 값

다음 값은 크기 조정 속성에서 사용됩니다. auto 및 none 이외의 값은 <box-size> 생성 규칙으로 그룹화됩니다:

<box-size> = <length-percentage> | stretch | min-content | max-content | fit-content

참고: 레벨 2에서 <box-size>에 해당하는 것은 단지 <length-percentage>뿐입니다.

<length-percentage [0,∞]>

<length> 및/또는 <percentage>를 사용하여 박스 크기를 지정합니다. box-sizing 속성은 콘텐츠 박스 또는 테두리 박스 중 어느 것을 측정하는지 나타냅니다.

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

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

테스트

thin-element-render.html (실시간 테스트) (소스)

auto

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

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

none

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

stretch

늘림 맞춤 크기 조정을 적용하여, 박스의 여백 박스 크기를 그 컨테이닝 블록 크기에 맞추려고 합니다. § 4.2 늘림 맞춤 크기 조정: 컨테이닝 블록 채우기를 참조하십시오.

테스트

min-content

관련 축의 min-content 크기를 사용합니다. 박스의 블록 크기의 경우 달리 명시하지 않는 한 해당 자동 크기와 같습니다.

테스트

max-content

관련 축의 max-content 크기를 사용합니다. 박스의 블록 크기의 경우 달리 명시하지 않는 한 해당 자동 크기와 같습니다.

fit-content

관련 축의 fit-content 크기를 사용합니다. 즉, min(max-content, max(min-content, stretch))입니다.

테스트

모든 경우에 사용값에는 음수가 아닌 내부 크기를 보장하도록 최솟값이 적용됩니다.

참고: stretch, min-content, max-content 및 fit-content 값은 레벨 3에서 새로 추가되었습니다.

참고: flex-basis 속성도 그 값이 <'width'>를 참조하여 정의되므로 이 새로운 키워드를 사용할 수 있게 됩니다.

3.2.1. “auto처럼 동작”

width/height가 auto로 계산되는 경우와, auto가 지정된 것처럼 동작하도록 정의된 경우 (예: 블록 백분율 높이가 미확정 크기를 기준으로 해석되는 경우, CSS2§10.5 참조) 모두를 나타내는 공통 용어를 제공하기 위해, 두 경우 모두 속성이 auto처럼 동작한다고 합니다.

참고: 레거시 명세의 레이아웃 동작 설명, 특히 [CSS2]에서는 조건으로 width/height의 계산값이 auto임을 명시적으로 언급할 수 있습니다. 이러한 경우 중 일부는 auto처럼 동작한다는 의미로 해석해야 하며, 업데이트할 수 있도록 CSSWG에 보고해야 합니다.

테스트

이 절을 새로운 용어인 자동 크기에 대한 참조로 교체하십시오.

3.2.2. 플로트 포함 또는 제외

이 절은 비규범적입니다.

블록 박스의 경계는 일반적으로 플로트가 통과할 수 있지만, 작성자가 자신의 (자손) 플로트를 내부에 포함시키거나 외부의 플로트를 제외해야 하는 경우가 있습니다. 블록 레이아웃에서는 display: flow-root를 지정하면 박스가 서식 컨텍스트 루트가 되어 이러한 동작을 갖습니다.

참고: Flex, Grid 또는 Table 레이아웃에 참여하는 박스는 자동으로 이러한 동작을 갖습니다.

3.3. 크기 조정을 위한 박스 가장자리: box-sizing 속성

이름:	box-sizing
값:	content-box \| border-box
초깃값:	content-box
적용 대상:	width 또는 height를 허용하는 모든 요소
상속:	아니요
백분율:	해당 없음
계산값:	지정된 키워드
정규 순서:	문법에 따름
애니메이션 유형:	불연속

테스트

box-sizing 속성은 고정 크기(예: <length> 및 <percentage>)가 콘텐츠 박스 또는 테두리 박스 중 어느 것에 할당되는지를 정의합니다. 이는 flex-basis를 포함한 모든 크기 조정 속성의 해석에 영향을 줍니다.

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

content-box

크기 조정 속성에서 <length-percentage>로 지정된 크기는 여백/테두리/패딩을 제외한 박스의 내부 크기를 나타냅니다. 즉, 콘텐츠 박스에 적용됩니다. 박스의 패딩과 테두리는 지정된 width 및 height의 바깥쪽에 레이아웃되고 그려집니다.

참고: 이는 CSS2.1에서 지정한 width 및 height의 동작이며, 따라서 기본값입니다.

테스트

border-box

크기 조정 속성의 모든 <length-percentage> 값은 테두리 박스에 적용되어 시각적으로 드러나는 박스 크기를 나타냅니다. 박스의 패딩과 테두리(단, 여백은 제외)는 본질적으로 사용된 width 및 height의 내부에 레이아웃되고 그려지며, 콘텐츠 박스는 남은 공간을 채우도록 크기가 정해집니다. 더 구체적으로, 콘텐츠 박스의 너비 및 높이는 지정된 <length-percentage>에서 해당 축의 테두리와 패딩을 빼서 계산하며, 결과의 최솟값은 0입니다 (박스의 내부 크기는 음수가 될 수 없기 때문입니다).

크기 조정 속성의 사용값은, 예를 들어 getComputedStyle()을 통해 노출되는 경우에도 테두리 박스를 가리킵니다.

테스트

box-sizing의 영향을 받는 값에는 원시 <length-percentage> 값과 fit-content() [css-sizing-4] 같은 함수 표기법에서 사용되는 값이 모두 포함됩니다. 반면, auto 및 min-content 같은 비정량적 값은 (달리 명시하지 않는 한) box-sizing 속성의 영향을 받지 않습니다.

예를 들어 다음 속성은 박스의 콘텐츠 박스 크기를 100px로 설정하며, 테두리 박스 크기는 120px로 계산됩니다:

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

반면 border-box로 변경하면, 테두리 박스가 100px로 설정되고, 콘텐츠 박스 크기는 80px로 계산됩니다:

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

내부 크기는 0보다 작을 수 없으므로, padding + border가 지정된 테두리 박스 크기보다 크면 박스는 결과적으로 지정한 크기보다 커집니다. 이 경우 콘텐츠 박스 크기의 최솟값은 0px가 되므로 테두리 박스 크기는 120px가 됩니다. 이는 테두리 박스에 width: 100px가 지정되어 있어도 마찬가지입니다:

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

이 예제에서는 box-sizing을 사용하여 div 컨테이너 내부의 고정 크기 테두리를 가진 두 div를 가로로 균등하게 나눕니다. 그렇지 않으면 추가 마크업이 필요합니다.

예제 CSS:

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

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

예제 HTML 조각:

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

예제 CSS 및 HTML의 시연:

이 div는 왼쪽 절반을 차지해야 합니다.

이 div는 오른쪽 절반을 차지해야 합니다.

위의 두 div는 나란히 표시되어야 하며, 각각 (테두리를 포함하여) 컨테이너 콘텐츠 너비의 50%를 차지해야 합니다. 대신 하나가 다른 하나의 위에 쌓여 표시된다면 브라우저가 box-sizing을 지원하지 않는 것입니다.

참고: 다음과 같은 일부 HTML 요소는 button 기본값으로 border-box 동작을 사용합니다. 어떤 요소가 이러한 동작을 갖는지에 대한 자세한 내용은 HTML을 참조하십시오.

레거시 CSS 명세에서는 너비, 높이, 최소(min) 너비, 최소(min) 높이, 최대(max) 너비 및 최대(max) 높이라는 용어가 달리 명시되지 않는 한 일반적으로 박스의 내부 크기 (콘텐츠 박스 크기)를 가리킵니다.

시각적 서식 모델 세부 정보 절의 이러한 용어를 명확히 구분하려면 CSS 사용자 인터페이스 3 § 3.1 박스 모델 변경: box-sizing 속성을 참조하십시오. 이는 [CSS2]에 대한 것입니다.

모호함을 피하기 위해 명세 작성자는 width 또는 height 같은 용어를 추가 수식 없이 모호하게 사용하는 것을 피해야 하며, 각 경우에 적절하게 내부 크기, 외부 크기, 테두리 박스의 크기, 크기 조정 속성의 계산값 등을 명시적으로 참조하고 링크해야 합니다.

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

이름:	column-width
새로운 값:	<box-size>
계산값:	지정된 대로이며, <length-percentage> 값은 계산됨
애니메이션 유형:	계산값 유형에 따름

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

stretch: 최적의 열 너비를 다중 열 컨테이너의 늘림 맞춤 인라인 크기로 지정합니다.
min-content: 최적의 열 너비를 다중 열 컨테이너 콘텐츠의 min-content 인라인 크기로 지정합니다.
max-content: 최적의 열 너비를 다중 열 컨테이너 콘텐츠의 max-content 인라인 크기로 지정합니다.
fit-content: 최적의 열 너비를 다음과 같이 지정합니다. min(max-content 인라인 크기, max(min-content 인라인 크기, 늘림 맞춤 인라인 크기)).

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

4. 외재적 크기 결정

외재적 크기 조정은 콘텐츠와 관계없이 요소의 컨텍스트를 기준으로 크기를 결정합니다.

4.1. 백분율 크기 조정

백분율은 박스의 컨테이닝 블록을 기준으로 박스 크기를 지정합니다.

예를 들어 다음 마크업에서:

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

<figure>의 높이는 30em이 됩니다. = <article>의 확정 60em 높이의 50%
<img>의 높이는 15em이 됩니다. = <figure> 높이의 50% (이 높이는 자체적으로 확정입니다. 이는 확정 길이를 기준으로 해석된 백분율이기 때문입니다)

콘텐츠 크기에 따라 컨테이닝 블록의 크기가 결정되는 경우 백분율을 해석하는 방법에 대한 자세한 내용은 § 5.2.1 백분율 크기 박스의 내재적 기여분을 참조하십시오.

테스트

4.2. 늘림 맞춤 크기 조정: 컨테이닝 블록 채우기

늘림 맞춤 크기 조정은 min-height/min-width/max-height/max-width가 부과하는 제약을 준수하면서 박스의 사용 크기를 그 주 박스의 외부 크기가 가능한 한 컨테이닝 블록을 채우도록 하는 데 필요한 길이로 설정하려고 합니다.

백분율 크기가 확정 값으로 해석될 수 있는 축에서 사용하는 경우

auto 여백을 0으로 취급하여 여백 박스가 컨테이닝 블록을 정확히 채우도록 크기를 정합니다. (이렇게 했을 때 내부 크기가 음수가 된다면, 대신 내부 크기가 0이 되도록 여백 박스의 크기를 정합니다.)

독립 서식 컨텍스트를 형성하는 흐름 내 블록 레벨 박스에서는, 컨테이닝 블록의 인라인 크기 대신 라인 박스에 사용할 수 있는 공간 (즉, 플로트를 제외한 공간)을 사용합니다.

흐름 내 블록 레벨 박스에서 블록 축 크기를 해석할 때: 백분율이 기준으로 삼는 조상 요소에 블록 시작 테두리 또는 패딩이 없고 독립 서식 컨텍스트도 아니라면, 이 크기를 계산할 때 요소의 블록 시작 여백을 0으로 취급합니다. 블록 끝 여백에 대해서도 이와 유사하게 동일하게 처리합니다.

참고: 이는 여백이 부모의 여백과 상쇄되는 효과를 모방합니다. 실제로 여백 자체를 억제하는 것은 아니므로, 요소가 실제로 부모와 상쇄되는 것을 어떤 이유로든 막는 경우 늘림 맞춤 크기는 부모에 완벽히 들어맞기에는 실제로 너무 클 수 있습니다.

그 밖의 경우

선호 크기 속성에서는 auto처럼 동작합니다. 최소 크기 속성에서는 0처럼 동작합니다. 최대 크기 속성에서는 none처럼 동작합니다.

예를 들어 두 개의 블록 박스를 나타내는 다음 HTML이 있다고 가정합니다:

<div class="parent">
  <div class="child">텍스트</div>
</div>

다음 경우, 자식 박스의 외부 높이는 부모 박스의 높이(200px)와 정확히 일치하지만, 그 내부 높이는 여백을 고려하여 20px 더 작습니다.

.parent { height: 200px; border: solid; }
.child { height: stretch; margin: 10px; }

반면 이 경우에는 자식의 여백이 부모와 상쇄된다고 가정할 수 있으므로 내부 박스는 높이 200px가 되어 부모를 정확히 채웁니다.

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

(실제로 위쪽 여백은 상쇄되지만 아래쪽 여백은 상쇄되지 않습니다. 이는 auto가 아닌 높이를 가진 부모의 아래쪽 여백과 박스의 아래쪽 여백이 인접하지 않기 때문입니다. CSS 2 § 8.3.1 여백 상쇄를 참조하십시오. 다행히 넘쳐 나온 아래쪽 여백은 시각적인 효과가 없습니다.)

마찬가지로 width: stretch는 박스가 컨테이너를 채우게 하며, 10px 여백 때문에 "추가 텍스트"의 너비보다 20px 더 좁아집니다:

<div class="parent">
  <div class="child">텍스트</div>
</div>
추가 텍스트

.parent { float: left; margin: 0; }
.child { width: stretch; margin: 10px; }

반면 이 예제에서는 컨테이너의 높이가 미확정이므로, 자식의 백분율 높이는 auto처럼 동작하게 됩니다. 따라서 height: stretch도 마찬가지로 auto처럼 동작합니다.

.parent { height: auto; margin: 0; }
.child { height: stretch; margin: 10px; }

테스트

참고: 늘림 맞춤 크기는 일반적으로, 그러나 항상 그런 것은 아니며, stretch 자기 정렬과 같습니다. 예를 들어 여러 줄 플렉스 레이아웃에서는 늘림 맞춤 크기가 컨테이닝 블록을 직접 기준으로 해석되고 그 크기를 라인의 교차 크기에 기여합니다. 반면 stretch는 최종적으로 라인의 교차 크기를 기준으로 해석되기 전에 fit-content 크기를 기여합니다.

5. 내재적 크기 결정

내재적 크기 조정은 컨텍스트와 관계없이 요소의 콘텐츠를 기준으로 크기를 결정합니다.

테스트

5.1. 내재적 크기

각 축에서 박스의 min-content 크기는, 해당 축에서 auto 선호 크기가 주어지고 (그리고 해당 축의 최소 또는 최대 크기가 없으며) 컨테이닝 블록의 해당 축 크기가 0인 플로트였다면 갖게 될 크기입니다. (다시 말해 “shrink-to-fit” 방식으로 크기를 정할 때 갖는 최소 크기입니다.)

각 축에서 박스의 max-content 크기는, 해당 축에서 auto 선호 크기가 주어지고 (그리고 해당 축의 최소 또는 최대 크기가 없으며) 컨테이닝 블록의 해당 축 크기가 무한대인 플로트였다면 갖게 될 크기입니다. (다시 말해 “shrink-to-fit” 방식으로 크기를 정할 때 갖는 최대 크기입니다.)

min-content 크기와 max-content 크기를 통틀어 내재적 크기라고 합니다.

참고: 박스에 선호 종횡비가 있으면 반대 치수의 크기 제약이 전달되어 고려 중인 치수의 auto 크기에 영향을 줄 수 있습니다. CSS2§10을 참조하십시오.

이 명세는 플로트의 크기를 결정하는 방법을 정의하지 않습니다. [CSS2]를 참조하십시오. 그러나 자연 크기가 없는 대체 요소의 내재적 크기는 아래에서 정의합니다:

퇴화하지 않은 선호 종횡비가 있는 경우:

min-content 크기에는 0을 사용합니다.

max-content 크기의 경우:

인라인 축에서 사용 가능 공간이 확정이면, 해당 크기에 대한 늘림 맞춤을 인라인 크기로 사용하고 종횡비를 사용하여 블록 크기를 계산합니다.
그렇지 않고 박스의 min-width 또는 min-height의 계산값이 <length>이면, 해당 크기를 사용하고 종횡비를 사용하여 다른 치수를 계산합니다. 두 치수 모두 <length> 최솟값을 갖는다면 전체 크기가 더 크게 되는 쪽을 선택합니다.

참고: 이전에는 이 경우를 박스의 최소 크기 대신 300x150 기본 크기에서 계산했습니다. 이 동작이 더 낫고 Web 호환성도 있을 것으로 판단하지만, 문제가 있다면 CSSWG에 피드백을 보내 주십시오.
테스트
- replaced-fractional-height-from-aspect-ratio-2.html (실시간 테스트) (소스)
그 밖의 경우 초기 컨테이닝 블록의 해당 치수와 일치하는 인라인 크기를 사용하고 종횡비를 사용하여 다른 치수를 계산합니다.

선호 종횡비가 없는 경우:

min-content 크기와 max-content 크기 모두에 대해:

해당 치수의 최소 크기 (min-width/min-height)의 계산값이 <length>이면 해당 크기를 사용합니다.

참고: 작성자가 제어할 수 있는 이 동작은 최소 크기 속성에 새로 추가된 auto 값으로 가능해졌습니다. 이 동작이 더 낫다고 판단하지만 아직 Web 호환성이 있는지는 명확하지 않으므로, 문제가 있다면 CSSWG에 피드백을 보내 주십시오.
그 밖의 경우 필요에 따라 너비에는 300px, 높이에는 150px를 사용합니다.

참고: 이는 종횡비를 의미하지 않습니다.

height 또는 width가 auto처럼 동작하는 블록 레벨 또는 인라인 레벨 대체 요소는 사실상 그 max-content 크기를 사용하도록 정의되어 있으므로 (CSS2§10.3.2), 이 명세는 height와 width가 모두 auto처럼 동작하는 대체 요소라는 미정의 경우에도 위 규칙을 적용합니다.

참고: 이 명세는 플로트의 크기를 결정하는 방법을 정의하지 않습니다. 자세한 내용은 [CSS2], 해당 디스플레이 유형과 관련된 CSS 명세, 그리고/또는 기존 구현을 참조하십시오. 향후 명세에서 이를 상세히 정의하여 현재의 CSS2 “정의”를 대체할 것입니다.

HTML의 <input type=text> 및 <textarea> 요소 같은 텍스트 입력 컨트롤의 auto 크기는 일반적으로 고정 크기이지만, 이러한 요소의 콘텐츠를 사용하여 비대체 블록 컨테이너와 마찬가지로 콘텐츠 기반 내재적 크기를 결정할 수 있습니다. 따라서 크기 조정 속성의 min-content 및 max-content 키워드는 값을 박스 내부의 텍스트로 렌더링하는 폼 컨트롤에 대해 콘텐츠 기반 크기를 나타내며, 일반적인 비대체 요소와 유사하게 해당 컨트롤이 표시되는 콘텐츠에 맞게 크기를 조정할 수 있도록 합니다.

이 경우 콘텐츠는 입력 컨트롤의 값으로 정의됩니다 (textarea의 경우 원시 값, input의 경우 값). 이 값은 더 사람이 읽기 쉬운 형식 및/또는 현지화된 표시 형식으로 변환될 수 있으며, 그런 다음 입력 컨트롤의 자식 텍스트 시퀀스로 취급됩니다. 소프트 줄 바꿈 기회는 입력 컨트롤이 실제로 줄 바꿈을 허용하는 위치에서만 허용됩니다 (CSS 속성이나 기타 UA 내부 제약에 의해 결정되는지와 무관합니다). 입력 컨트롤에 값 표시 영역 위에 겹쳐 표시하도록 지정된 플레이스홀더 텍스트가 있다면, 해당 텍스트가 현재 표시되는지 여부와 관계없이 콘텐츠 기반 크기를 계산할 때 그 텍스트도 측정됩니다. (따라서 입력 컨트롤의 콘텐츠 기반 내재적 크기는 플레이스홀더 텍스트에 맞는 크기와 값에 맞는 크기 중 더 큰 값입니다.)

UA는 캐럿을 위한 충분한 공간을 확보하고 그 밖에도 폼 컨트롤의 사용성을 유지하기 위해, 폼 컨트롤의 min-content 및 max-content 크기에 최솟값 (예: 폭이 0인 문자 하나를 포함하는 데 필요한 크기, 또는 터치 대상의 사용 가능한 최소 크기)을 강제할 수 있습니다.

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

테스트

5.2. 내재적 기여분

각 축에서 박스의 min-content 기여분/max-content 기여분은 해당 박스만 포함하는 가상의 auto 크기 플로트의 콘텐츠 박스 크기이며, 이 가상 플로트의 컨테이닝 블록 크기를 각각 0/무한대로 했을 때의 값입니다.

참고: 이 명세는 이러한 크기를 정확히 결정하는 방법을 정의하지 않습니다. 자세한 내용은 [CSS2], 해당 디스플레이 유형과 관련된 CSS 명세, 백분율 처리 규칙(아래), 그리고/또는 기존 구현을 참조하십시오.

테스트

이를 위해 stretch 자기 정렬 및 늘림 맞춤 크기 조정은 (외재적으로 해석할 수 있는 경우) 해석 가능한 백분율과 동일한 방식으로 확정된 것으로 간주합니다.

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

때로는 백분율 크기 박스의 컨테이닝 블록 크기가 박스 자체의 내재적 크기 기여분에 의존하여 순환 종속성이 생깁니다. 이러한 박스의 내재적 크기 기여분을 계산할 때 (콘텐츠 기반 자동 최소 크기에 대한 계산을 포함하여), 내재적 크기 기여분과 같은 축의 크기를 기준으로 해석되는 백분율 값 (순환 백분율 크기)은 특별히 해석됩니다:

박스가 비대체라면, 최대 크기 속성 또는 선호 크기 속성 (width/max-width/height/max-height)의 값이 백분율을 포함하는 표현식 (예: 10% 또는 calc(10px + 0%))으로 지정되고 그 백분율이 순환이라면, 그 속성의 전체 값은 박스의 내재적 크기 기여분을 계산하는 목적으로만 해당 속성의 초깃값으로 취급합니다. 예를 들어 width: calc(20px + 50%)인 박스가 있다면, 그 max-content 기여분은 width가 auto인 것처럼 계산됩니다. (하지만 박스 자체의 실제 크기를 정할 때는 백분율을 평소와 같이 적용합니다. 아래를 참조하십시오.)
마찬가지로 박스가 대체라면, 최대 크기 속성 또는 선호 크기 속성의 값이 순환하는 백분율을 포함하는 표현식으로 지정된 경우, 그 속성의 전체 값은 박스의 max-content 기여분을 계산하는 목적으로만 해당 속성의 초깃값으로 취급합니다.
박스가 대체라면, 최대 크기 속성 또는 선호 크기 속성 (width/max-width/height/max-height)의 값에 있는 순환 백분율은 해당 축의 min-content 기여분을 계산할 때 0을 기준으로 해석됩니다. (HTML에서 이 규칙이 적용되는 요소 목록은 § 5.2.2 압축 가능한 대체 요소를 참조하십시오.) 박스에 선호 종횡비도 있다면, 이 min-content 기여분의 최솟값은 반대 축의 <length-percentage> 최소 크기가 선호 종횡비를 통해 전달된 값입니다. 이때 해당 백분율은 0을 기준으로 해석합니다.
전달하기 전에 전달되는 백분율을 0이 아니라 컨테이닝 블록을 기준으로 해석해야 할까요? 논의를 참조하십시오.

UA는 특정 UI 요소가 계속 표시되도록 하는 등의 UI 고려 사항을 기반으로 min-content 기여분에 추가적인 최솟값을 적용할 수 있습니다 (예: select의 드롭다운 화살표).

참고: min-content 기여분은 언제나 그렇듯 자체 축의 최소 크기에 의해서도 최솟값이 적용됩니다.

이 규칙은 콘텐츠 기반 자동 최소 크기 또는 그에 대응하는 크기 기여분을 계산할 때도 적용되며, 확정 “지정 크기 제안”을 산출합니다.
테스트
- intrinsic-percent-replaced-028.html (실시간 테스트) (소스)
예를 들어 width: calc(50% + 50px)가 지정된 input은 50px에 수평 여백/테두리/패딩을 더한 min-content 기여분을 갖습니다.
최소 크기 속성과 여백 및 패딩 (그리고 거터)의 경우, 내재적 크기 기여분을 결정할 때 순환 백분율은 0을 기준으로 해석됩니다.

테스트

순환 백분율 내재적 크기 기여분 규칙 요약(위)
요소 유형	대체		비대체
기여분 유형	min-content	max-content	min-content	max-content
최소 크기 & 여백/패딩	0ᵈ	0ᵈ	0ᵈ	0ᵈ
최대 & 선호 크기	0ᶜ	초깃값ᵇ	초깃값ᵃ	초깃값ᵃ

그런 다음 달리 명시하지 않는 한, 컨테이닝 블록의 콘텐츠의 사용 크기와 위치를 계산할 때:

순환 종속성이 컨테이닝 블록에서 최소 크기가 아닌 블록 축 크기로 인해 발생했고 (즉, 대부분의 레이아웃 모드에서 block-size 또는 max-block-size, 또는 플렉스 레이아웃에서 flex-basis) 이로 인해 해당 크기가 콘텐츠 크기에 의존하게 된다면, 박스의 백분율은 해석되지 않고 대신 auto처럼 동작합니다.

참고: 그리드 항목은 양축에서, 플렉스 항목은 주축에서, 그리고 플렉스 항목의 자식은 양축에서 이 경우에도 백분율이 해석되도록 허용합니다.
그 밖의 경우 백분율은 컨테이닝 블록의 크기를 기준으로 해석됩니다. (컨테이닝 블록의 크기는 그 결과로 얻은 박스 크기를 기반으로 다시 해석되지 않으므로, 콘텐츠가 컨테이닝 블록을 넘치거나 덜 채울 수 있습니다.)

참고: 이 규칙은 CSS2§10.2, CSS2§8.3, 그리고 CSS2§8.4에서 이전에 정의되지 않았던 이 순환 경우의 동작을 지정합니다. 또한 CSS2§10.5의 동작은 CSS2에 기술되지 않은 레이아웃 모드 (예: 플렉스 레이아웃)에 대해서는 각각의 명세에 의해 대체된다는 점에도 유의하십시오.

예를 들어 다음 마크업에서:

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

외부 <article>의 너비를 계산할 때 내부 <aside>는 width: auto처럼 동작하므로 <article>은 긴 단어의 너비에 맞게 자신의 너비를 설정합니다. 하지만 <article>의 너비는 "실제" 레이아웃에 의존하지 않았으므로 <aside>를 해석할 때 확정으로 취급되며, 그 너비는 <article> 너비의 절반으로 해석됩니다.

이 예제에서는,

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

블록 레벨 요소의 백분율 블록 크기 (이 경우 height)는 콘텐츠 크기로 결정되는 컨테이닝 블록 내부에서 해석되지 않도록 정의되어 있으므로, <aside>의 백분율 높이는 무시됩니다. 즉, auto가 지정된 것과 정확히 동일하게 동작합니다.

min-height가 내재적인 경우에도 백분율이 확정 height를 기준으로 계속 해석되도록 할지는 미해결 이슈입니다. (CSS2에는 "높이가 콘텐츠에 의존함"에 대한 일반적인 문장이 있으며, 기술적으로는 이 경우가 이에 해당합니다. 다만 CSS2에는 min-height에 대한 콘텐츠 의존 키워드가 없었습니다. 이것은 새로운 기능이므로, 이와 다른 동작을 허용할 수 있다고 판단합니다.)

다음 예제는 블록 축 백분율이 콘텐츠에 따라 크기가 결정되는 컨테이닝 블록을 기준으로 어떻게 해석되는지를 보여 줍니다.

<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>의 초기 높이는 지정된 대로 100px이며, 이 경우 <aside>가 백분율을 해석하면 높이 50px가 됩니다. 그러나 min-height를 계산해야 하므로 이를 height 대신 대입합니다. 그러면 <aside>의 백분율이 auto처럼 동작하므로 <aside>의 최종 높이는 150px가 됩니다. 따라서 콘텐츠의 전체 높이는 180px입니다. 이는 지정된 높이 100px보다 크므로 <article>의 높이는 180px로 조정됩니다.

그런 다음 백분율은 원래 (100px) 높이를 기준으로 해석될 수 있었으므로 이제 180px 높이를 기준으로 해석되고, 따라서 <aside>의 최종 높이는 90px가 됩니다.

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

이 경우 컨테이닝 블록의 높이가 auto이므로 (따라서 그 콘텐츠의 크기에 의존하므로) <aside>의 백분율은 일반적으로 해석되지 않습니다. 대신 auto처럼 동작하여 <aside>의 높이가 150px, <article>의 초기 높이가 180px가 됩니다. min-height는 이를 변경하지 않습니다. height: min-content;는 height: auto;와 유사하게 동작하여 동일한 크기를 산출합니다.

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

이는 첫 번째 코드 블록의 변형이며 비슷한 과정을 따릅니다. <aside>는 처음에는 높이 200px로 계산되려고 합니다 (100px 컨테이닝 블록 높이의 200%). min-height의 효과를 계산할 때 백분율은 auto처럼 동작하여 높이가 150px가 되며, 컨테이닝 블록의 전체 min-content 높이는 180px가 됩니다. 이는 100px보다 크므로 <article>은 180px로 제한되고, 백분율은 이 새로운 높이를 기준으로 해석되며, <aside>의 최종 높이는 360px가 되어 <article>을 넘쳐 나옵니다.

5.2.2. 압축 가능한 대체 요소

HTML§14.4 [HTML]에 나열된 대체 요소 외에도, 다음 HTML 요소는 위의 백분율 크기 대체 요소 규칙을 적용하기 위한 목적으로 대체 요소로 간주되며, 그 width/height 또는 max-width/max-height가 순환 백분율 크기로 표현된 경우 min-content 기여분을 압축할 수 있습니다:

input에서 "버튼과 유사"하지 않은 모든 type. 이는 UA에 따라 달라질 수 있습니다.

특정 UA에서 어떤 유형이 실제 콘텐츠를 포함하고 그 콘텐츠가 요소의 레이아웃을 결정할 수 있는 button 요소와 유사하게 표시된다면 해당 유형은 "버튼과 유사"한 것입니다. 대부분의 UA에서 "button", "reset", "submit" 및 "color" 유형은 버튼과 유사합니다. 일부 UA에서는 "file" 유형도 텍스트 입력(축소 가능)과 버튼(버튼과 유사하므로 축소 불가)의 조합으로 표시될 때 부분적으로 버튼과 유사합니다.
select, textarea, progress, meter, marquee.

이를 max-width/height에 적용하는 Web 호환성 및 구현 진행 상황은 이슈 6348에서 추적합니다. [이슈 #6348]

변경 사항

최근 변경 사항

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

fit-content()를 레벨 4로 이동하고, fit-content와 stretch를 레벨 4에서 가져왔습니다. (이슈 10601)
[CSS-LOGICAL-1]에서 흐름 상대 크기 조정 속성의 정의를 가져왔습니다. (이슈 10189)
늘림 맞춤 크기 조정의 세부 사항을 명확히 했습니다. (이슈 11044, 이슈 11006, 이슈 11076, 이슈 4028, 이슈 13260, 이슈 11489)
크기 조정 값을 통합하기 위해 <box-size> 문법 생성 규칙을 도입했습니다. (이슈 13478)
선호 종횡비를 가진 대체 요소의 내재적 크기를 찾는 규칙은 종횡비가 비퇴화인 경우에만 적용된다는 점을 명확히 했습니다. (이슈 12612)
aspect-ratio [css-sizing-4]가 해결된 값에서 auto 최소 크기를 auto로 유지하도록 정의했습니다. (이슈 11716)
max-content 크기와 max-content 기여분의 최솟값이 min-content 크기/min-content 기여분으로 제한된다는 점을 명확히 했습니다. (이슈 12076)
내재적 크기 기여분 계산에서 순환 백분율을 처리하는 방법을 명확히 했습니다. (이슈 6822)
내재적 크기 계산에서는 stretch 크기가 백분율과 유사하게 처리된다는 점을 명확히 했습니다. (이슈 10619)
내재적 크기 키워드의 비확정성을 명확히 했습니다. (이슈 7206)
크기 조정 속성에 논리적 속성 그룹을 추가했습니다. (이슈 2822)
Web Platform Tests 적용 범위를 추가했습니다.
그 밖의 여러 사소한 편집상 수정 및 개선을 수행했습니다.

2020년 12월 18일 작업 초안 이후의 변경 사항은 다음과 같습니다:

contain-intrinsic-size 값에서 auto가 다른 값과 결합될 때 파싱이 모호하지 않도록 값의 순서를 수정했습니다. (이슈 6391)
contain-intrinsic-size: auto에 대해 마지막으로 기억된 크기가 없어도 되는 요소를 명확히 했습니다. (이슈 6220)
contain-intrinsic-size: auto를 content-visibility가 auto인 경우로 제한했습니다. (이슈 6308)

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 레벨 3에서 가져왔습니다.
순환 백분율의 처리를 더 엄밀하게 명시했습니다. (#1132, #2384, #2297, #2674)
블록 축에 적용되는 *-content 값이 속성의 초기값으로 계산되지 않고, 해당 속성의 초기값처럼 “동작”하도록 변경했습니다. (#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 레벨 2 이후 추가 사항

다양한 자동 및 콘텐츠 기반 크기 조정 알고리즘에 훨씬 더 상세한 내용을 추가한 것 외에도, [CSS2] 이후 다음과 같은 새로운 기능이 추가되었습니다:

box-sizing 속성(원래 [CSS-UI-3]에서 정의된 후 이곳으로 이동했습니다).
stretch, 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) 역시 이미지와 같은 대체 요소가 자연 크기 및/또는 종횡비를 노출하는 범위를 제외하면 외부 페이지에 크기 조정 정보를 노출하지 않습니다.

보안 고려 사항

이 명세에 대해 새로운 보안 고려 사항은 보고되지 않았습니다.

적합성

문서 규칙

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

명시적으로 비규범적이라고 표시된 절, 예제 및 참고를 제외한 이 명세의 모든 텍스트는 규범적입니다. [RFC2119]

이 명세의 예제는 “예를 들어”라는 단어로 시작하거나 다음과 같이 class="example"을 사용하여 규범적 텍스트와 구분됩니다:

정보 제공용 참고는 “참고”라는 단어로 시작하며 다음과 같이 class="note"를 사용하여 규범적 텍스트와 구분됩니다:

권고 사항은 특별한 주의를 환기하도록 스타일이 적용된 규범적 절이며 다음과 같이 <strong class="advisement">을 사용하여 다른 규범적 텍스트와 구분됩니다: UA는 접근 가능한 대안을 제공해야 합니다.

적합성 클래스

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

이 모듈에서 정의한 구문을 사용하는 모든 선언이 일반 CSS 문법과 이 모듈에서 정의한 각 기능의 개별 문법에 따라 유효하다면 스타일 시트는 이 명세에 적합합니다.

렌더러는 적절한 명세에서 정의한 대로 스타일 시트를 해석하는 것에 더해, 이 명세에서 정의한 모든 기능을 올바르게 파싱하고 그에 따라 문서를 렌더링하여 지원하면 이 명세에 적합합니다. 그러나 장치의 한계 때문에 UA가 문서를 올바르게 렌더링할 수 없다고 해서 UA가 부적합한 것은 아닙니다. (예를 들어 UA는 흑백 모니터에서 색상을 렌더링할 필요가 없습니다.)

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

부분 구현

작성자가 순방향 호환 파싱 규칙을 활용하여 대체 값을 지정할 수 있도록 CSS 렌더러는 사용 가능한 수준의 지원이 없는 모든 at-rule, 속성, 속성 값, 키워드 및 기타 구문 구조를 유효하지 않은 것으로 처리해야 하며(그리고 적절히 무시해야 합니다). 특히 사용자 에이전트는 하나의 다중 값 속성 선언에서 지원되지 않는 구성 요소 값만 선택적으로 무시하고 지원되는 값을 적용해서는 안 됩니다. 어떤 값이라도 유효하지 않은 것으로 간주되면 (지원되지 않는 값은 반드시 그렇게 간주되어야 합니다), CSS는 전체 선언을 무시하도록 요구합니다.

불안정 기능 및 독점 기능의 구현

비실험적 구현

명세가 후보 권고안 단계에 도달하면 비실험적 구현이 가능하며, 구현자는 명세에 따라 올바르게 구현되었음을 입증할 수 있는 모든 CR 수준 기능을 접두사 없이 구현하여 공개하는 것이 좋습니다.

구현 간 CSS의 상호 운용성을 확립하고 유지하기 위해 CSS 워킹 그룹은 비실험적 CSS 렌더러가 어떤 CSS 기능의 접두사 없는 구현을 공개하기 전에 W3C에 구현 보고서 (필요한 경우 해당 구현 보고서에 사용한 테스트 케이스 포함)를 제출할 것을 요청합니다. W3C에 제출된 테스트 케이스는 CSS 워킹 그룹의 검토와 수정 대상이 됩니다.

테스트 케이스 및 구현 보고서를 제출하는 방법에 대한 자세한 정보는 CSS 워킹 그룹 웹사이트의 https://www.w3.org/Style/CSS/Test/에서 확인할 수 있습니다. 질문은 public-css-testsuite@w3.org 메일링 리스트로 보내 주십시오.

이름	값	초기값	적용 대상	상속	백분율	애니메이션 유형	정규 순서	계산값	논리적 속성 그룹
block-size	auto \| <box-size>	auto	비대체 인라인을 제외한 모든 요소	아니요	컨테이닝 블록의 width/height에 상대적	계산값 유형에 따르며 fit-content() 내부에도 재귀적으로 적용	문법에 따름	지정된 대로이며 <length-percentage> 값은 계산됨	size
box-sizing	content-box \| border-box	content-box	width 또는 height를 허용하는 모든 요소	아니요	해당 없음	불연속	문법에 따름	지정된 키워드
height	auto \| <box-size>	auto	비대체 인라인을 제외한 모든 요소	아니요	컨테이닝 블록의 width/height에 상대적	계산값 유형에 따르며 fit-content() 내부에도 재귀적으로 적용	문법에 따름	지정된 대로이며 <length-percentage> 값은 계산됨	size
inline-size	auto \| <box-size>	auto	비대체 인라인을 제외한 모든 요소	아니요	컨테이닝 블록의 width/height에 상대적	계산값 유형에 따르며 fit-content() 내부에도 재귀적으로 적용	문법에 따름	지정된 대로이며 <length-percentage> 값은 계산됨	size
max-block-size	none \| <box-size>	none	width 또는 height를 허용하는 모든 요소	아니요	컨테이닝 블록의 width/height에 상대적	계산값에 따르며 fit-content() 내부에도 재귀적으로 적용	문법에 따름	지정된 대로이며 <length-percentage> 값은 계산됨	max-size
max-height	none \| <box-size>	none	width 또는 height를 허용하는 모든 요소	아니요	컨테이닝 블록의 width/height에 상대적	계산값에 따르며 fit-content() 내부에도 재귀적으로 적용	문법에 따름	지정된 대로이며 <length-percentage> 값은 계산됨	max-size
max-inline-size	none \| <box-size>	none	width 또는 height를 허용하는 모든 요소	아니요	컨테이닝 블록의 width/height에 상대적	계산값에 따르며 fit-content() 내부에도 재귀적으로 적용	문법에 따름	지정된 대로이며 <length-percentage> 값은 계산됨	max-size
max-width	none \| <box-size>	none	width 또는 height를 허용하는 모든 요소	아니요	컨테이닝 블록의 width/height에 상대적	계산값에 따르며 fit-content() 내부에도 재귀적으로 적용	문법에 따름	지정된 대로이며 <length-percentage> 값은 계산됨	max-size
min-block-size	auto \| <box-size>	auto	width 또는 height를 허용하는 모든 요소	아니요	컨테이닝 블록의 width/height에 상대적	계산값에 따르며 fit-content() 내부에도 재귀적으로 적용	문법에 따름	지정된 대로이며 <length-percentage> 값은 계산됨	min-size
min-height	auto \| <box-size>	auto	width 또는 height를 허용하는 모든 요소	아니요	컨테이닝 블록의 width/height에 상대적	계산값에 따르며 fit-content() 내부에도 재귀적으로 적용	문법에 따름	지정된 대로이며 <length-percentage> 값은 계산됨	min-size
min-inline-size	auto \| <box-size>	auto	width 또는 height를 허용하는 모든 요소	아니요	컨테이닝 블록의 width/height에 상대적	계산값에 따르며 fit-content() 내부에도 재귀적으로 적용	문법에 따름	지정된 대로이며 <length-percentage> 값은 계산됨	min-size
min-width	auto \| <box-size>	auto	width 또는 height를 허용하는 모든 요소	아니요	컨테이닝 블록의 width/height에 상대적	계산값에 따르며 fit-content() 내부에도 재귀적으로 적용	문법에 따름	지정된 대로이며 <length-percentage> 값은 계산됨	min-size
width	auto \| <box-size>	auto	비대체 인라인을 제외한 모든 요소	아니요	컨테이닝 블록의 width/height에 상대적	계산값 유형에 따르며 fit-content() 내부에도 재귀적으로 적용	문법에 따름	지정된 대로이며 <length-percentage> 값은 계산됨	size