calc-size()는 auto, min-content, fit-content와 같은 고유 크기 조절 키워드에 수학 연산을 실행하는 CSS 함수입니다. 필수: 계산이나 제약 조건으로 고유 크기를 수정해야 하는 경우에만 calc-size()를 사용하세요. 간단한 키워드 기반 애니메이션 (예: 0에서 auto)의 경우 interpolate-size: allow-keywords를 사용해야 합니다.
구현 단계
- 내재적 기준 파악: 계산의 기준이 될 내재적 키워드 (
auto,min-content등)를 결정합니다. - 제약 조건 정의: 두 번째 인수 내에서
clamp(),min(),max()와 같은 CSS 수학 함수를 사용하여 고유 크기에 디자인 제약 조건을 적용합니다. - 필수: 대체 제공: 지원되지 않는 브라우저에서 레이아웃이 계속 작동하도록 하려면 항상
calc-size()를 사용하는 속성 바로 앞에 표준 크기 키워드 또는 길이를 선언하세요. - 논리적 속성 적용: 기본적으로
inline-size또는block-size와 같은 논리적 속성을 사용하여 계산이 문서의 쓰기 모드를 따르도록 합니다. - 선택사항: 점진적 개선: 복잡한 레이아웃 로직이나 애니메이션을
@supports (inline-size: calc-size(auto, size + 0px))블록으로 래핑하여 지원되는 브라우저에만 고급 기능을 제공합니다.
기본 문법
/* calc-size(<calc-size-basis>, <calc-sum>) — mathematical operations on intrinsic sizing keywords */
.element {
/* MANDATORY: Always provide a fallback for browsers that do not support calc-size() */
inline-size: min-content;
/* DO: Use calc-size to modify an intrinsic basis with a calculation or function */
inline-size: calc-size(min-content, size + 2rem);
}
유효한 기준 인수 (<calc-size-basis>)
첫 번째 인수는 계산의 '기본' 크기를 정의합니다.
표준 키워드:
auto: 요소의 기본 크기입니다.min-content: 요소가 오버플로 없이 취할 수 있는 가장 작은 크기입니다.max-content: 요소가 한 줄에 모든 콘텐츠를 맞추는 데 필요한 크기입니다.fit-content:clamp(min-content, auto, max-content)과 동일합니다.content:calc-size()가flex-basis속성 내에서 사용되는 경우에만 유효합니다.
특수 인수:
any: 특정 내장 유형을 알 수 없거나 계산을 중첩할 때 사용되는 일반적인 기준입니다.- 중첩
calc-size(): 다단계 또는 조건부 계산을 허용합니다. <calc-sum>: 특정 길이, 백분율 또는 수학 표현식(예:100px또는20%). 고정 값이 기준으로 사용되는 경우size키워드는 계속 사용할 수 있지만 두 번째 인수 내에서만 사용할 수 있으며 해당 기준의 확인된 값을 나타냅니다.
필수: size 키워드는 첫 번째 인수 (<calc-size-basis>) 자체 내에서 유효하지 않습니다. 두 번째 인수 (<calc-sum>) 내에서 basis를 다시 참조하기 위해서만 존재하는 로컬 변수입니다.
유효한 계산 인수 (<calc-sum>)
두 번째 인수는 수학 표현식입니다.
- 일반적으로
size키워드를 사용하여 기준 값을 참조합니다. size키워드는 기술적으로 선택사항이지만 생략하면 계산이 고정 값으로 확인되어 기준을 완전히 무시합니다.- 표준 수학 연산자 (
+,-,*,/)를 포함할 수 있습니다. clamp(),min(),max(),round()와 같은 CSS 수학 함수를 포함할 수 있습니다.- 필수:
calc-size()는 각 계산에서 단일 고유 크기 값 (기준)만 허용합니다. 동일한calc-size()호출에서 고유 크기 조절 키워드를 혼합할 수 없습니다.
사용 사례
고유 크기로/에서 애니메이션 적용
기본적으로 브라우저는 길이 (예: 0px)와 고유 키워드 (예: auto) 간에 보간할 수 없습니다. 키워드를 calc-size()로 래핑하면 보간 가능한 값이 됩니다.
애니메이션에 적합한 도구 선택
필수:
interpolate-size: allow-keywords사용: 수학적 수정 없이 고유 크기 (예:height: 0에서height: auto)로 또는 고유 크기에서 간단한 애니메이션을 적용하는 경우 이는 간단한 키워드 보간에 필요한 접근 방식이며, 이상적으로는:root를 통해 전역적으로 적용해야 합니다.:root { /* Best practice: Enable keyword interpolation globally */ interpolate-size: allow-keywords; } .item { height: 0; transition: height 0.3s ease; } .item.open { /* Simple interpolation from 0 to auto now works without calc-size() */ height: auto; }calc-size()사용: 전환 중에 고유 크기에 대한 수학적 계산을 실행해야 하는 경우에만 사용합니다 (예: 패딩 추가 또는 크기 고정).
.accordion-content {
display: block;
overflow: hidden;
/* MANDATORY: Fallback value for closed state */
block-size: 0;
transition: block-size 0.3s ease-out;
}
.accordion-content.open {
/* MANDATORY: Fallback value for open state */
block-size: auto;
/*
DO: Use calc-size(auto, ...) to enable animation from 0 to the element's
intrinsic size while doing a calculation (in this case, adding a space of 2rem).
*/
block-size: calc-size(auto, size + 2rem);
}
필수: 두 개의 고유 크기 키워드 간의 보간은 직접 불가능합니다. 전환의 한쪽 끝은 길이 또는 백분율이어야 합니다.
사용자 모션 환경설정 존중
큰 레이아웃 영역의 크기를 변경하는 애니메이션은 전정 장애가 있는 사용자에게 특히 방해가 될 수 있습니다. 필수: prefers-reduced-motion 미디어 쿼리를 사용하여 필수적이지 않은 애니메이션을 단순화하거나 최소화함으로써 항상 사용자의 모션 환경설정을 존중합니다. 일반적인 전략으로는 모션을 완전히 사용 중지하거나, 지속 시간을 줄이거나, 레이아웃 변경을 미묘한 불투명도 전환으로 대체하는 것이 있습니다.
.accordion-content {
opacity: 0;
transition: block-size 0.3s ease, opacity 0.3s ease;
}
.accordion-content.open {
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.accordion-content {
/*
EXAMPLE: Replacing disruptive layout animations with a subtle fade-in.
Setting the block-size instantly and transitioning opacity
provides a clear state change without large-scale motion.
*/
transition: opacity 1.5s ease;
}
.accordion-content.open {
/* Jump the size instantly */
block-size: auto;
}
}
고유 크기에 제약 조건 적용
calc-size()를 min(), max(), clamp(), round()와 같은 CSS 수학 함수와 함께 사용하여 요소의 고유 크기가 디자인 경계 내에 유지되도록 할 수 있습니다.
.dynamic-container {
/* MANDATORY: Always provide a fallback for browsers that do not support calc-size() */
inline-size: fit-content;
/*
DO: Establish a dynamic size based on content, while:
1. Enforcing boundaries using CSS math functions (min, clamp, etc.)
2. Modifying the intrinsic size with fixed or relative offsets
*/
inline-size: calc-size(fit-content, min(size + var(--extra-space), var(--max-allowed)));
}
핵심 고려 사항
- 백분율 함정:
<calc-sum>내의 백분율은size키워드가 아닌 컨테이너 크기를 기준으로 확인됩니다. 예를 들어calc-size(auto, size + 10%)는 상위 요소 너비의 10% 를 요소의auto너비에 추가하므로 예기치 않은 결과나 오버플로가 발생할 수 있습니다. - 계산 요구사항: 필수: 간단한 애니메이션 (예:
0에서auto)에는calc-size()대신interpolate-size: allow-keywords를 사용합니다.calc-size()는 레이아웃에서 기본 요소에 대한 동적 수학적 조정이 필요한 경우에만 사용해야 합니다. - 성능 참고사항:
inline-size또는block-size와 같은 박스 모델 속성에 애니메이션을 적용하면 레이아웃 재계산이 트리거되어 비용이 많이 들 수 있습니다. 레이아웃이 아닌 대안이 충분하지 않은 레이아웃에 중요한 요소에는 주로calc-size()애니메이션을 사용합니다.
대체 전략
calc-size() 및 interpolate-size는 점진적 개선입니다. 이를 지원하지 않는 브라우저에서는 속성이 무시되고 레이아웃은 계속 작동하지만, 고유 키워드에 대한 애니메이션은 전환되지 않고 점프합니다. 항상 표준 키워드 또는 길이를 대체로 제공하세요.
.element {
/* Fallback for browsers that don't support calc-size() */
inline-size: fit-content;
/* Modern browsers will override the fallback */
inline-size: calc-size(fit-content, size + 2rem);
}
애니메이션 및 전환 대체
calc-size() 또는 interpolate-size를 지원하지 않는 브라우저에서는 고유 크기 조절 키워드가 포함된 전환이 보간되지 않습니다.
- 단계적 성능 저하: 기본 대체는 상태 간의 '즉각적인 전환'입니다 (예:
0에서auto로). 이는 레이아웃이 계속 작동하므로 허용되는 경우가 많습니다. - 향상된 환경:
@supports를 사용하여 부드러운 내장 애니메이션이 가능할 때만 의미가 있는 복잡한 레이아웃 로직이나 추가 스타일을 적용합니다. - JS 기반 측정 방지: JavaScript를 사용하여 요소를 측정하고 크기에 수동으로 애니메이션을 적용할 수 있지만, 이는 불필요한 경우가 많으며 레이아웃 스래싱을 유발할 수 있습니다. 네이티브 '즉시 이동'을 사용하는 것은 최신 웹 애플리케이션에 권장되는 대체 방법입니다.
애니메이션의 경우 대체 환경은 최종 크기로 즉시 전환됩니다. CSS 또는 JavaScript에서 지원을 감지하려면 다음 단계를 따르세요.
/* CSS Feature Detection */
@supports (inline-size: calc-size(auto, size + 0px)) {
.element {
/* Apply advanced logic only when supported */
}
}
/* JavaScript Feature Detection */
if (CSS.supports('inline-size', 'calc-size(auto, size + 0px)')) {
// Apply advanced sizing or animations
}