calc, min, max, clamp로 유연한 크기를 계산합니다.
calc는 서로 다른 단위를 계산하고 min/max는 후보 중 최솟값·최댓값을 선택합니다. clamp는 최소·선호·최대 범위 안에서 값을 제한해 유연한 폭과 간격에 유용합니다.
이번 예제의 출발점은 width: min(100%, 560px); padding: clamp(12px, 3vw, 28px);입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 target width의 40px을 20%로 바꿔 계산 결과를 확인하세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
calc 안의 +와 - 연산자 양쪽에는 공백이 필요합니다.
직접 바꿔보세요target width의 40px을 20%로 바꿔 계산 결과를 확인하세요.