calc 함수

calc 함수는 CSS 속성 값의 계산을 가능하게 합니다. 이 함수는 매개변수로 수학적 표현식을 받아, 그 계산 결과를 CSS 속성 값으로 사용할 수 있습니다. 표현식은 연산자 +, -, *, /를 포함할 수 있습니다.

문법

css선택자 {
  속성: calc(표현식);
}

예시

블록의 너비를 부모 요소 너비의 100%에서 50px를 뺀 값으로 만들어 봅시다:

html<div id="parent">
  <div id="child"></div>
</div>

css#child {
  width: calc(100% - 50px);
  height: 100px;
  margin: 0 auto;
  border: 1px solid red;
}
#parent {
  border: 1px solid green;
}

Результат:

함께 보기