✅ 왜 ‘반응형 글자 크기 설정’이 중요한가? 요즘 웹사이트는 데스크탑, 태블릿, 모바일 등 다양한 해상도에서 접근됩니다.
그럴수록 글자 크기의 자동 조절은 더 중요해졌고, 이를 가장 간단하게 해결해 주는 함수가 바로 clamp()입니다.
clamp() 기본 구조 다시 보기
font-size: clamp(최소값, 가변값, 최대값);- 최소값 : 폰트가 절대 이보다 작아지지 않음
- 가변값 : 주로
vw를 사용하여 화면 크기에 따라 자동 계산 - 최대값 : 폰트가 이 이상 커지지 않음
예제 ①: 기본적인 글자 크기 조절
font-size: clamp(16px, 2.5vw, 32px);- 화면이 작을 땐 최소 16px 유지
- 뷰포트 크기에 따라 16px~32px 사이에서 자동 조정
- 데스크탑에서는 32px 이상으로는 커지지 않음
📌 예시 시나리오
- 화면 가로가 320px이면, 최종 글자 크기는 최소값인 16px
- 화면 가로가 600px이면, 최종 글자 크기는 최소값인 16px
- 화면 가로가 800px이면, 최종 글자 크기는 20px
- 화면 가로가 1400px이면, 최종 글자 크기는 최대값인 32px
예제 ②: 여백이나 마진도 반응형으로!
padding: clamp(12px, 4vw, 32px);👉 뷰포트가 작을 땐 최소 12px 여백,
뷰포트가 커질수록 자연스럽게 증가,
지나치게 커지지 않도록 32px로 제한!
마무리
clamp()는 반응형 글자 크기 설정과 여백에도 적용할 수 있습니다. 다만, 적당한 뷰포트 설정값으로 자연스러운 비율을 유지하기 위해서는 실제 기기에서 테스트를 많이 하셔야 합니다. 그렇게 해서 자연스러운 비율이 정해지면, :root를 통해 미리 저장해서 사용하면 개발 속도도 빨라지고, 유지보수도 쉬어집니다.
해당 링크는 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.