CSS calc() 함수

CSS calc() 함수를 사용하면 길이 값에 기본 수학 연산을 적용할 수 있습니다.

• + 추가
• - 빼기
• * 곱하기
• 디비전 /

예를 들어 요소에 100%의 백분율 너비를 사용하려고 하지만 동일한 요소에 대해 총 32px 너비를 예약하려고 한다고 가정해 보겠습니다. calc()로 이를 수행하는 방법은 다음과 같습니다. :

div {
	max-width: calc(100% - 32px);
}

이제 해당 요소는 내부에 있는 컨테이너의 100%에서 32픽셀을 뺀 값을 차지합니다.

결과:

이것은 UI에서 정확한 백분율과 픽셀 양을 동시에 작업해야 할 때 유용합니다.

컨테이너 내부의 요소를 쉽게 가운데 정렬할 수도 있습니다.

div {
	max-width: calc(100% - 32px);
    margin-left: auto;
    margin-right: auto;
}

결과:

이제 가운데 정렬된 요소는 왼쪽과 오른쪽에 정확히 16px의 간격을 갖습니다. 알 수 있듯이 이 calc()를 사용할 수 있습니다. 요소 사이에 간격을 추가할 때 여백이나 여백을 사용하는 대신 사용할 수 있습니다.