CSS clamp() 함수로 반응형 폰트 사이즈 설정하기

font-size: clamp(3rem, 10vw, 6rem);

✅ clamp()란?

clamp(min, preferred, max)

CSS에서 값의 최소~최대 범위를 지정하면서도 반응형으로 유동 조절할 수 있는 함수.

📌 위 예제 의미

값	설명
3rem	최소값 – 이보다 작아지지 않음
10vw	기본값 (가변) – 뷰포트 너비의 10%
6rem	최대값 – 이보다 커지지 않음

결국 브라우저가 10vw를 기준으로 계산하면서,
3rem보다 작아지지 않고 6rem보다 커지지 않도록 조절한다.

---

💡 언제 사용하나요?

• 반응형 타이틀, 버튼, 섹션 헤드라인 등
• 브라우저 크기에 따라 폰트 크기 자동 조정하고 싶을 때
• media query 없이도 자연스럽게 크기 대응하고 싶을 때

---

📎 단위 설명

단위	설명
rem	루트(html) 기준 배수 크기
vw	뷰포트 너비의 1% (viewport width)

---

📌 실무 예시

h1 {
  font-size: clamp(2rem, 5vw, 4rem);
}

.button {
  padding: clamp(0.5rem, 2vw, 1rem);
}

---

🧾 요약

• clamp()는 반응형 사이즈 조절을 간편하게 할 수 있게 해줌
• 최소~최대 사이에서 뷰포트에 따라 자동으로 값이 결정됨
• rem, vw 등 단위를 조합하면 유연한 UI 구현 가능