CSS clamp() 계산기

작은 화면에서의 크기와 큰 화면에서의 크기라는 두 지점을 지정하면, 화면 너비가 넓어짐에 따라 크기가 부드럽게 변하도록 두 지점 사이에 직선을 그립니다. 그리고 이를 clamp() 함수로 감싸서 작은 화면 크기 미만으로 떨어지거나 큰 화면 크기 초과로 커지지 않도록 한계를 설정합니다. 두 화면 너비 사이에서는 크기가 유동적으로 변하며, 범위를 벗어나면 가장 가까운 한계값으로 유지됩니다.

최소/최대 한계값은 rem 단위로 정의되며, 유동적으로 변하는 중간 부분도 rem 요소를 포함합니다. 그래야 독자가 브라우저를 확대하거나 기본 글꼴 크기를 키웠을 때 글자 크기도 함께 커집니다. 픽셀이나 뷰포트 단위만 사용하면 이 기능이 작동하지 않을 수 있습니다. 사용자가 이해하기 편하도록 입력은 픽셀(px)로 받고, 도구가 루트 글꼴 크기를 기준으로 rem으로 자동 변환해 줍니다.

네, 가능합니다. 동일한 값을 패딩, 마진, 갭, 너비, 높이 등 크기가 들어가는 모든 곳에 적용할 수 있습니다. 미리보기 모드를 '박스'로 전환하면 글자 대신 여백이 늘어나는 모습을 확인할 수 있습니다. 최소 크기와 최대 크기가 같다면 크기 변화가 불필요하므로 일반 고정 길이 값으로 축소됩니다.

네, 그렇습니다. 2020년부터 모든 최신 브라우저가 clamp()를 지원하므로 별도의 대체 코드(fallback) 없이 그대로 사용하셔도 안전합니다. 다만 최대 크기가 매우 크거나 변화율이 가파른 경우에는, 확대가 필요한 독자들을 위해 200% 줌 상태에서도 글자가 정상적으로 커지는지 한 번 확인해 보는 것이 좋습니다.