[ css ] 글꼴 사이즈를 반응형으로 만들기
페이지 정보
작성자 웹지기 댓글 0건 조회 17,234회 작성일 18-10-23 10:14본문
반응형 웹에서 골치 아픈 문제 중 하나가 글꼴 사이즈
화면 크기에 비례하는 글꼴 사이즈를 지정할 수 있도록 하기 위해 CSS3 에는 rem(root em) 이라는 단위를 제공
루트 요소인 <html> 요소에 지정한 글꼴 크기를 기준으로 특정 요소의 글꼴 크기를 결정하는 방식으로써
부모 요소의 글꼴 크기를 기준으로 삼는 em 이라는 단위보다 계산하기 편리
또한 페이지 전체적으로 적용되어 있는 서로 다른 크기의 글꼴을 동일한 비율을 적용하여 일괄 변경할 수 있는 방식
[code]
@media (max-width:360px){html{font-size:10px;}}
@media (min-width:361px) and (max-width:399px){html{font-size:11px;}}
@media (min-width:400px) and (max-width:439px){html{font-size:12px;}}
@media (min-width:440px) and (max-width:479px){html{font-size:13px;}}
@media (min-width:480px) and (max-width:519px){html{font-size:14px;}}
@media (min-width:520px) and (max-width:559px){html{font-size:15px;}}
@media (min-width:560px) and (max-width:599px){html{font-size:16px;}}
@media (min-width:600px) and (max-width:639px){html{font-size:17px;}}
@media (min-width:640px) and (max-width:679px){html{font-size:18px;}}
@media (min-width:680px) and (max-width:719px){html{font-size:19px;}}
@media (min-width:720px) and (max-width:759px){html{font-size:20px;}}
@media (min-width:760px) and (max-width:799px){html{font-size:21px;}}
@media (min-width:800px) and (max-width:839px){html{font-size:22px;}}
@media (min-width:840px) and (max-width:879px){html{font-size:23px;}}
@media (min-width:880px){html{font-size:24px;}}
[/code]
자바스크립트로 window.width()를 구해서 html 요소의 글꼴 크기를 변경한다면 좀 더 멋져 보이고 코드 양을 줄일 수 있을 것 같기함.
.btn-small{font-size:1.1rem;}
.btn-medium{font-size:1.2rem;}
.btn-large{font-size:1.4rem;}
.btn-small 버튼을 예로 들면 1.1rem 으로써 360px 이하 너비 단말에서 루트 요소인 html{font-size:10px;} 코드의 영향으로 인해 11px으로 계산됨.
10px 크기의 1.1배 이기 때문에 11px 으로 계산되는 원리
만약 단말 해상도가 720px 이라면 루트 요소의 글꼴 크기가 html{font-size:20px;} 이기 때문에 .btn-small 버튼의 글꼴 크기는 20px 크기의 1.1배 즉 22px 으로 계산됨
위 코드는 화면 크기에 비례해서 약 40px 정도의 간격을 기준으로 루트 요소의 글꼴 크기가 1px씩 증감하도록 미디어 쿼리로 설정해 놓은 것.
rem 단위는 font-size에 한정해서만 사용할 수 있는 것은 아님.
border-width:0.1rem; width:10rem 등과 같이 length 값을 제공할 수 있는 속성의 값 단위로 얼마든지 사용할 수 있다.
IE 8 브라우저가 지원하지 않으므로 국내 데스크톱 단말에 대응하는 서비스에 사용하기에는 무리가 있지만 모바일 단말에 한한다면 상용으로 적용해도 좋을 것입니다.
관련링크
댓글목록
등록된 댓글이 없습니다.