CSS calc() – 사용 방법 - 코딩에브리바디

`calc()`

calc()는 CSS 속성 값을 지정할 때 값으로 사용할 수식의 계산(calculation)을 수행하는 함수입니다.

덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/) 및 괄호 등을 사용하여 숫자나 숫자와 단위가 조합된 수식의 계산을 수행합니다.

예를 들어, width: calc(100% - 50px)은 100%에서 50px을 뺀 값을 계산하여 요소의 너비를 지정합니다.

코드 부연설명
width 속성은 요소의 너비, 즉 가로 크기를 지정합니다.

데모

다음의 CSS 데모로 calc()의 사용 방법을 확인해 보세요.

형식 구문

계산식은 덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/) 및 괄호 등을 사용하여 숫자나 숫자와 단위가 조합된 기본적인 계산을 수행할 수 있는 수식입니다.

calc() 함수는 매개변수로 단일 계산식을 사용하고 계산식의 결과는 CSS 속성의 값으로 사용됩니다. 이 계산식에서 여러 피연산자가 포함된 경우에는 표준 수학에서 사용하는 연산자 우선순위 규칙이 적용됩니다. 예를 들어, calc(10px + 5px * 2)는 곱셈(*)이 먼저 수행되어 calc(10px + 10px)가 되고, 그 결과는 20px이 됩니다.

구문

CSS

/* calc(계산식) */
calc(100% - 50px);

/* CSS 변수를 포함하는 계산식 */
calc(var(--variable) / 2);

/* CSS 함수를 포함하는 계산식 */
calc(min(30%, 50px) + 20px);

참고사항

+와 - 연산자는 좌우에 공백이 있어야 합니다. 예를 들어, calc(100% -20px)은 유효하지 않습니다. 백분율(100%) 다음에 오는 -20px의 -는 뺄셈을 의미하는 연산자가 아니라 -20px이라는 음수 길이로 해석됩니다.
*와 / 연산자는 좌우에 공백이 필요하지 않지만 일관성을 위해 공백을 유지하는 것을 권장합니다.
길이 단위와 시간 단위에서 0은 항상 단위를 포함해야 합니다. 예를 들어, width: calc(0px + 20px)이나 animation-duration: calc(0s + 2s)는 유효하지만 width: calc(0 + 20px)이나 animation-duration: calc(0 + 2s)는 유효하지 않습니다.
*와 / 연산자에서 오른쪽 피연산자는 반드시 단위가 없어야 합니다. 예를들어, font-size: calc(1.25rem / 1.25)는 유효하지만 font-size: calc(1.25rem / 1.25%)는 유효하지 않습니다.
calc()에서는 요소의 고유 크기를 나타내는 min-content, max-content 값에 대한 계산을 수행할 수 없습니다.
calc()에서는 속성의 값으로 사용되는 auto, initial, inherit, unset, none, normal, bold처럼 키워드 값을 사용할 수 없습니다.
calc()에서는 수학적 계산을 수행할 수 없는 계산식을 사용할 수 없습니다. 예를 들어, color: calc(#ffffff + #f2f2f2)는 유효하지 않습니다. 하지만 color: rgb(255, 255, calc(255 - 10))처럼 수학적 계산을 수행할 수 없는 계산식을 수행할 수 있으면 유효합니다.
calc() 다음에 단위를 조합할 수 없습니다. 예를 들어, calc(100% / 5)는 유효하지만 calc(100 / 5)%는 유효하지 않습니다.
calc() 함수를 중첩해서 사용할 수 있지만, 내부의 calc()는 단순한 괄호로 간주되므로 가독성 측면에서 권장하지 않습니다.

다음은 유효하지 않은 사용 방법들을 모아 두었습니다.

CSS

/* +와 - 연산자는 좌우에 공백이 있어야 합니다. */
calc(100% -20px); /* => calc(100% - 20px); */

/* 길이 단위와 시간 단위에서 0은 항상 단위를 포함해야 합니다. */
calc(0 + 20px); /* => calc(0px + 20px); */

/* *와 / 연산자에서 오른쪽 피연산자는 반드시 단위가 없어야 합니다. */
calc(1.25rem / 1.25%); /* => calc(1.25rem / 1.25); */

/* 요소의 고유 크기를 나타내는 min-content, max-content 값에 대한 계산을 수행할 수 없습니다. */
calc(min-content + 15px);

/* calc()에서는 속성의 값으로 사용되는 키워드 값을 사용할 수 없습니다. */
calc(auto - 20px);

/* calc()에서는 수학적 계산을 수행할 수 없는 계산식을 사용할 수 없습니다. */
calc(#ffffff + #f2f2f2);

/* calc() 다음에 단위를 조합할 수 없습니다. */
calc(100 / 5)%; /* => calc(100% / 5); */

브라우저 호환성

calc() 함수의 브라우저 호환성
함수와 계산식	데스크탑 Chrome	데스크탑데스크탑 Edge	데스크탑 Firefox	Safari
`calc()`	26	12	16	7
색상 구성 요소 지원	119	119	128	16.4
그라디언트 색상 정지(stops) 지원	19	12	19	7
중첩된 `calc()` 지원	51	16	48	11

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

calc() 함수의 명세서 사양
명세서 사양
`Property`	CSS Values and Units Module Level 4 #calc-func

참고문헌

MDN - calc()