CSS clamp() 생성

최소·최대 크기와 뷰포트 너비로 유동형 타이포그래피용 clamp()를 생성합니다.

최소 크기(px)

최대 크기(px)

최소 뷰포트(px)

최대 뷰포트(px)

CSS 코드

font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);

뷰포트 너비가 최소값 이하일 때는 최소 크기, 최대값 이상일 때는 최대 크기가 되며 그 사이에서는 부드럽게 변합니다. 생성된 값을 font-size 등에 그대로 사용할 수 있습니다.

자주 묻는 질문

Q.CSS의 clamp() 함수란 무엇인가요?

clamp(최솟값, 선호값, 최댓값)의 세 가지 값을 받아, 뷰포트 너비에 따라 값을 늘리고 줄이면서도 최솟값과 최댓값 범위 안에 유지하는 함수입니다. 플루이드 타이포그래피(유동적인 글자 크기)를 구현하는 데 사용됩니다.

Q.생성한 clamp()는 어떻게 사용하나요?

최소·최대 글꼴 크기와 대상 뷰포트 너비를 입력하면 font-size 등에 지정할 수 있는 clamp() 코드를 생성합니다. 출력된 코드를 그대로 CSS에 붙여넣어 사용하세요.

Q.브라우저 지원 상황은 어떤가요?

clamp()는 최신 브라우저에서 폭넓게 지원되므로, 현재 주요 브라우저에서 안심하고 사용하실 수 있습니다.