clamp 속성

🔍 clamp()란?

 

clamp(min, preferred, max)

👉 preferred 값을 기준으로 반응형으로 변화시키되, 최소(min) 이하·최대(max) 이상으로는 넘어가지 않게 제한하는 함수

 

한 줄 요약: “반응형 값 + 최소/최대 범위 제한을 한 번에 해결”

 

---

 

🧩 문법

property: clamp(최소값, 기본값/반응형값, 최대값);

 

예)

font-size: clamp(1rem, 2vw, 2rem);

 

---

 

🔥 실무에서 가장 많이 쓰는 패턴들

 

 

1) 반응형 폰트(Fluid Typography)

 

가장 실무에서 자주 쓰이는 패턴!

h1 {
  font-size: clamp(1.8rem, 3vw, 3rem);
}

p {
  font-size: clamp(1rem, 1.2vw, 1.4rem);
}

 

• 작은 화면: 글자가 너무 작아지지 않게 최소값 보장
• 큰 화면: 글자가 무한정 커지지 않게 최대값 제한
• 중간 화면: vw에 따라 자연스럽게 반응형 확대/축소

 

---

 

2) 컨테이너 최대/최소 폭 설정

 

반응형 레이아웃에서 자주 쓰는 패턴.

.container {
  width: clamp(320px, 80vw, 1200px);
  margin: 0 auto;
}

 

• 모바일에서는 최소 320px 확보
• 일반 화면에서는 80vw로 유동적으로
• 데스크톱에서는 1200px 이상 안 커짐 → 가독성 유지

 

---

 

3) 반응형 여백/패딩

 

디자인 일관성이 좋아지는 패턴.

.section {
  padding: clamp(16px, 4vw, 48px);
}

 

• 모바일: 최소 16px
• 중간 화면: 자연스럽게 4vw
• 큰 화면: 48px 이상 늘어나지 않음

 

---

 

⚠️ 사용 시 주의점

 

• min ≤ preferred ≤ max 형태가 되도록 작성하기
• preferred 값에는 vw, %, calc() 등 “변하는 값”을 주로 사용해야 효과가 있음
• 구형 브라우저 대응이 필요하다면 기본값 한 번 지정 후 clamp로 덮어쓰기

font-size: 1.5rem; /* fallback */
font-size: clamp(1.2rem, 2.2vw, 2rem);

 

---

 

✨ 마무리

 

clamp()는 “미디어 쿼리 없이도 반응형 값 + 최소/최대 제어를 한 번에 해결”해주는 실무 필수 함수입니다.

폰트, 레이아웃, 여백 등 다양한 곳에서 사용할 수 있어 코드가 깔끔해지고 유지보수도 쉬워집니다.

 

 

 

 

clamp() - CSS | MDN