MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

 calc() CSS 함수는 <length>, <frequency>, <angle>, <time>, <number>, 또는 <integer>가 필요한 어떤 곳에든지 사용될 수 있습니다. 당신은 CSS 속성 값을 정할 때에 calc()로 계산할 수 있습니다.

구문

/* 속성: calc(표현식) */
width: calc(100% - 80px);

인자

표현식
 값을 나타내는 수학적 표현식입니다.

표현식

 그 표현식은 표준 연산자 우선 순위 규칙을 따르는 다음 연산자들을 조합하여 구성한 간단한 표현식입니다.

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

 표현식에 있는 대부분의 피연산자는 길이 구문 값입니다. 표현식에 있는 값의 단위가 각기 달라도 됩니다. 당신은 괄호를 사용하여 연산 순서를 명확히 정할 수 있습니다.

참고: 0으로 나누는 표현식은 HTML 분석기에 의하여 오류가 발생합니다.
참고: + 연산자와 - 연산자는 반드시 반각 공백 문자로 둘러싸여야 합니다. 예컨대 calc(50% -8px)의 피연산자는 백분율 값과 음의 길이로 처리되어 유효하지 않습니다. 반면에 calc(50% - 8px)는 백분율 값과 뺄셈 기호, 그리고 양의 길이로 처리됩니다. 참고로 calc(8px + -50%)는 양의 길이와 덧셈 기호, 그리고 음의 백분율 값으로 처리됩니다.
 * 연산자와 / 연산자는 공백이 필요하지 않으나 표현식의 일관성을 위하여 공백을 넣는 것을 권장합니다.

정규 구문

calc(표현식)

예제

화면에 마진이 있는 요소 배치하기

calc()를 이용하면 마진을 적용하여 요소를 배치하기 쉽습니다. 이 예제의 CSS 코드는, 그 모서리와 창의 테두리에 40 픽셀의 틈이 있을 정도로 늘어진 현수막을 만듭니다.

.banner
{
    position: absolute;
    left: 5%;                 /* calc()를 지원하지 않는 브라우저를 위한 대비책 */
    left: 40px;
    width: 90%;               /* calc()를 지원하지 않는 브라우저를 위한 대비책 */
    width: calc(100% - 80px);
    border: solid black 1px;
    box-shadow: 1px 2px;
    background-color: yellow;
    padding: 6px;
    text-align: center;
}
<div class="banner">이건 현수막입니다!</div>

양식 구성 요소를 그 부모 크기에 맞추기

 calc()의 다른 용도는 양식 구성 요소를 그 부모를 밀어내지 않으면서 적절한 마진과 함께 최대한 크게 만드는 것입니다.

CSS 코드를 봅시다.

input
{
    padding: 2px;
    display: block;
    width: 98%;               /* calc()를 지원하지 않는 브라우저를 위한 대비책 */
    width: calc(100% - 1em);
}

#formBox
{
    width: 130px;             /* calc()를 지원하지 않는 브라우저를 위한 대비책 */
    width: calc(100% / 6);
    border: 1px solid black;
    padding: 4px;
}

 CSS 코드를 보면, 그 양식은 그 창의 너비의 ⅙을 사용하도록 하였고, 저 입력 요소가 적절한 크기를 유지하도록 그 너비를 다시 calc()를 이용하여 그 부모의 너비에서 1em을 뺀 길이로 하였습니다. 그리고 다음 HTML에 이 CSS를 적용하였습니다.

<form>
    <div id="formBox">
        <label>무언가 입력해 보세요.</label>
        <input type="text">
    </div>
</form>

명세

명세 상태 비고
CSS Values and Units Module Level 3
The definition of 'calc()' in that specification.
Candidate Recommendation 최초로 정의됨.

브라우저 호환성

지원하는 기능 Chrome Firefox(Gecko) Internet Explorer Opera Safari(WebKit)
기본적인 지원 19 -webkit
26
4.0 (2) -moz
16 (16)
9 ? 6 -webkit[1]
7
그라디언트 색점에서의 지원 19 -webkit
26
19 (19) 9 ? 6 -webkit[1]
7
지원하는 기능 Android Firefox Mobile(Gecko) IE Mobile Opera Mobile Safari Mobile
기본적인 지원 ? 4.0 (2) -moz
16.0 (16)
? ? 6 -webkit
7
그라디언트 색점에서의 지원 ? 19.0 (19) ? ? ?

[1] WebKit 6.0에서 오동작합니다.

관련 문서

문서 태그 및 공헌자

 이 페이지의 공헌자: mrstork, prayash, teoli, K._
 최종 변경: mrstork,