calc()

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015년 7월⁩.

* Some parts of this feature may have varying levels of support.

calc()CSS 함수를 사용하면 CSS 속성의 값으로 계산식을 지정할 수 있습니다.<length>,<frequency>,<angle>,<time>,<percentage>,<number>, 또는<integer>를 받는 속성의 값으로 사용할 수 있습니다.

구문

css

/* property: calc(expression) */width: calc(100% - 80px);

calc() 함수는 매개변수로 표현식 하나를 받고, 표현식의 결과가 최종 값이 됩니다. 표현식은 단순 계산식은 무엇이든 가능하며, 표준 연산자 우선순위를 따릅니다.

+: 덧셈.
-: 뺄셈.
*: 곱셈. 하나 이상의 피연산자가<number>여야 합니다.
/: 나눗셈. 오른쪽 피연산자는<number>여야 합니다.

피연산자로는<length> 구문의 아무 값이나 사용할 수 있고, 원한다면 서로 다른 단위끼리도 계산할 수 있습니다. 괄호를 사용해서 연산 순서를 바꿀 수도 있습니다.

참고

0으로 나누면 HTML 구문분석기에서 오류가 발생합니다.
+와- 연산자는 좌우에 공백이 있어야 합니다.calc(50% -8px)은 백분율 값과 음수 길로 해석하여 유효하지 않지만,calc(50% - 8px)은 백분율과 길이의 뺄셈으로 해석합니다. 마찬가지로,calc(8px + -50%)는 길이와 음의 백분율간의 덧셈으로 처리합니다.
*와/ 연산자는 좌우 공백을 요구하지 않지만, 그래도 추가하는 편이 일관성을 유지하기에 좋습니다.
표의 행, 열, 행/열 그룹, 자동이나 고정 레이아웃 칸에서 백분율을 포함한 수학식을 너비나 높이로 사용하면auto 키워드를 사용한 것과 동일하게 처리합니다.
calc() 함수를 중첩해서 사용하면 내부의calc()는 단순한 괄호로 간주합니다.

형식 구문

<calc()> =
calc(<calc-sum>)

<calc-sum> =
<calc-product>[[ '+'| '-']<calc-product>]*

<calc-product> =
<calc-value>[[ '*'| /]<calc-value>]*

<calc-value> =
<number>|
<dimension>|
<percentage>|
<calc-keyword>|
  (<calc-sum>)

<calc-keyword> =
e|
pi|
infinity|
-infinity|
NaN

예제

요소를 화면에 여백과 함께 배치하기

calc()를 이용하면 고정된 너비의 여백을 가진 요소를 쉽게 배치할 수 있습니다. 다음 예제에서는 화면을 가로지르면서 창의 좌우 모서리와 간격이 40픽셀인 배너를 생성합니다.

css

.banner {  position: absolute;  left: 40px;  width: calc(100% - 80px);  border: solid black 1px;  box-shadow: 1px 2px;  background-color: yellow;  padding: 6px;  text-align: center;  box-sizing: border-box;}

html

<div>이건 현수막입니다!</div>

입력 양식 요소를 컨테이너 크기에 자동으로 맞추기

calc()의 다른 용도는 입력 양식의 필드가 적절한 여백을 갖추면서도 컨테이너 모서리 바깥으로 빠져나가지 않도록 설정하는 것입니다.

다음 CSS 코드를 살펴보세요.

css

input {  padding: 2px;  display: block;  width: calc(100% - 1em);}#form-box {  width: calc(100% / 6);  border: 1px solid black;  padding: 4px;}

위 코드에서, 폼 스스로는 창에서 사용 가능한 공간의 1/6을 차지합니다. 그 후, 입력 필드가 적절한 크기를 가질 수 컨테이너 너비에서 1em 뺀 만큼을 calc()로 지정했습니다. 이제 HTML에 CSS를 적용해보겠습니다.

html

<form>  <div>    <label>뭔가 입력해 보세요.</label>    <input type="text" />  </div></form>

CSS 변수와 중첩`calc()`

CSS 변수도calc()와 같이 사용할 수 있습니다. 다음 코드를 살펴보세요.

css

.foo {  --widthA: 100px;  --widthB: calc(var(--widthA) / 2);  --widthC: calc(var(--widthB) / 2);  width: var(--widthC);}

모든 변수를 펼치면widthC의 값은calc( calc( 100px / 2) / 2)가 됩니다. 그 후.foo의 너비 속성으로 지정될 때, 모든 중첩calc()는 깊이에 관계 없이 단순한 괄호로 바뀌므로width 속성의 값은calc( ( 100px / 2) / 2), 즉25px이 됩니다. 요약하자면calc() 안의calc()는 그냥 괄호와 같습니다.