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 기준도 확인합니다.
CSS / Reference / text-decoration
텍스트 장식의 선·색·모양과 부모에서 이어지는 장식을 설명합니다. 자식의 none이 부모 밑줄을 없애지 못하는 경우를 같은 조건에서 비교합니다.
CSS / Reference / background-origin
배경의 위치·크기 기준을 content·padding·border 영역으로 바꾸어 비교합니다. clip과의 차이 및 백분율 크기 기준을 수치로 확인합니다.
넘친 내용을 자르거나 스크롤하는 조건을 비교합니다. hidden과 clip의 scrollTop 차이를 버튼으로 확인하고 축별 계산값과 레이아웃 조건을 설명합니다.
CSS / Reference / background-attachment
요소 내부와 페이지 스크롤을 나누어 local·scroll·fixed의 기준을 비교합니다. 별도 실행 예제와 모바일에서 확인해야 할 조건을 제공합니다.
CSS / Reference / border-spacing
표 셀의 가로·세로 간격을 지정하고 padding과 구분합니다. separate·collapse 및 간격 0의 차이를 같은 표에서 비교합니다.
같은 공백·탭·개행을 normal·nowrap·pre·pre-wrap·pre-line·break-spaces로 비교합니다. 보존과 접힘, 자동 줄바꿈 및 내부 스크롤의 차이를 확인합니다.
CSS / Reference / border-width
테두리 두께의 1~4개 값 대응과 실제 외곽 크기를 확인합니다. none·hidden의 계산값과 hover 시 배치 변화, outline 대안을 설명합니다.
CSS / Reference / border-style
테두리 스타일의 1~4개 값 대응과 none의 계산 두께를 설명합니다. 접힌 표에서 hidden이 이웃 경계를 억제하는 차이도 실행 예제로 확인합니다.
CSS / Reference / background-color
배경색의 알파 합성과 요소 전체 투명도를 구분합니다. 최종 글자·배경 조합에서 대비를 검사하고 이미지 뒤의 대체 색을 설정하는 기준을 설명합니다.
CSS / Reference / background-repeat
repeat·no-repeat·space·round를 같은 타일로 비교합니다. 반복 방향, 타일 간격과 크기 조정, 한 축에 한 타일만 들어가는 조건을 살펴봅니다.