[CSS] clamp() 함수

clamp() 

• 최소값과 최대값 사이에서, 주어진 선호값을 제한하여 반환하는 함수
• 주어진 값이 최소값 이상, 최대값 이하가 되도록 자동으로 제한
• 유동성과 안정성을 동시에 주는 함수
• 반응형 디자인에서 폰트, 여백, 요소 크기 조절에 자주 사용됨

구성

/* [문법] */
css속성명:clamp(최소값, 선호값, 최대값);

1. 최소값(min) → 절대 넘지 말아야 할 하한선
2. 선호값(preferred) → 브라우저가 먼저 시도하는 값 (대개 뷰포트 기반 단위 사용)
3. 최대값(max) → 절대 넘지 말아야 할 상한선

동작 방식

1. 브라우저가 선호값을 계산
2. 그 값이 최소값보다 작으면 → 최소값 사용
3. 그 값이 최대값보다 크면 → 최대값 사용
4. 아니면 → 선호값 그대로 사용

html {font-size:62.5%}
/*
최소값(1.6rem)이 16px (예: 1rem = 10px일 때)라면, 브라우저가 먼저 2vw 값을 계산
- 화면이 작아서 2vw가 16px보다 작으면 → 최소값 16px 사용
- 2vw가 16px 이상이 되는 순간부터 → 2vw 값을 그대로 사용
- 2vw가 24px 이상이면 → 최대값 24px로 제한
*/
font-size: clamp(16px, 2vw, 24px);

•  

 

뷰포트	1vw(px)	2vw(px)	적용 폰트 크기(px)	설명
600	6	12	16	12 < 16 → 최소값 16px
800	8	16	16	16 = 16 → 선호값(16px) 적용
1000	10	20	20	20 > 16 & < 24 → 2vw 적용
1300	13	26	24	26 > 24 → 최대값 24 적용

---

변화 기준

• clamp()에서 말하는 화면이 넓어질수록 또는 작아질수록 변화하는 기준은, 보통 중간에 넣는 "선호값"이 뷰포트 크기 기반 단위인지 여부에 달려 있음
• 화면 크기에 따라 변하는 건 뷰포트 단위(vw, vh, vmin, vmax, lvw, svw, dvw 등)를 쓸 때만 가능
• 이 단위들은 브라우저가 현재 보이는 영역 크기를 기준으로 계산함
• clamp()의 최소,최대값은 보통 rem이나 px로 고정,
  선호 값에 뷰포트 단위를 넣어 반응형 변화 유도

변화 기준이 없는 경우

• px, rem, %(부모 폰트 기준) 같은 고정 단위를 쓰면화면 크기와 상관없이 값이 변하지 않음.
• clamp()의 선호값이 뷰포트 단위가 아니면 화면이 커져도/작아져도 선호값은 그대로 유지되고
  결국 항상 최소값 또는 최대값 중 하나만 적용될 가능성이 높음.

변화 기준이 있는 경우

 

• 예) vw = Viewport Width (뷰포트 너비의 %) 예: 1vw = 현재 화면 너비의 1%
• 화면이 넓어지면 vw 값이 커지고, 화면이 좁아지면 vw 값이 작아짐.
  clamp()의 선호값에 vw를 넣으면 → 화면 크기에 따라 자동 변동

font-size: clamp(16px, 2vw, 24px);

/*
화면 1000px → 2vw = 20px
화면 500px → 2vw = 10px
(이때 10px은 최소값 16px보다 작으니 16px 사용)
*/