웹페이지 개발 시 반응형은 어느덧 필수가 되었습니다. 디스플레이 별로 웹페이지를 만들지 않고, 하나의 페이지로 다 사용이 가능하게 한 건 CSS의 발달로 가능한 것 같습니다. 그중 오늘 소개할 CSS는 clamp()입니다. 미디어쿼리 없이 clamp()만으로 반응형 설정이 가능합니다.
clamp()
반응형 웹페이지 개발 시 항상 사용하는 미디어쿼리 없이고, 반응형 폰트를 설정할 수 있게 하는 clamp()의 기본 문법과 예제 코드에 관해서 설명해릴께요.
기본 문법
font-size: clamp(최솟값, 선호값, 최댓값);- 최솟값 : 가장 작아도 이 이하로 줄어들지 않음(모바일에 적용)
- 선호값 : vw 같은 가변 단위 → 화면 크기에 따라 늘었다 줄었다.
- 최댓값 : 너무 커지지 않도록 제한(데스크탑에 적용)
실전 예제
.title {
font-size: clamp(1rem, 2.5vw, 2rem);
}- 작은 화면에선 1rem 이상
- 큰 화면에선 2rem 이하
- 그 사이에선 자동 조정
clamp() 어디에 쓰면 좋을까?
- font-size : 반응형 글자 크기에 주로 사용
- padding, margin : 여백에도 유연하게 사용이 가능
- width, height : 가로, 세로 너비에도 사용이 가능
브라우저 호환성
- Chrome, Firefox, Safari, Edge 등 최신 브라우저 완벽 지원 ✅
- IE는 지원 안함 ❌
마무리
CSS의 발전으로 디스플레이별 각 페이지에서 미디어쿼리로 다시 CSS 한 줄로 편하게 개발이 가능해지고 있습니다. 앞으로 또 어떤 기능들이 나올지 궁금하네요. 다음에도 새로운 기능에 대해서 소개해 드리겠습니다.