작은 화면에서 큰 화면까지 글자 크기가 부드럽게 커지는 clamp() 값을 만듭니다.
clamp(최소, 가변값, 최대)는 가변값을 쓰되 최소·최대 밖으로는 못 나가게 합니다. 가변값을 rem + vw로 두면 화면 폭에 따라 글자가 선형으로 커지고, 양 끝에서 멈춥니다. 미디어쿼리 여러 개 대신 한 줄로 끝납니다.
두 점 (최소뷰포트, 최소크기)와 (최대뷰포트, 최대크기)를 잇는 직선입니다. 기울기 = (최대크기 − 최소크기) ÷ (최대뷰포트 − 최소뷰포트). 그 기울기에 100을 곱한 값이 vw 계수, y절편이 앞의 고정값입니다.
rem은 사용자가 브라우저 기본 글자 크기를 키우면 함께 커집니다. px로 고정하면 그 설정을 무시하게 되어 접근성에서 감점입니다. 특별한 이유가 없으면 rem을 쓰세요.
vw만 쓰면 아주 좁은 화면에서 글자가 너무 작아지고 넓은 화면에서 너무 커집니다. 그래서 최소·최대를 잠그는 clamp가 필요합니다.
네. 같은 계산이 padding, gap, margin에도 그대로 됩니다.
2020년 이후 모든 주요 브라우저가 지원합니다. IE는 안 되지만 이제 대상이 아닙니다.