[CSS 기초] clamp()와 calc() 함수의 개념과 실전 사용 방법

clamp()와 calc() 함수 📐

CSS에서는 값을 직접 숫자로만 작성하는 것이 아니라,
함수를 사용해서 더 유연하게 값을 계산하거나 제한할 수 있습니다.

대표적으로 많이 사용하는 함수가 clamp() 와 calc() 입니다.

• clamp() → 값의 최소, 유동, 최대 범위를 정할 때 사용합니다
• calc() → 값을 직접 계산해서 사용할 때 사용합니다

두 함수 모두 반응형 작업에서 매우 자주 사용됩니다.

주요 포인트 Top3

01. clamp() 함수

clamp()는 값의 최소값, 유동값, 최대값을 한 번에 설정하는 함수입니다.

형태는 다음과 같습니다.

font-size: clamp(16px, 2vw, 24px);
/* clamp(최소값, 유동값, 최대값) */

이 코드는 다음과 같은 의미입니다.

• 최소 16px보다 작아지지 않습니다
• 기본적으로는 2vw를 따라 움직입니다
• 최대 24px보다 커지지 않습니다

즉, 화면 크기에 따라 값이 자연스럽게 변하지만
너무 작아지거나 너무 커지는 것은 막을 수 있습니다.

clamp는 이름 그대로
값을 일정 범위 안에 잡아두는(clamp) 역할을 합니다.

<h1 class="title">반응형 제목</h1>

.title{
  font-size: clamp(20px, 5vw, 40px);
  /* 최소 20px, 기본은 5vw, 최대 40px */
}

화면이 작아지면 글자가 줄어들지만 20px 아래로는 내려가지 않고,
화면이 커지면 글자가 커지지만 40px까지만 커집니다.

02. clamp()가 필요한 이유

반응형 작업에서는
화면 크기에 따라 값이 조금씩 자연스럽게 바뀌면 좋을 때가 많습니다.

예를 들어 제목 글자 크기를 반응형으로 만들고 싶다면
예전에는 미디어쿼리로 여러 번 나눠서 작성해야 했습니다.

.title{
  font-size: 18px;
}
 
@media (min-width: 768px){
  .title{
    font-size: 24px;
  }
}
 
@media (min-width: 1200px){
  .title{
    font-size: 32px;
  }
}

이 방식은 화면 구간마다 값을 직접 나눠서 지정해야 합니다.

하지만 clamp를 사용하면 한 줄로 더 부드럽게 처리할 수 있습니다.

.title{
  font-size: clamp(18px, 3vw, 32px);
}

즉, clamp는
값이 부드럽게 변해야 하는 반응형 작업에서 특히 유용합니다.

03. clamp() 실제 사용 위치

clamp는 주로 아래와 같은 곳에서 많이 사용합니다.

<section class="section">
  <h2 class="title">제목입니다</h2>
  <p class="text">내용입니다</p>
</section>

.title{
  font-size: clamp(24px, 4vw, 48px);
  /* 제목 글자 크기 */
}
 
.text{
  font-size: clamp(14px, 2vw, 18px);
  /* 본문 글자 크기 */
}
 
.section{
  padding: clamp(20px, 5vw, 80px);
  /* 섹션 여백 */
}

즉, clamp는
글자 크기, 여백, 너비처럼
화면에 따라 자연스럽게 바뀌면 좋은 값에 자주 사용합니다.

04. calc() 함수

calc()는 값을 직접 계산해서 사용하는 함수입니다.

calc는 calculate의 줄임말이며,
말 그대로 계산해서 값을 만들 때 사용합니다.

형태는 다음과 같습니다.

width: calc(100% - 200px);

이 코드는
전체 너비 100%에서 200px을 뺀 값을 사용하겠다는 뜻입니다.

즉, 단위를 직접 계산해서
결과값을 CSS에 적용할 수 있습니다.

calc는 아래처럼 덧셈, 뺄셈, 곱셈, 나눗셈 개념으로 활용할 수 있습니다.

