clamp()는 반응형 디자인에서 매우 유용한 CSS 함수로, 2019년에 도입되었습니다. 이 함수는 세 개의 값(최소값, 선호값, 최대값)을 사용하여 속성의 값을 특정 범위 내로 제한합니다.

기본 문법
cssproperty: clamp(최소값, 선호값, 최대값);

작동 방식

선호값이 최소값보다 작으면, 최소값이 사용됩니다.
선호값이 최대값보다 크면, 최대값이 사용됩니다.
선호값이 최소값과 최대값 사이에 있으면, 선호값이 사용됩니다.

실용적인 예시

반응형 폰트 크기:

cssh1 {
font-size: clamp(1.5rem, 5vw, 3rem);
}
이 코드는 h1 요소의 폰트 크기가 최소 1.5rem, 최대 3rem이 되도록 하며, 뷰포트 너비에 따라 5vw로 조정됩니다.

컨테이너 너비 설정:

css.container {
width: clamp(320px, 80%, 1200px);
}
컨테이너 너비는 최소 320px, 최대 1200px이며, 가능하면 뷰포트 너비의 80%를 차지합니다.
장점

미디어 쿼리 없이도 반응형 디자인 구현 가능
코드 간소화
더 유연한 레이아웃 구성 가능

브라우저 지원
현재 대부분의 현대 브라우저에서 clamp() 함수를 지원합니다. 단, IE는 지원하지 않습니다.재시도Claude는 아직 생성한 코드를 실행할 수 없습니다.대vw는?편집CSS에서 vw(viewport width)는 뷰포트 너비에 기반한 상대적 단위입니다:

vw 단위 설명

1vw = 뷰포트 너비의 1%
뷰포트는 브라우저에서 웹 페이지가 표시되는 영역(사용자에게 보이는 화면 영역)을 의미합니다

예시
cssh1 {
font-size: 5vw; /* 뷰포트 너비의 5% */
}

.container {
width: 80vw; /* 뷰포트 너비의 80% */
}
실제 계산 예

뷰포트 너비가 1000px인 경우:

5vw = 50px (1000px의 5%)
80vw = 800px (1000px의 80%)

vw의 장점

화면 크기에 따라 자동으로 조정됨
반응형 디자인 구현에 유용함
미디어 쿼리 없이도 간단한 반응형 요소 만들기 가능

관련 단위

vh: 뷰포트 높이의 1%
vmin: 뷰포트의 너비와 높이 중 작은 쪽의 1%
vmax: 뷰포트의 너비와 높이 중 큰 쪽의 1%

vw는 특히 clamp()와 함께 사용하면 최소/최대 제한을 두면서도 반응형 디자인을 구현하는 데 매우 효과적입니다.