반응형 웹 구현에 좋은 함수 clamp()

clamp() 함수는 지정한 범위 안의 값이 3가지의 값만 가질 수 있는 좁은 선택 범위만 제공하지만, 반응형 레이아웃을 위한 간결한 구현이 가능하다.

clamp() 함수의 기본 사용 구문

clamp(min, prefered, max)

• prefered : 기본값
  부모 요소를 기준으로 하는 상대 크기, 또는 상대 단위 값을 사용한다.
  (px와 같은 절대 단위를 사용하면 기능 구현 할수 없음)
• min : 최소 사이즈
• max : 최대 사이즈

🔆 사용 예시

font-size: clamp(1rem, 2.5vw, 2rem);

2.5vw를 가진 글꼴 크기를 가지며 최소 1rem, 최대 2rem 크기까지 커질 수 있다.

사용하기에 따라 미디어쿼리를 대신해 훨씬 간결하고 유지보수가 쉬운 반응형 웹을 제작할 수 있다.
(인라인으로만 구현해야 하는 페이지에서 아주 유용하다.)