.box{
  width: calc(50% - 10px);
  /* 50%에서 10px을 뺀 값 */
}
 
.title{
  font-size: calc(16px + 4px);
  /* 16px + 4px = 20px */
}

즉, 고정값과 비율값을 섞어서 계산할 수 있다는 점이 매우 중요합니다.

05. calc()가 필요한 이유

레이아웃을 만들다 보면
단순히 100%나 300px처럼 딱 떨어지는 값만으로는 부족한 경우가 많습니다.

예를 들어 전체 영역에서 사이드바를 제외한 나머지 영역을 만들고 싶을 수 있습니다.

<div class="wrap">
  <aside class="sidebar">사이드바</aside>
  <main class="content">콘텐츠</main>
</div>

.wrap{
  display: flex;
}
 
.sidebar{
  width: 200px;
}
 
.content{
  width: calc(100% - 200px);
}

이 코드는 콘텐츠 영역이
전체 너비에서 사이드바 200px을 제외한 나머지를 차지하게 만듭니다.

즉, calc는
레이아웃에서 남는 공간을 계산할 때 매우 자주 사용합니다.

06. clamp()와 calc() 차이

두 함수는 비슷해 보이지만 목적이 다릅니다.

clamp() → 범위를 제한하는 함수
calc()  → 값을 계산하는 함수

즉,

• clamp → 최소값과 최대값을 정해두고 그 사이에서 유동적으로 움직이게 할 때
• calc → 현재 필요한 값을 직접 계산해야 할 때

사용합니다.

.title{
  font-size: clamp(18px, 3vw, 32px);
  /* 너무 작지도 크지도 않게 제한 */
}
 
.content{
  width: calc(100% - 240px);
  /* 실제 공간 계산 */
}

clamp는 범위 설정,
calc는 계산 자체가 핵심입니다.

07. clamp() + calc() 실제 사용 예시

반응형 제목과 사이드바 레이아웃을 함께 사용하는 구조입니다.

<div class="wrap">
  <aside class="sidebar">메뉴</aside>
 
  <main class="content">
    <h1 class="title">반응형 레이아웃</h1>
    <p class="text">화면 크기에 따라 값이 자연스럽게 조절됩니다.</p>
  </main>
</div>

.wrap{
  display: flex;
  min-height: 100vh;
}
 
.sidebar{
  width: 220px;
  background-color: #222;
  color: white;
  padding: 20px;
}
 
.content{
  width: calc(100% - 220px);
  padding: clamp(20px, 4vw, 60px);
  /* 여백은 화면에 따라 자연스럽게 변경 */
}
 
.title{
  font-size: clamp(24px, 5vw, 48px);
  /* 제목 크기 반응형 */
}
 
.text{
  font-size: clamp(14px, 2vw, 18px);
  line-height: 1.6;
}

이 구조에서는
content 영역이 전체 너비에서 사이드바를 제외한 공간을 계산해서 사용하고,
제목과 여백은 화면 크기에 따라 부드럽게 조절됩니다.

즉, calc는 공간 계산에 사용되고,
clamp는 반응형 크기 조절에 사용됩니다.

GOYO.’s Tip 💡

• clamp는 글자 크기, 여백, 박스 크기처럼 화면에 따라 자연스럽게 변해야 하는 값에 잘 어울립니다
• calc는 퍼센트와 px처럼 서로 다른 단위를 함께 계산할 때 특히 유용합니다
• 반응형 작업에서는 clamp와 calc를 함께 사용하는 경우가 많습니다

마무리 🎯

clamp()는 최소값, 유동값, 최대값을 설정하여 값의 범위를 제한하는 함수이고,
calc()는 필요한 값을 직접 계산하여 적용하는 함수입니다.

반응형 작업에서는
clamp로 자연스러운 변화 범위를 만들고,
calc로 실제 공간을 계산하는 방식으로 함께 활용하는 것이 중요합니다.