clamp()

형식 구문 
property: clamp(최소 허용값, 선호값, 최대 허용값);
구문 
padding: clamp(10px, 1em, 30px);
width: clamp(220px, 45%, 430px);
font-size: clamp(1.8rem, 2.5vw, 2.8rem);

clamp()는 CSS 속성 값을 지정할 때 사용하며, 괄호 안에 선호값과 선호값으로 허용할 수 있는 범위인 최소 허용값과 최대 허용값을 지정해서 비교한 하나의 값만을 나타내는 비교 함수형 표기법입니다.

즉, 선호값이 범위 내에 있으면 선호값을, 범위보다 작으면 최소 허용값, 범위보다 크면 최대 허용값을 값으로 나타냅니다.

예를 들어, padding: clamp(10px, 1em, 30px)의 경우

  • '선호값'인 1em이 10px보다 작으면 → 10px 적용
  • '선호값'인 1em이 30px보다 크면 → 30px 적용
  • 범위 내에 있으면 → '선호값'인 1em 적용

예제

HTML 
<button class="small-btn">Small Button</button>
<button class="medium-btn">Medium Button</button>
<button class="large-btn">Large Button</button>
CSS 
/* 공통 버튼 스타일 */
button {
  padding: clamp(10px, 1em, 30px);
}

/* font-size가 다른 버튼 스타일 */
.small-btn {
  font-size: 12px; /* padding: 10px (최소 허용값) */
}
.medium-btn {
  font-size: 24px; /* padding: 1em (선호값) 즉, 24px */
}
.large-btn {
  font-size: 40px; /* padding: 30px (최대 허용값) */
}

코드 부연설명
em 단위가 font-size 이외의 길이에 관련된 속성의 값(예제에서는 padding의 값으로 사용됨)에서는 지정하려는 현재 요소의 font-size를 1em의 기준으로 합니다.

실제 적용된 모습

이처럼 clamp()는 CSS 속성 값을 지정할 때 괄호 안의 고정된 값 범위 내에서 계산된 하나의 값을 나타내는 함수형 표기법입니다.

clamp() 함수는 특정 값이 최소 허용값과 최대 허용값 사이에서 유동적으로 변할 수 있도록 하기 위한 비교 함수형 표기법입니다.

"clamp, 조여서 고정하다!"

clamp() 함수의 이름에 사용되는 clamp는 원래 무언가를 조여서 고정하는 도구를 의미합니다.

clamp
클램프(clamp) 이미지 - 이미지 생성: Google AI -

위 이미지는 물체를 조여서 고정하는 공구인 클램프(clamp)를 나타낸 것입니다.

CSS의 clamp() 함수도 특정 범위 내의 값을 "조여서 고정"하는 역할을 합니다.
즉, 클램프가 물체를 잡아 고정하듯이, 이 함수도 특정 범위 내의 값으로 "조여서" 유지한다고 이해할 수 있습니다.

구문 설명

CSS 
clamp(MIN, VAL, MAX)

clamp()의 괄호 안에 쉽표(,)로 구분된 세 개의 값이나, 값으로 나타낼 수 있는 표현식을 사용할 수 있습니다.
표현식은 덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/) 및 괄호 등을 사용하여 숫자나 숫자와 단위가 조합된 기본적인 계산식과, CSS에서 값으로 유효하다고 평가할 수 있는 다른 표현식일 수 있습니다.

참고하세요!
clamp(MIN, VAL, MAX)가 주어지면 max(MIN, min(VAL, MAX))와 정확히 같은 값을 표현합니다 .

MIN

'최소 허용값'입니다. '선호하는 값'인 VAL이 이 값보다 작지 않아야 되는 하한값을 지정합니다.
VAL이 이 값보다 작으면 clamp(MIN, VAL, MAX)는 이 값(MIN)을 나타냅니다.

VAL

'선호하는 값'입니다. 가장 선호하는 값을 지정합니다.
'최소 허용값'인 MIN과 '최대 허용값'인 MAX사이에 있는 값일 경우 clamp(MIN, VAL, MAX)는 이 값(VAL)을 나타냅니다.

