한 줄 요약
clamp(최소, 적정, 최대)를 쓰면 글자가 화면 폭에 맞춰 커지고 작아지되, 정해 둔 최소·최대 크기는 넘지 않습니다.
비유로 이해하기
어린이가 입는 고무줄 바지를 떠올려 보세요. 아이가 자라면 함께 늘어나지만, 너무 헐렁하거나 너무 꽉 끼지 않도록 최소와 최대 사이즈가 정해져 있습니다.
clamp(최소, 적정, 최대)가 이 고무줄 바지입니다. 가운데 적정 값에 화면 폭 단위(vw)를 섞으면 화면이 넓어질수록 글자가 커지고, 그래도 최소보다 작아지거나 최대보다 커지지는 않습니다. 미디어 쿼리로 화면 크기마다 숫자를 따로 적을 필요가 줄어들어요.
비교해 보기
- 고정 크기(
64px): 데스크톱에서는 멋지지만 스마트폰에서는 제목 한 단어가 한 줄을 차지합니다. - clamp(
clamp(2.5rem, 1.4rem + 3.6vw, 4.4rem)): 스마트폰에서는 40px, 큰 화면에서는 최대 70px 정도로 자연스럽게 바뀝니다. 독립학교 홈의 메인 제목에 실제로 쓴 값이에요. - 실습 창에서는 화면 대신 상자 폭을 기준으로 하기 위해
vw대신 상자 폭 단위cqi를 썼습니다. 원리는 같아요.
직접 실행해 보기
초록 상자의 오른쪽 아래 모서리를 마우스로 잡고 좌우로 끌어 보세요. 위 제목(clamp)은 상자 폭에 맞춰 커지고 작아지지만, 아래 제목(고정 크기)은 그대로라서 좁은 상자에서 넘칩니다. clamp의 최소·최대 값도 바꿔 보세요.
GenerateBlocks에서는
GenerateBlocks의 글자 크기 칸에는 숫자 대신 clamp(2rem, 1.3rem + 2.2vw, 3rem) 같은 값을 그대로 입력할 수 있습니다. 이 사이트의 섹션 제목(h2)도 이 값입니다. 최소·최대 값을 고르기 어렵다면 Utopia 같은 계산기를 활용하세요.
참고: MDN: clamp() · Smashing Magazine: Modern Fluid Typography Using CSS Clamp · Utopia: Fluid Responsive Design