1. clamp() 함수란?
: 브라우저 내장 CSS 표준 함수(clamp(), calc(), min(), max() 등).
순수 CSS에서, 그리고 tailwind에서 []로 임의값을 넣어 사용한다.
🖥️ clamp() tailwind & 순수 CSS
// Tailwind + clamp()
<div className="w-[clamp(300px,50vw,600px)]">
// 순수 CSS로 같은 효과
<div style={{ width: "clamp(300px, 50vw, 600px)" }}>
// React inline style
<div style={{ width: "clamp(300px, 50vw, 600px)" }}>clamp(최솟값, 선호값, 최댓값)
동작 원리:
선호값을 기본으로 사용
선호값이 최솟값보다 작으면 → 최솟값 사용
선호값이 최댓값보다 크면 → 최댓값 사용
2. 예시
font-size: clamp(12px, 4vw, 24px);
동작
화면폭 200px: 4vw = 8px → 12px 적용 (최솟값)
화면폭 400px: 4vw = 16px → 16px 적용 (선호값)
화면폭 800px: 4vw = 32px → 24px 적용 (최댓값)
3. vw 단위
vw = viewport width (뷰포트 너비의 %)
1vw = 화면 너비의 1%
4vw = 화면 너비의 4%
계산 예시:
화면 300px → 4vw = 12px
화면 500px → 4vw = 20px
화면 1000px → 4vw = 40px
4. 코드 분석
jsx// 1. 텍스트 크기
text-[clamp(5px,1.5vw,7px)]
// 분해하면:
// 최솟값: 5px (매우 작은 화면에서도 최소 5px)
// 선호값: 1.5vw (화면 크기에 비례해서 커짐)
// 최댓값: 7px (너무 커지지 않도록 7px로 제한)
jsx// 2. 컨테이너 크기
width: "clamp(40px,11vw,55px)"
// 분해하면:
// 최솟값: 40px (최소 40px 정사각형)
// 선호값: 11vw (화면의 11%만큼)
// 최댓값: 55px (최대 55px까지만)
5. 화면 크기별 실제 적용값
화면 300px일 때:
11vw = 33px → clamp(40px, 33px, 55px) = 40px (최솟값)
1.5vw = 4.5px → clamp(5px, 4.5px, 7px) = 5px (최솟값)
화면 500px일 때:
11vw = 55px → clamp(40px, 55px, 55px) = 55px (최댓값)
1.5vw = 7.5px → clamp(5px, 7.5px, 7px) = 7px (최댓값)
화면 400px일 때:
11vw = 44px → clamp(40px, 44px, 55px) = 44px (선호값)
1.5vw = 6px → clamp(5px, 6px, 7px) = 6px (선호값)
6. 왜 clamp()를 사용하는가?
기존 방식의 문제점:
css/ 고정 크기 - 반응형 안됨 /
width: 50px;
/ vw만 사용 - 너무 작아지거나 커짐 /
width: 10vw;
clamp()의 장점:
css/ 유연하면서도 안전한 범위 내에서 반응형 /
width: clamp(40px, 10vw, 60px);
7. 면접에서 설명할 때 포인트
"반응형 디자인에서 clamp()를 사용한 이유는..."
"사용자 경험 일관성": 모든 기기에서 적절한 크기 유지
"안전장치": 너무 작거나 크지 않도록 최솟값/최댓값 설정
"유연성": 화면 크기에 비례해서 자연스럽게 조정
"성능": 미디어쿼리 없이도 반응형 구현 가능
