[ css ] 글꼴 사이즈를 반응형으로 만들기 > Html

본문 바로가기
사이트 내 전체검색

Html

[ css ] 글꼴 사이즈를 반응형으로 만들기

페이지 정보

작성자 웹지기 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 댓글 0건 조회 528회 작성일 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 브라우저가 지원하지 않으므로 국내 데스크톱 단말에 대응하는 서비스에 사용하기에는 무리가 있지만 모바일 단말에 한한다면 상용으로 적용해도 좋을 것입니다.

추천0 비추천0

댓글목록

등록된 댓글이 없습니다.

Total 61건 1 페이지
Html 목록
번호 제목 글쓴이 조회 추천 비추천 날짜
61 웹지기 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 232 0 0 04-25
60 웹지기 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 355 0 0 11-27
59 웹지기 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 603 0 0 11-27
58 웹지기 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 451 0 0 11-23
57 웹지기 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 344 0 0 11-23
56 웹지기 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 966 0 0 11-02
55 웹지기 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 438 0 0 10-30
54 웹지기 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 637 0 0 10-24
53 웹지기 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 481 0 0 10-23
52 웹지기 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 504 0 0 10-23
51 웹지기 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 576 0 0 10-23
열람중 웹지기 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 529 0 0 10-23
49 웹지기 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 444 0 0 10-15
48 웹지기 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 413 0 0 10-15
47 웹지기 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 288 0 0 10-04
게시물 검색

회원로그인

접속자집계

오늘
56
어제
184
최대
283
전체
45,878

그누보드5
Copyright © funyphp.com. All rights reserved.