calc

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

구문

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

인자

표현식

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

표현식

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

+

덧셈입니다.

-

뺄셈입니다.

*

곱셈입니다. 하나 이상의 피연산자가 반드시 <number>여야 합니다.

/

나눗셈입니다. 오른쪽 값이 반드시 <number>여야 합니다.

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

정규 구문

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>

명세

브라우저 호환성

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

관련 문서

• Firefox 4: CSS3 calc() ✩ Mozilla Hacks – the Web developer blog