FrontendCSS

CSS3 Calc

,

CSS 자동 계산 calc() 속성

calc() 함수는 이름에서 보듯이 계산을 해주는 속성인데 기존에 자바스크립트로 하던 계산을 상당 부분 덜어줄수 있다.
width, height, font-size, margin, padding 값의 길이를 계산할때나 각도, 수치, 변형(transition), 사운드 재생 횟수, 애니메이션 처리시 사용 한다.
이를 표현하기 위해서는 더하기, 빼기, 곱하기, 나누기등 사칙연산자를 이용하여 표현할 수 있다.

예를 들어, 모든 문단을 “100% 너비에서 20픽셀(px)만큼 뺀 너비”로 설정하고 싶다면 다음과 같이 작성한다.

1
2
3
4
5
6
p {
    width : 95%; /* 구식 브라우저를 위한 대비책(fallback) */
    width : -webkit-calc(100% - 20px); /* for Chrome, Safari */
    width :    -moz-calc(100% - 20px); /* for Firefox */
    width :         calc(100% - 20px); /* for IE */
}

calc() 내부에 입력할 수 있는 표현식은 +, -, *, / 등의 사칙 연산이 가능하다.
주의할 부분은 사칙 연산시 + 또는 – 는 반드시 기호 양쪽으로 공백을 삽입해야 한다는 것입니다.
예를 들어, calc(100%/6) 또는 calc(100%/6 - 30px)는 유효한 표현식이지만 calc(100%/6-30px)는 유효하지 않는다.
또한, 계산은 같은 분류(길이면 길이, 각도면 각도)에 있는 값끼리 해야한다.

속성에 따라 계산 결과가 보정되는 경우가 있다. 예를 들어, 다음 예제에 있는 두 속성의 값은 같은 값이다.

1
2
3
4
5
6
7
8
p {
    width: calc(5px - 10px);    
}

//ouput
p {
    width: 0px;    
}

표현식에 따르면 5px - 10px = -5px 이지만, 너비의 경우 0보다 작은 값을 허용하지 않기 때문에 계산 결과는 0px와 같다.

현재 지원 브라우저

참조

공유하기