VAL(선호값)은 일반적으로 상대적인 값을 사용합니다.
clamp() 함수는 특정 값이 최소 허용값과 최대 허용값 사이에서 유동적으로 변할 수 있도록 하기 위한 비교 함수형 표기법입니다. 값이 정해져 있는 절대값(예: px) 보다는 유동적인 상대적인 값(예: %, em, vw) 값을 사용할 때 VAL(선호값)으로 지정하고, '최소 허용값'인 MIN과 '최대 허용값'인 MAX 범위 내에서 값을 지정하기 위해 사용하기 때문입니다.

MAX

'최대 허용값'입니다. '선호하는 값'인 VAL이 이 값보다 크지 않아야 되는 상한값을 지정합니다.
VAL이 이 값보다 작으면 clamp(MIN, VAL, MAX)는 이 값(MAX)을 나타냅니다.

주의할 점

clamp()에서는 auto, initial, inherit, unset, none, normal, bold, min-content, max-content, fit-content 등과 같은 CSS 키워드 값을 사용할 수 없습니다.

유연한 디자인을 위한 clamp() 함수 활용 사례

clamp() 함수는 특정 값이 지정된 범위 내에서 유동적으로 변하도록 설정할 수 있는 강력한 CSS 함수입니다. 이 함수는 '최소 허용값'(MIN), '선호값'(VAL), 최대 허용값(MAX)을 지정하면 그 사이에서 적절한 값을 계산합니다. 이 함수를 활용하면, 고정된 값을 사용하지 않고도 더 유연하고 반응형인 디자인을 구현할 수 있습니다.

반응형 폰트 크기 조절하기

뷰포트의 크기에 따라 폰트의 크기(font-size)를 반응형으로 조절하는 예제입니다.

뷰포트(viewport)는 웹 브라우저 용어로, 현재 창(또는 전체 화면 모드로 문서를 보고 있는 경우 화면)에 표시되는 문서의 부분으로 웹 페이지가 보여지는 영역을 의미합니다.

HTML 
<h4 class="type">반응형 폰트 크기 조절하기</h4>
CSS 
/* 글꼴 크기를 12px와 100px 사이로 유지 */
.type {
    font-size: clamp(12px, 10 * (1vw + 1vh) / 2, 100px);
}

코드 부연 설명
vw와 vh 단위는 CSS vh, vw, vmax, vmin – 뷰포트 백분율 길이 단위를 참조하세요.

실제 적용된 모습

위 예제에서는 clamp()를 사용해 폰트 크기가 최소 12px, 최대 100px 사이에서 10 * (1vw + 1vh) / 2의 값에 맞춰 유동적으로 변하도록 설정합니다. 뷰포트 크기에 따라 폰트 크기가 자동으로 조정되어 다양한 화면 크기에서 반응형 스타일을 구현하기에 용이합니다.

반응형 레이아웃

다음은 반응형 레이아웃에서 플렉스 박스에서 행과 열 사이의 간격을 지정하는 gap 속성에 clamp()를 사용하는 예제입니다.

HTML 
<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
</div>
CSS 
.container {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(10px, 2vw, 30px); /* 반응형 간격: 2vw를 기본값으로, 최소 10px, 최대 30px */
}
.item {
    flex: 1 1 calc(25% - 20px); /* 각 아이템은 4개로 나누어지고, gap에 따라 조정 */
    background-color: lightblue;
    padding: 20px;
    margin: 5px;
    text-align: center;
}
실제 적용된 모습

뷰포트의 크기에 따라 gap이 유동적으로 변하면서, 너무 좁거나 넓은 간격을 방지할 수 있습니다. 작은 화면에서는 간격이 좁아지고, 큰 화면에서는 간격이 더 넓어져 반응형 레이아웃이 자연스럽게 구성됩니다.

브라우저 호환성

clamp() 함수의 브라우저 호환성
함수
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
clamp() 79 79 75 13.1

명세서

clamp() 함수의 명세서 사양
명세서 사양
clamp() CSS Values and Units Module Level 4
#funcdef-clamp

참고문헌

같이 보기