CSS에서 clamp(최소값, 이상값, 최대값) 함수의 동작 원리는?
쉬움 MDN Web Docs해설
clamp(MIN, VAL, MAX)는 VAL을 계산한 후 MIN~MAX 범위로 제한합니다. 예를 들어 font-size: clamp(16px, 4vw, 24px)은 뷰포트 너비에 따라 글꼴 크기가 변하되 16px 아래, 24px 위로는 가지 않습니다. 반응형 타이포그래피, 여백 등에서 미디어 쿼리 없이 유연한 크기를 구현할 수 있습니다.
clamp(MIN, VAL, MAX)는 VAL을 계산한 후 MIN~MAX 범위로 제한합니다. 예를 들어 font-size: clamp(16px, 4vw, 24px)은 뷰포트 너비에 따라 글꼴 크기가 변하되 16px 아래, 24px 위로는 가지 않습니다. 반응형 타이포그래피, 여백 등에서 미디어 쿼리 없이 유연한 크기를 구현할 수 있습니다.
