CSS / Reference / calc()

calc()는 CSS 속성값 안에서 덧셈·뺄셈·곱셈·나눗셈을 계산하는 함수입니다. 같은 속성에서 허용하는 자료형 안에서 백분율과 길이 단위를 조합할 수 있어, 컨테이너 너비에서 고정 공간을 빼는 레이아웃 등에 사용합니다.

문법과 주요 값

.card { width: calc(100% - 40px); }
.title { font-size: calc(1rem + 4px); }

값의 적용 범위와 문법은 MDN의 calc() 문서에서 확인할 수 있습니다.

실행 예제와 결과 비교

아래 전체 코드를 UTF-8 형식의 calc-example.html 파일로 저장한 뒤 브라우저로 여세요. 예제용 CSS는 이 파일 안에만 넣고 사이트 전체 스타일시트에 그대로 붙여 넣지 않습니다.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>calc() 비교 예제</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
.samples > div { width: 300px; }
.target { width: calc(100% - 40px); padding: 0; border: 0; background: #bfe3ff; }
.reference { width: 100%; background: #ffd166; }
</style>
</head>
<body>
<main id="demo">
<h1>calc() 적용 비교</h1>
<section class="samples"><div class="a"><p class="label">100% - 40px</p><div class="target">너비 계산</div></div><div class="b"><p class="label">100%</p><div class="reference">너비 계산</div></div></section>
</main>
</body>
</html>

부모 너비가 300px인 예제에서 첫 박스의 내용 너비는 260px, 두 번째 박스는 300px입니다. 부모 너비를 바꾸면 첫 박스도 같은 40px 차이를 유지합니다.

연산 순서와 단위

곱셈·나눗셈은 덧셈·뺄셈보다 먼저 처리하고 괄호로 계산 순서를 바꿀 수 있습니다. calc(100% - 40px)처럼 +와 - 주변에는 공백을 넣습니다. 길이에 단위 없는 20을 더하는 식처럼 자료형이 맞지 않으면 선언이 무효가 될 수 있습니다.

퍼센트 기준과 유효성

백분율은 해당 속성의 규칙에 따라 기준이 정해지므로 width의 100%와 다른 속성의 100%를 같은 기준으로 해석하지 마세요. calc는 JavaScript나 임의의 단위 변환기가 아니며 0으로 나누거나 유효하지 않은 최종값이 되면 기대한 선언이 적용되지 않을 수 있습니다. 최신 형식의 단위 간 산술은 지원 범위를 확인하고 기본 숫자 배율과 구분합니다.

적용되지 않거나 예상과 다를 때

• 개발자 도구에서 선언에 취소 표시가 있으면 공백, 단위와 괄호를 먼저 확인합니다.
• padding·border 때문에 전체 너비가 달라지면 box-sizing 기준도 확인합니다.

관련 설정을 함께 조정할 때는 계산된 너비와 실제 박스 크기을 참고하세요.