calc – Coalacoding

CSS의 calc()(캘크) 함수는 다양한 단위의 수치를 사칙연산하여 속성값으로 지정할 수 있도록 지원하는 기능이다. 고정 길이 단위와 상대 길이 단위를 자유롭게 혼합하여 연산할 수 있으므로 반응형 웹 환경에서 유연한 레이아웃을 구현할 때 유용하다. 이 글에서는 calc() 함수의 기본 문법과 연산자 사용 시 유의할 규칙을 살펴보고, 화면 너비에 맞추어 유동적으로 크기가 변하는 가변 너비 요소를 배치하는 예제를 다룬다.

calc() 연산자 공백 작성 규칙 — CSS calc() 함수는 사칙연산을 지원하며, 덧셈과 뺄셈 기호 좌우에는 반드시 빈칸을 두어야 한다.

1. 개요

MDN

CSS 속성의 값으로 계산식을 지정할 수 있다.

calc() 함수는 CSS 속성에 정적인 단일 수치를 대입하는 대신, 브라우저가 화면을 렌더링할 때 실시간으로 수식을 계산하여 최종 값을 산출하도록 한다. 고정 크기를 나타내는 픽셀(px) 단위와 부모 요소나 화면 크기에 비례하는 백분율(%), 뷰포트 단위(vw, vh)처럼 서로 다른 성격의 단위를 하나의 식 안에서 결합하여 연산할 수 있다. 레이아웃의 특정 여백은 고정하고 나머지 공간을 가변적으로 채워야 하는 구조에서 복잡한 자바스크립트 계산 없이 스타일시트만으로 레이아웃을 제어할 수 있다.

2. 기본문법

property: calc(expression);

예시: width: calc(100% - 80px);

calc() 함수의 괄호 내부에는 expression(익스프레션/표현식)으로 불리는 사칙연산 식이 들어간다. 지원되는 연산자는 덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/)이다.

2.1. 연산자 작성 시 주의사항

덧셈과 뺄셈의 공백 필수: 덧셈(+)과 뺄셈(-) 연산자를 사용할 때는 연산자 앞뒤로 반드시 공백(빈칸)을 두어야 한다. 예를 들어 calc(100% - 80px)는 정상적으로 처리되지만, 공백 없이 calc(100%-80px)로 작성하면 브라우저가 -80px를 음수 값이나 잘못된 식별자로 인식하여 전체 속성 선언을 무효 처리한다.
곱셈과 나눗셈의 규칙: 곱셈(*)을 수행할 때는 적어도 하나의 피연산자가 단위가 없는 순수 숫자여야 한다. 나눗셈(/)의 경우 나누는 수(오른쪽 피연산자)는 반드시 단위가 없는 순수 숫자여야 하며, 0으로 나눌 수 없다.

3. 예제

3.1. 가변너비 요소 지정

[미리보기]

요소의 가변 너비를 쉽게 지정하기

브라우저 창 크기에 따라 너비가 유동적으로 변하면서도 좌우에 항상 일정한 여백을 유지하는 현수막 배너를 구현하는 예제이다.

HTML

배너로 표시할 div 요소에 banner 클래스를 부여한다.

<div class="banner">이건 현수막입니다!</div>

CSS

.banner 클래스에 적용된 스타일 속성들의 동작과 역할은 다음과 같다.

.banner {
	position: absolute;
	left: 40px;
	width: calc(100% - 80px);
	border: solid black 1px;
	box-shadow: 1px 2px;
	background-color: yellow;
	padding: 6px;
	text-align: center;
	box-sizing: border-box;
}

위 CSS 코드의 세부 속성 동작 방식은 다음과 같다.

position: absolute; 및 left: 40px;: 요소를 절대 위치로 배치하고 기준 부모의 좌측 모서리에서 40px 떨어진 지점에 위치시킨다.
width: calc(100% - 80px);: 전체 너비(100%)에서 좌우 여백의 합인 80px(좌측 40px + 우측 40px)를 뺀 값을 요소의 너비로 동적 계산한다. 이를 통해 화면 크기가 늘어나거나 줄어들어도 좌우 양쪽에 항상 40px의 균일한 여백이 유지된다.
box-sizing: border-box;: box-sizing(박스 사이징) 속성을 border-box(보더 박스)로 설정하여, padding: 6px와 border: solid black 1px가 계산된 너비(width) 안에 포함되도록 한다. 이 속성이 없으면 패딩과 테두리 두께가 추가되어 요소의 전체 폭이 지정된 계산 너비보다 커지며 화면을 벗어날 수 있다.
background-color: yellow;, box-shadow: 1px 2px;, text-align: center;: 배너 배경을 노란색으로 지정하고 오른쪽 아래로 가벼운 그림자를 부여하며 텍스트를 중앙 정렬한다.

CSS 입문

10. calc