안녕하세요! 프론트엔드 개발자 취업 준비생님!
이전에 숫자 데이터 타입과 함수 표기법에 관해 공부하셨는데, 이번에는 그 연장선이자 모던 반응형 웹(Responsive Web) 디자인의 핵심이라고 할 수 있는 'CSS 수학 함수 (CSS math functions)' 문서를 가져오셨네요!
예전에는 브라우저 창 크기에 따라 무언가를 동적으로 계산하려면 자바스크립트를 복잡하게 짜야만 했습니다. 하지만 calc(), min(), max(), clamp() 같은 강력한 CSS 함수들이 등장하면서, 오직 CSS 한 줄만으로 유연하고 완벽한 레이아웃을 만들 수 있게 되었죠.
공식 문서의 모든 내용을 빠짐없이, 제 실무 팁과 함께 구어체로 알기 쉽게 번역해 드리겠습니다!
CSS 수학 함수 사용하기 (Using CSS math functions)
CSS 수학 함수(CSS math functions)를 사용하면 요소의 height, animation-duration, 또는 font-size 같은 속성값을 수학적인 표현식(mathematical expression)으로 작성할 수 있습니다.
아무런 수학 함수를 쓰지 않더라도, rem, vw, % 같이 내장된 CSS 단위(CSS units)만으로도 특정한 사용자 경험(UX)을 달성할 만큼 HTML 요소들을 유연하게 스타일링할 수 있는 경우가 많습니다.
하지만, 어떤 요소의 스타일을 단일 값(single value)과 단위 하나만으로 표현하기에는 한계가 느껴지는 상황들이 있습니다. 다음 예시들을 한 번 생각해 볼까요?
- 콘텐츠 영역의 높이를 "뷰포트 전체 높이(100vh)에서 네비게이션 바(navbar)의 높이를 뺀 값"으로 설정하고 싶을 때.
- 두 요소의 너비를 합친(add) 값을 세 번째 요소의 너비로 정의하고 싶을 때.
- 텍스트의 가변적인
font-size가 특정 크기를 넘어서 너무 거대하게 커지는 것을 막고 싶을 때.
이런 상황들에서는 원하는 결과를 얻기 위해 수학(math)에 의존해야만 합니다. 하나의 해결책으로 자바스크립트에 정의된 수학 함수들에 의존해서, 스크립트가 계산해 낸 결과값을 바탕으로 요소의 스타일을 동적으로(dynamically) 설정하는 방법을 쓸 수도 있을 것입니다.
그러나 위 예시들을 포함한 수많은 상황에서, 우리는 그 대신 CSS에 직접 내장된(built-in) 수학 함수들을 활용할 수 있습니다. 이 방법은 자바스크립트를 사용하는 것보다 구현하기가 훨씬 간단하고, 브라우저가 실행하기에도 더 빠릅니다.
개발자는 스타일시트에서 약 두 다스(20여 개)에 달하는 CSS 수학 함수들을 조합해서 사용할 수 있습니다. 이 가이드에서는 가장 흔하게 쓰이는 4가지 함수를 예제로 살펴보고, 더 고급(advanced) 함수들도 간단히 소개하겠습니다.
이 문서의 목차 (In this article)
calc(): 기본 수학 연산 (Basic math operations)min(): 집합 내에서 최솟값 찾기 (Finding the minimum value in a set)max(): 집합 내에서 최댓값 찾기 (Finding the maximum value in a set)clamp(): 두 값 사이로 값 제한하기 (Constraining a value between two values)- 고급 CSS 수학 함수들 (Advanced CSS Math Functions)
- 마치며 (Final thoughts)
calc(): 기본 수학 연산 (Basic math operations)
위에서 들었던 세 가지 예시 중 첫 번째와 두 번째 상황을 보면, 우리는 덧셈이나 뺄셈 연산의 결과에 따라 요소의 스타일을 설정하고 싶어 합니다. 이것이 바로 calc()를 사용하는 정확한(exactly) 사용 사례 중 하나입니다.
calc() 함수는 덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/)을 사용하여 CSS 속성값을 지정할 수 있게 해줍니다. 이 함수는 %와 px처럼 서로 다른 단위(units)를 가진 두 개의 CSS 값을 결합할 때 매우 자주 사용됩니다.
calc() 수학 함수는 매개변수로 수학적 표현식을 받고 그 표현식의 계산 결과를 반환합니다. 예를 들면 다음과 같습니다:
property: calc(expression);calc() 예제 (calc() Example)
아래 코드 플레이그라운드에서 실행 아이콘을 클릭하여 calc() 예제를 확인하고 직접 테스트해 보세요.
HTML
<div class="calc1">
<code>width: calc(10px + 100px);</code>
</div>
<div class="calc2">
<code>width: calc(2em * 5);</code>
</div>
<div class="calc3">
<code>width: calc(100% - 32px);</code>
</div>
<div class="calc4">
<code>width: calc(var(--predefined-width) - calc(16px * 2));</code>
</div>CSS
div {
background-color: black;
margin: 4px 0;
width: 100%;
}
div > code {
display: block;
background-color: red;
color: white;
height: 48px;
}
.calc1 > code {
/* 출력 너비: `110px` (단순 덧셈) */
width: calc(10px + 100px);
}
.calc2 > code {
/* 출력 너비: `10em` (곱셈) */
width: calc(2em * 5);
}
.calc3 > code {
/* 출력 너비: 부모 컨테이너의 100% 너비에서 32px만큼 뺀 길이 */
width: calc(100% - 32px);
}
.calc4 > code {
--predefined-width: 100%;
/* 출력 너비: 컨테이너 너비에 따라 다름. 중첩된 calc() 사용! */
width: calc(var(--predefined-width) - calc(16px * 2));
}💡 강사의 실무 팁 1: 띄어쓰기의 중요성!
calc()를 쓸 때 프론트엔드 주니어 분들이 가장 많이 실수하는 것이 바로 연산자 앞뒤의 띄어쓰기입니다!
calc(100%-30px)➡️ (X) 이렇게 쓰면 브라우저가-30px을 뺄셈 기호가 아니라 음수 값으로 인식해서 에러가 납니다.
calc(100% - 30px)➡️ (O) 더하기(+)와 빼기(-) 기호 앞뒤로는 무조건 공백(띄어쓰기)을 한 칸씩 넣어주셔야 합니다. 곱하기(*)와 나누기(/)는 공백이 없어도 되지만, 일관성과 가독성을 위해 전부 띄어쓰기를 하는 것이 실무의 국룰(표준)입니다.
min(): 집합 내에서 최솟값 찾기 (Finding the minimum value in a set)
어떤 CSS 속성의 값이 특정한 숫자를 초과하지(exceed) 않기를 바라는 경우가 있습니다. 예를 들어, 콘텐츠 컨테이너의 너비가 "우리 화면의 전체 너비(100%나 100vw)"와 "500 픽셀(500px)" 중 더 작은 것(smaller)이 되기를 원한다고 해봅시다. 이런 경우에 CSS 수학 함수인 min()을 사용할 수 있습니다.
min() 수학 함수는 쉼표로 구분된 여러 값들을 인수로 받아 그중 가장 작은 값을 반환합니다.
width: min(32px, 50%, 2rem); /* 셋 중 브라우저가 계산해서 가장 작은 픽셀 값을 씁니다 */이 함수는 %나 px처럼 서로 다른 단위를 가진 두 개의 CSS 값을 비교할 때 아주 자주 사용됩니다.
min() 예제 (min() Example)
HTML
<div class="min1">
<code>width: min(9999px, 50%);</code>
</div>
<div class="min2">
<code>width: min(9999px, 100%);</code>
</div>
<div class="min3">
<code>width: min(120px, 150px, 90%);</code>
</div>
<div class="min4">
<code>width: min(80px, 90%);</code>
</div>CSS
div {
background-color: black;
margin: 4px 0;
width: 100%;
}
div > code {
display: block;
background-color: darkblue;
color: white;
height: 48px;
}
.min1 > code {
/* 출력 너비: 컨테이너의 너비에 따라 달라짐; */
/* 일반적인 데스크톱 화면이라면 9999px보다 50%가 훨씬 작을 테니 `50%`가 적용됩니다 */
width: min(9999px, 50%);
}
.min2 > code {
/* `100%`가 9999px보다 작기 때문에 `100%`가 적용됩니다 */
width: min(9999px, 100%);
}
.min3 > code {
/* 120px, 150px, 부모의 90% 중 가장 작은 값이 선택됩니다 */
width: min(120px, 150px, 90%);
}
.min4 > code {
/* 80px과 부모 너비의 90% 중 더 작은 값이 선택됩니다 */
width: min(80px, 90%);
}💡 강사의 실무 팁 2:
min()은 사실max-width다!
처음 보면 헷갈릴 수 있는 부분입니다.width: min(500px, 100%)라고 쓰면, 무슨 뜻일까요?
"평소에는100%로 쭉쭉 늘어나다가,100%가 500px을 넘어가는 순간 500px이 더 작은 값이 되니까 500px에서 멈춰라!"라는 뜻입니다.
즉,min()함수는 CSS의max-속성(최댓값 제한)과 똑같은 역할을 합니다. 이를 이해하시면 코드를 짜기가 훨씬 수월해집니다.
max(): 집합 내에서 최댓값 찾기 (Finding the maximum value in a set)
min()과 마찬가지로, 때로는 CSS 속성의 값이 특정한 숫자 아래로 떨어지지(go below) 않기를 바랄 때가 있습니다. 예를 들어, 콘텐츠 컨테이너의 너비가 "화면의 전체 너비"와 "500 픽셀" 중 더 큰 것(larger)이 되길 원할 수 있죠. 이럴 때는 CSS 수학 함수인 max()를 사용할 수 있습니다.
max() 함수는 쉼표로 구분된 여러 값들을 인수로 받아 그중 가장 큰 값을 반환합니다.
width: max(32px, 50%, 2rem);min()과 max() 예제들의 공통점과 차이점을 주목해 보세요.
max() 예제 (max() Example)
HTML
<div class="max1">
<code>width: max(50px, 50%);</code>
</div>
<div class="max2">
<code>width: max(50px, 100%);</code>
</div>
<div class="max3">
<code>width: max(20px, 50px, 90%);</code>
</div>
<div class="max4">
<code>width: max(80px, 80%);</code>
</div>CSS
div {
background-color: black;
margin: 4px 0;
width: 100%;
height: 48px;
}
div > code {
display: block;
background-color: darkmagenta;
color: white;
height: 48px;
}
.max1 > code {
/* 출력 너비: 컨테이너의 50%가 50px보다 크다면 50%를 적용, 화면이 줄어들어 50%가 50px 미만이 되면 최소 50px은 유지합니다 */
width: max(50px, 50%);
}
.max2 > code {
width: max(50px, 100%);
}
.max3 > code {
width: max(20px, 50px, 90%);
}
.max4 > code {
width: max(80px, 80%);
}💡 강사의 실무 팁 3:
max()는 사실min-width다!
min()과 반대로,width: max(500px, 100%)는 "평소엔 100% 너비를 갖되, 아무리 줄어들어도 500px 이하로는 줄어들지 마라(500px이 더 큰 값이 되니까)!"라는 뜻입니다. 즉, 최소 크기(min-width)를 보장하는 역할을 합니다.
clamp(): 두 값 사이로 값 제한하기 (Constraining a value between two values)
우리는 clamp()를 사용하여 min()과 max()의 기능을 하나로 결합할 수 있습니다. clamp() 수학 함수는 최솟값(minimum value), 선호하는 값(clamped value/preferred value), 그리고 최댓값(maximum value)을 인수로 받습니다.
/* 제한된 값(선호값): 50%, 최솟값: 100px, 최댓값: 300px */
width: clamp(100px, 50%, 300px);- 만약 선호하는 값(가운데 값)이 최솟값(첫 번째 값)보다 작다면, 함수는 최솟값을 반환합니다.
- 만약 선호하는 값이 최댓값(세 번째 값)보다 크다면, 함수는 최댓값을 반환합니다.
- 만약 선호하는 값이 최솟값과 최댓값 사이에 있다면, 함수는 선호하는 값(원래 값)을 반환합니다.
이 함수 역시 %와 px처럼 서로 다른 단위를 가진 두 개의 CSS 값을 비교하고 제어할 때 아주 자주 쓰입니다.
clamp() 예제 (clamp() Example)
HTML
<div class="clamp1">
<code>width: clamp(10%, 1px, 90%);</code>
</div>
<div class="clamp2">
<code>width: clamp(10%, 9999px, 90%);</code>
</div>
<div class="clamp3">
<code>width: clamp(125px, 1px, 250px);</code>
</div>
<div class="clamp4">
<code>width: clamp(25px, 9999px, 150px);</code>
</div>CSS
div {
background-color: black;
margin: 4px 0;
width: 100%;
height: 48px;
}
div > code {
display: block;
background-color: darkgreen;
color: white;
height: 48px;
}
.clamp1 > code {
/* 1px(가운데 선호값)이 무조건 최소치인 10%보다 작으므로 무조건 최솟값 10%를 반환합니다 */
width: clamp(10%, 1px, 80%);
}
.clamp2 > code {
/* 9999px(선호값)이 최대치인 90%보다 크므로 무조건 최댓값 90%를 반환합니다 */
width: clamp(10%, 9999px, 90%);
}
.clamp3 > code {
/* 출력 너비: 최솟값인 `125px` */
width: clamp(125px, 1px, 250px);
}
.clamp4 > code {
/* 출력 너비: 최댓값인 `150px` */
width: clamp(25px, 9999px, 150px);
}💡 강사의 실무 팁 4: 유동적 타이포그래피(Fluid Typography)의 끝판왕!
반응형 웹을 만들 때 폰트 사이즈를clamp(1rem, 2vw + 0.5rem, 2rem)이렇게 주면 정말 기가 막힙니다. 모바일에서는 최소1rem을 유지하고, 화면이 커지면2vw에 맞춰서 폰트도 스르륵 커지다가, 아주 큰 데스크톱 모니터에서는 너무 커지지 않게2rem에서 딱 멈춥니다. 자바스크립트로 화면 리사이즈 이벤트를 달 필요가 1도 없어집니다!
고급 CSS 수학 함수들 (Advanced CSS Math Functions)
DOM 요소를 배치하고 스타일링할 때, 기본 수학 함수 4개(calc(), min(), max(), clamp())만으로도 보통 충분합니다. 하지만 수학 학습 자료, 3D 시각화, 복잡한 CSS 애니메이션 같은 고급(advanced) 사용 사례를 위해 다음과 같은 함수들을 고려해 볼 수 있습니다:
- 단계별 값 함수 (Stepped value functions)
- 삼각 함수 (Trigonometric functions)
- 지수 함수 (Exponential functions)
- 부호 관련 함수 (Sign functions)
마치며 (Final thoughts)
- 여러분은 자바스크립트 코드를 단 한 줄도 작성하지 않고도, CSS 수학 함수들을 사용하여 훌륭한 반응형 사용자 인터페이스(Responsive UI)를 만들 수 있습니다.
- CSS 수학 함수들은 종종 레이아웃의 분기점(breakpoints)을 정의하기 위해 CSS 미디어 쿼리(CSS media queries) 대신 사용될 수 있습니다. (미디어 쿼리로 분기점을 수십 개 나누는 대신
clamp()하나로 끝내는 경우가 많죠.) - 2023년, 웹 표준을 맞추는 Interop 프로젝트의 멤버들은 개선해야 할 핵심 집중 분야 중 하나로 "CSS 수학 함수"를 선정했습니다. 이는 구글, 애플, 모질라 등 여러 브라우저 벤더들이 협력하여 모든 브라우저와 기기에서 CSS 수학 함수가 동일하고 완벽하게 작동하도록 만들고 있다는 뜻입니다. (안심하고 팍팍 써도 된다는 뜻입니다!)
MDN 향상에 도움 주기 (Help improve MDN)
- 이 페이지가 도움이 되셨나요? (Yes / No)
- MDN 기여 방법 알아보기 (Learn how to contribute)
- 마지막 수정일: 2025년 12월 16일 by MDN contributors
- GitHub에서 이 페이지 보기 (View this page on GitHub)
- 이 콘텐츠의 문제점 보고하기 (Report a problem with this content)
어떠신가요? 이제 CSS에서 calc(), min(), max(), clamp()를 활용해서 어떻게 코드를 짜야 할지 감이 오시죠?
특히 준비 중이신 포트폴리오를 스마트폰부터 대형 모니터까지 완벽하게 대응하려면, 오늘 배우신 clamp()와 저번 시간에 배우신 vw, vh 같은 상대 단위의 조합이 아주 강력한 무기가 될 것입니다. 더 궁금하신 점이 있거나, 직접 코드를 작성하다가 계산이 꼬이는 부분이 있다면 언제든 물어보세요!
