calc – 수학적으로 수치 지정하기

참고 : http://css-tricks.com/a-couple-of-use-cases-for-calc/

참고 링크에서 필요한 부분만 요약한 글.
가로/세로 값을 계산해서 적용할 때 아주 유용한 기능이다.

기존에는 가로/세로 크기를 지정시 특정한 숫자값을 입력해야만 했고, 수학적인 계산 후의 값을 적용해야할 필요가 있을 때는 스크립트 등 외부의 도움이 필요했다.

calc를 이용하면 특정 값을 기준으로 값을 더하기/빼기/곱하기/나누기 하여 결과 값을 적용시킬 수 있다.

문법

.box {
    width: 100px;          /* 지원하지 않는 경우를 대비해 넣는다 */
    width: cal(100% - 5px);
}

활용법

1. 퍼센트 크기 빼고 고정 크기 (100% – 50px)

상단에 50px을 남기고 아래는 스크롤 할 수 있는 박스를 만든다.

.container {
    height: 100%;
}
.content {
    height: calc(100% - 50px);
    overflow: auto;
}

2. 배경이미지 우측 하단에 고정

예전에는 이미지 자체에 우측 하단 남길 부분을 포함시켜서 만든 후 right bottom으로 정렬할 수 밖에 없었다.
calc를 사용하여 우측 하단을 기준으로 얼만큼 떼어놓을지 지정할 수 있다.

background-image: url(bg.png);
background-position: calc(100% - 30px) calc(100% - 20px);

배경 이미지가 우측에서 30px, 하단에서 20px 떨어진 위치에 나타나게 된다.

3. 손쉽게 gutter 지정

퍼센트 단위로 지정된 2개의 박스를 좌우로 정렬했을 때, 그 사이값을 고정해서 지정할 수 있다.

.left_area {
    width: 40%;
    float: left;
    margin-right: 1em;
}
.right_area {
    width: calc(60% - 1em);
    float: right;
}

각각 가로크기 40%, 60%인 박스를 좌우로 배치했고, 우측 박스는 60% 크기에서 1em 만큼 작아진 크기로 나타나게 된다.

4. 수학적인 컬럼 나누기

가장 유용하게 사용할 수 있을 것 같다.

나누기와 곱하기까지 적용할 수 있기 때문에 가로로 3개의 박스를 배치할 때 각각의 가로값을 특정 픽셀값이나 33.33333% 등으로 지정하지 않고, 브라우저가 계산해서 정확히 3등분하여 배치할 수 있게 해준다.

.column-1-7 {
    width: calc(100% / 7);
}
.column-2-7 {
    width: calc(100% / 7 * 2);
}
.column-3-7 {
    width: calc(100% / 7 * 3);
}

.column-1-7 : 가로로 7등분 한 후, 1/7 크기로 지정됨
.column-2-7 : 가로로 7등분 한 후, 1/7 크기의 두배로 지정됨. 따라서 가로값은 2/7 크기가 된다.
.column-3-7 : 가로로 7등분 한 후, 1/7 크기의 세배로 지정됨. 따라서 3/7 크기

5. box-sizing 대신 사용

아래처럼 계산해서 box-sizing 대신 쓸 수 도 있다.
하지만 현재 브라우저 지원이 calc()보다 box-sizing 쪽이 더 좋기 때문에 과연…?

.module {
     padding: 10px;
 
     /* Same as box-sizing: padding-box */
     width: calc(40% - 20px);
 
     border: 2px solid black;
 
     /* Same as box-sizing: border-box */
     width: calc(40% - 20px - 4px);
}