CSS clamp() 함수

정의와 사용법

CSS의 clamp() 함수는 최소 값과 최대 값 사이에서 뷰포트 크기에 따라 자동 조정되는 값을 설정합니다.

clamp() 함수는 세 가지 매개변수를 가집니다: 최소 값, 선호 값, 최대 값. 선호 값이 지정된 범위 내에 있으면, 브라우저는 선호 값을 선택합니다; 그렇지 않으면, 브라우저는 최소 값 또는 최대 값을 선택합니다.

예제

<h1> 요소의 최소 폰트 크기를 2rem, 최대 폰트 크기를 3.5rem으로 설정합니다. 동시에, <p> 요소의 최소 폰트 크기를 1rem, 최대 폰트 크기를 2.5rem으로 설정합니다：

h1 {
  font-size: clamp(2rem, 2.5vw, 3.5rem);
}
p {
  font-size: clamp(1rem, 2.5vw, 2.5rem);
}

직접 시험해 보세요

CSS 문법

clamp(min, preferred, max)

기술 세부 사항

브라우저 지원

테이블에 표시된 숫자는 이 함수를 최초로 완전히 지원하는 브라우저 버전을 나타냅니다.