calc, min, max, clamp로 유연한 크기를 계산합니다.
calc는 서로 다른 단위를 계산하고 min/max는 후보 중 최솟값·최댓값을 선택합니다. clamp는 최소·선호·최대 범위 안에서 값을 제한해 유연한 폭과 간격에 유용합니다.
.demo의 padding은 화면 너비의 4%를 쓰되 clamp 때문에 14px 아래로 줄거나 36px 위로 커지지 않아, 화면 너비 350px 이하에서는 14px, 900px 이상에서는 36px에 머뭅니다. 두 .target은 calc(100% - 40px)로 부모보다 정확히 40px 좁아 오른쪽에 같은 폭의 틈이 남습니다. 두 번째 상자의 위 간격은 max(12px, 2vw)라 화면이 600px보다 넓어질 때부터 12px를 넘어 커집니다.
글자 크기에 clamp를 쓸 때 가운데 값을 4vw처럼 vw만으로 적으면 브라우저를 확대해도 글자가 커지지 않습니다. 확대하면 CSS 픽셀로 잰 화면 너비가 그만큼 줄어 vw 값이 상쇄되기 때문이며, 1rem + 1vw처럼 rem을 섞어 두면 사용자의 글자 크기 설정과 확대가 계속 반영됩니다.
calc 안의 +와 - 연산자 양쪽에는 공백이 필요합니다.
직접 바꿔보세요target width의 40px을 20%로 바꿔 계산 결과를 확인하세요.