clamp

오늘 컴포넌트를 만들다가. clamp라는 함수를 ai가 만들어주었다. 이게 뭔 말이지? 하고 보니깐. css에서 쓰는 함수이더라. 나는 js 문법인줄 알았는데.. 알고보니 clamp 함수를 js에서 사용하려면 직접 그 함수를 정의해야 하는 것 같다.

CSS clamp()

1. clamp()란

CSS clamp()는 값의 최소값, 기본값, 최대값을 동시에 지정하는 함수이다.

반응형 디자인에서 크기를 유동적으로 조절할 때 많이 사용된다.

형식

clamp(min,preferred,max)

의미

최소값 ≤ 실제 값 ≤ 최대값

즉 preferred 값을 사용하되 min과 max 범위를 넘지 않도록 제한한다.

2. 예시

폰트 크기

font-size:clamp(16px, 3vw, 32px);

동작

• 화면 작음 → 16px
• 화면 커짐 → 3vw 기준으로 증가
• 너무 커짐 → 32px에서 멈춤

컨테이너 너비

width:clamp(320px, 80%, 1200px);

의미

최소 320px
기본 80%
최대 1200px

패딩

padding:clamp(16px, 4vw, 48px);

화면이 커질수록 여백이 자연스럽게 증가하지만

48px 이상 커지지 않는다.

3. 왜 많이 쓰는가

예전에는 반응형을 이렇게 만들었다.

@media (max-width:768px) {
  font-size:16px;
}

@media (min-width:1200px) {
  font-size:32px;
}

하지만 clamp()를 쓰면

font-size:clamp(16px, 3vw, 32px);

media query 없이 반응형 크기를 만들 수 있다.

장점

• 코드가 훨씬 짧음
• 자연스러운 크기 변화
• 반응형 구현이 쉬움

4. Tailwind에서 사용

Tailwind에서는 arbitrary value 문법을 사용한다.

text-[clamp(16px,2vw,24px)]

예시

<h1className="text-[clamp(32px,5vw,56px)] font-bold">
  나에게 맞는 집을 데이터로 찾다
</h1>

정리

• CSS → clamp()가 기본 제공됨

• JavaScript / React → 직접 구현해야 함

    const clamp = (value: number, min: number, max: number) =>
      Math.max(min, Math.min(max, value));
  

• clamp()는 최소값, 기본값, 최대값을 설정해 반응형 크기를 제어하는 CSS 함수이다.