CSS calc() 함수 완벽 가이드: 백분율과 픽셀을 동시에 다루는 방법

CSS의 calc() 함수는 길이 값에 기본적인 수학 연산을 적용할 수 있도록 해주는 강력한 도구입니다. 지원되는 연산자는 다음과 같습니다.

• 덧셈 +
• 뺄셈 -
• 곱셈 *
• 나눗셈 /

calc() 기본 사용법

예를 들어, 어떤 요소에 컨테이너 전체 너비인 100%를 적용하면서 동시에 좌우 합쳐서 32px의 여유 공간을 확보하고 싶다고 가정해 보겠습니다. 이럴 때 calc()를 활용하면 아주 간단하게 해결할 수 있습니다.

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

이렇게 작성하면 해당 요소는 자신이 속한 컨테이너 너비의 100%에서 32px을 뺀 크기만큼 차지하게 됩니다.

실행 결과

요소의 최대 너비 = 100% − 32px

이 방식은 UI 작업 시 백분율(%)과 픽셀(px) 값을 정확하게 동시에 다뤄야 할 때 특히 유용합니다.

중앙 정렬과 함께 활용하기

calc()는 auto 마진과 조합하면 요소를 컨테이너 안에서 손쉽게 중앙 정렬할 수도 있습니다.

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

실행 결과

최대 너비 100% − 32px, 화면 중앙 정렬

이제 중앙에 정렬된 요소는 왼쪽과 오른쪽에 각각 정확히 16px씩의 여백을 갖게 됩니다. 이처럼 calc()는 요소 사이에 간격을 만들 때 padding이나 margin을 대체하는 용도로도 훌륭하게 활용할 수 있습니다.

calc() 활용 시 알아두면 좋은 팁

• 서로 다른 단위 혼합 가능: calc()의 가장 큰 장점은 %, px, em, rem, vw처럼 서로 다른 단위를 하나의 수식 안에서 자유롭게 섞어 쓸 수 있다는 점입니다.
• 연산자 주변 공백 필수: +와 - 연산자 앞뒤에는 반드시 공백을 넣어야 합니다. calc(100%-32px)처럼 붙여 쓰면 유효하지 않은 값으로 처리되므로 주의하세요.
• 곱셈과 나눗셈: *와 /는 한쪽 피연산자가 반드시 숫자여야 하며, 공백 없이 사용해도 문법 오류가 발생하지 않지만 가독성을 위해 공백을 두는 것이 좋습니다.