CSS / Reference / calc()
calc()는 CSS 속성값 안에서 덧셈·뺄셈·곱셈·나눗셈을 계산하는 함수입니다. 같은 속성에서 허용하는 자료형 안에서 백분율과 길이 단위를 조합할 수 있어, 컨테이너 너비에서 고정 공간을 빼는 레이아웃 등에 사용합니다.
문법과 주요 값
calc()는 함수이므로 속성처럼 초기값·상속 여부를 갖지 않습니다. 계산 결과를 받는 속성의 자료형과 백분율 기준을 따릅니다.
.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 차이를 유지합니다. 320px 화면에서는 Flex 부모의 실제 너비가 272px로 줄어 첫 박스가 232px가 됩니다. 지정한 300px와 실제 사용 너비를 구분해 개발자 도구에서 확인하세요.
연산 순서와 단위
곱셈·나눗셈은 덧셈·뺄셈보다 먼저 처리하고 괄호로 계산 순서를 바꿀 수 있습니다. calc(100% - 40px)처럼 +와 - 주변에는 공백을 넣습니다. 길이에 단위 없는 20을 더하는 식처럼 자료형이 맞지 않으면 선언이 무효가 될 수 있습니다.
퍼센트 기준과 유효성
백분율의 기준은 해당 속성의 규칙으로 정해집니다. width의 100%를 다른 속성의 백분율 기준으로 일반화하지 마세요. 잘못된 문법·자료형과 무한대·NaN 계산은 별개의 경우이며, 지원하는 구현은 0으로 나눈 계산도 해석하고 속성의 범위로 제한할 수 있습니다. 아래 비교에서 형식 산술 지원을 따로 확인합니다.
자료형과 특수 계산 결과를 구분하기
| 식 | 판단 |
|---|---|
width: calc(100% - 40px) |
너비에서 허용하는 백분율과 길이의 조합입니다. |
width: calc(100% - 20) |
길이에서 단위 없는 숫자를 빼므로 자료형이 맞지 않습니다. |
opacity: calc(1px / 2px) |
같은 종류의 단위를 나누면 숫자 0.5가 되는 형식 산술입니다. 지원 여부를 별도로 확인합니다. |
calc(1px / 0) |
지원 구현에서는 무한대가 생길 수 있고 속성의 범위로 제한됩니다. 단순히 문법 오류라고 단정하지 않습니다. |
예제 파일의 개발자 도구 Console에서 아래를 실행하세요. 첫 식은 true, 둘째는 false가 예상되며 마지막 값은 새 형식 산술 지원에 따라 달라집니다. CSS.supports()는 문법 지원을 확인하는 기능이며 실제 배치 결과까지 보장하지 않습니다.
CSS.supports("width", "calc(100% - 40px)");
CSS.supports("width", "calc(100% - 20)");
CSS.supports("opacity", "calc(1px / 2px)");
0으로 나누는 식을 레이아웃 기법으로 사용하지 마세요. 무한대·NaN과 계산값의 처리는 MDN의 calc 상수 설명에서 확인할 수 있습니다.
계산된 너비를 실제 상자 크기와 연결하려면 width, height, min, max, box-sizing으로 크기 조절하기를 참고하세요. 본문의 조건과 함께 비교할 관련 속성은 box-sizing입니다.
적용되지 않거나 예상과 다를 때
- 개발자 도구에서 선언에 취소 표시가 있으면 공백, 단위와 괄호를 먼저 확인합니다.
- padding·border 때문에 전체 너비가 달라지면 box-sizing 기준도 확인합니다.
실제 탭 문자의 정지 간격을 조절하고 공백 네 개와 구분합니다. 공백 보존 조건과 같은 문자열에서 4·8의 결과를 확인합니다.
CSS / Reference / background-repeat
repeat·no-repeat·space·round를 같은 타일로 비교합니다. 반복 방향, 타일 간격과 크기 조정, 한 축에 한 타일만 들어가는 조건을 살펴봅니다.
CSS / Reference / letter-spacing, word-spacing
같은 문장을 기준으로 문자 간격과 단어 간격을 따로 조정합니다. normal 기준, 상대 단위, 언어별 줄바꿈과 과도한 음수 간격의 문제를 설명합니다.
넘친 내용을 자르거나 스크롤하는 조건을 비교합니다. hidden과 clip의 scrollTop 차이를 버튼으로 확인하고 축별 계산값과 레이아웃 조건을 설명합니다.
전경색과 currentColor의 연결을 같은 박스에서 확인합니다. 상속, 배경색과의 차이, 대비와 색상 이외의 정보 표시 기준을 설명합니다.
부모와 루트 글자 크기를 기준으로 em·rem을 계산합니다. 중첩된 상대 크기의 차이와 확대 시 잘림을 확인하는 방법을 제공합니다.
CSS / Reference / backface-visibility
3차원 회전에서 요소 뒷면의 표시 여부를 비교합니다. 양면 카드의 별도 면 구성, 키보드 조작과 모션 감소 조건을 설명합니다.
content-box·border-box의 내용과 외곽 너비를 계산합니다. 여백과 테두리보다 작은 지정 너비에서 생기는 최소 크기 예외도 실습합니다.
사용 중단된 clip의 좌표를 읽고 clip-path의 inset 거리와 비교합니다. 절대 위치 조건과 크기 변경 시 좌표 재계산을 설명합니다.
calc()로 백분율과 길이를 조합하고 실제 부모 너비를 기준으로 결과를 확인합니다. 자료형 오류, 새 형식 산술과 무한대 계산의 차이도 구분합니다.