CSS clamp() 완벽 가이드! 반응형 폰트와 레이아웃 쉽게 설정하기
CSS 25.03.24CSS clamp() 사용법✏️ - 반응형 스타일을 더 스마트하게!
반응형 웹을 만들 때 폰트 크기나 요소 크기를 유동적으로 조절하는 게 고민이셨다면?
CSS clamp() 함수가 해결책이 될 수 있어요!
clamp() 함수는 최소값, 기본값, 최대값을 지정해 주면, 뷰포트 크기에 따라 자동으로 조절되도록 도와주는 CSS 함수입니다.
1 2 | clamp(최소값, 기본값, 최대값) | cs |
기본값을 기준으로, 최소값보다 작아지지 않고 최대값보다 커지지 않도록 제한하는 거예요.
1. CSS clamp() 사용법✏️ – 반응형 폰트 크기 설정
폰트 크기를 화면 크기에 맞춰 조정하고 싶다면 이렇게 할 수 있어요!
1 2 3 4 | h1 { font-size: clamp(16px, 5vw, 32px); } | cs |
최소 16px / 기본값은 5vw (뷰포트 너비의 5%) / 최대 32px
즉, 화면이 작을 땐 16px, 클 땐 32px을 넘지 않도록 자동 조절됩니다!
2. CSS clamp() 사용법✏️ – 버튼 크기 조절
버튼 크기도 뷰포트 크기에 맞게 조정할 수 있어요.
1 2 3 4 | button { padding: clamp(8px, 2vw, 16px); } | cs |
✔ 작은 화면에서는 8px,
✔ 기본값은 2vw,
✔ 큰 화면에서는 16px까지 늘어나요.
[ 예제 ]
See the Pen Untitled by designkits (@designkits) on CodePen.
왜 CSS clamp()를 써야 할까요?
✅ 미디어쿼리 없이도 반응형 조정 가능
✅ 가독성을 높이고 유연한 디자인 구현
✅ 사용자 경험(UX) 개선
이제 복잡한 미디어쿼리 대신 clamp()로 쉽고 깔끔하게 반응형 스타일을 적용해보세요!
