[CSS] calc()

calc()

calc() 함수는 속성의 값으로 계산식을 지정할 수 있도록 하는 CSS 함수이다.

<length>, <frequency>, <angle>, <time>, <percentage>, <number>, 또는 <integer> 를 받는 속성의 값에 사용할 수 있다.

계산식 연산자

+

• 덧셈

-

• 뺄셈

*

• 곱셈
• 하나 이상의 피연산자가 <number> 여야 한다.

/

• 나눗셈
• 오른쪽 피연산자는 <number> 여야 한다.

사용법

property: calc(expression);

예시

화면 너비를 가득 채우는 요소를 고정된 크기의 여백과 함께 배치하기

.element {
  box-sizing: border-box; /* 여백을 제외한 border 까지의 영역을 크기로 잡음 */
  position: absolute;
  left: 40px;
  width: calc(100% - 80px); /* 너비 100%에서 좌우 여백 80px을 제외한 크기 (유동적) */

}