NARADESIGN

웹표준, 웹접근성, 유니버설디자인, HTML, CSS, UI, UX, UD


글꼴 사이즈를 반응형으로 만들기.

본문 건너 뛰기

반응형 웹에서 골치 아픈 문제 중 하나가 글꼴 사이즈입니다. 화면 크기에 비례하는 글꼴 사이즈를 지정할 수 있도록 하기 위해 CSS3 에는 rem(root em) 이라는 단위를 제공하고 있습니다. 루트 요소인 <html> 요소에 지정한 글꼴 크기를 기준으로 특정 요소의 글꼴 크기를 결정하는 방식으로써 부모 요소의 글꼴 크기를 기준으로 삼는 em 이라는 단위보다 계산하기 편리합니다. 또한 페이지 전체적으로 적용되어 있는 서로 다른 크기의 글꼴을 동일한 비율을 적용하여 일괄 변경할 수 있는 방식입니다. 오늘은 머리 속으로만 생각했던 코드를 실제로 구현해 봤습니다.

@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;}}

좀 무식해 보이기도 하네요. 자바스크립트로 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 브라우저가 지원하지 않으므로 국내 데스크톱 단말에 대응하는 서비스에 사용하기에는 무리가 있지만 모바일 단말에 한한다면 상용으로 적용해도 좋을 것입니다.

분류: CSS,웹 기획,웹 디자인,웹 표준 | 2014년 11월 6일, 18:26 | 정찬명 | 댓글: 24개 |
트랙백URI - http://naradesign.net/wp/2014/11/06/2077/trackback/

24개의 댓글이 있습니다.

  1. 박진민 댓글:

    안녕하세요.

  2. 정찬명 댓글:

    @박진민
    네 반갑습니다. ㅎㅎ

  3. 이승일 댓글:

    저는 작업할 때 태블릿 화면 이하에서 CSS3의 사용을 극대화하기 위해서 IE8이하에서는 미디어 쿼리를 지원하지 않는 방향으로 가고 있습니다.(신현석 님 블로그에 포스팅 돼있던 방법입니다) % 문제도 있고 말이죠.. 그리고 respond.min.js을 사용하지 않으므로써 사이트의 속도가 향상됨이 느껴졌습니다.

    IE8 이하에서 반응형 동작이 안되는 거에 대해서는 꽉 막힌 웹에이전시 클라이언트가 아닌 이상 얼마든지 설득 가능한 부분인거 같습니다. ㅎ

    정말 오랜만에 댓글 남기고 갑니다. 오늘이 2014년 마지막 날인데 새해 복 많으시고 즐거운 2015년을 맞이하시길 바랄게요.

  4. 정찬명 댓글:

    @이승일
    네 저도 respond.js 활용 가치가 떨어진다고 느끼고 있어요. 현석님 블로그에 있는 그 포스팅은 제가 못 본 것 같은데 URL 좀 알려 주시면 안될까요? 새해 복 많이 받으세요. ^^

  5. 이승일 댓글:

    @정찬명
    http://hyeonseok.com/soojung/contents/upload/BizDeli%20Responsive%20Web%20Design.pdf
    요 자료를 참고하여 반응형웹 사이트를 작업해왔습니다..

  6. 정찬명 댓글:

    @이승일
    조건부 주석으로 IE 8용 CSS를 분기 처리하는 방법이었군요. 잘 봤습니다.

  7. 장지훈 댓글:

    이해하기 어려운 부분이였는데,

    예제를 포함해서 쉽게 설명해주셔서 감사합니다.^^

  8. […] 설명했는데요. 실제 구현을 위한 기술적인 내용을 자세히 알고 싶다면 글꼴 사이즈를 반응형으로 만들기 포스팅을 […]

  9. […] 설명했는데요. 실제 구현을 위한 기술적인 내용을 자세히 알고 싶다면 글꼴 사이즈를 반응형으로 만들기 포스팅을 […]

  10. 익명 댓글:

    와오ㅜ

  11. […] 설명했는데요. 실제 구현을 위한 기술적인 내용을 자세히 알고 싶다면 글꼴 사이즈를 반응형으로 만들기 포스팅을 […]

  12. 익명 댓글:

    http://sogoonii.github.io/fecamp/sample/fontSize_vw.html
    일부 브라우저만 대응해도 되는 상황이라면 vw 단위를 사용하는 것도 괜찮을 듯 해요.

  13. 학생 댓글:

    안녕하세요 이제 막 미디어쿼리 배워가는 웹디자인 공부하는 학생입니다!

    위의 예제에서 모바일, 태블릿, 데스크탑 크게 3파트로 나누면 되는데 왜 미디어쿼리를 40px단위로 저렇게 많이 했는지 궁금해요.

    @media (max-width:360px){html{font-size:10px;}}
    @media (min-width:361px) and (max-width:759px){html{font-size:20px;}}
    @media (min-width:760px){html{font-size:24px;}}

    이런식으로 3개만 해도 충분하지 않나요?

  14. 정찬명 댓글:

    @학생
    이 예제는 화면 사이즈에 따라 글꼴 크기가 정밀하게 변경되는 예제를 보여주기 위한 것인데요. 일반적으로는 필요 없는 방법입니다. 사용할만한 곳이 있다면 아마도 이벤트 페이지 같은 곳일 것입니다. 참고 링크도 한 번 읽어봐 주세요.

    반응형 웹 관련 글 – http://readme.skplanet.com/?p=9739
    이 포스팅에서 소개한 코드가 적용된 예제 – http://s.codepen.io/naradesign/debug/RNGLeQ? (데스크톱에서 창 크기를 변경하면서 확인해 보세요.)

  15. 익명 댓글:

    하하하

  16. 익명 댓글:

    도움이 많이 됐습니다
    이해하기 쉽게 설명해주셔서 감사해요 ^^

  17. 익명 댓글:

    ^^

  18. 김긴하 댓글:

    감사합니다. 모바일에서 글씨 크기가 작아지지 않아 고민이었는데 덕분에 깔끔하게 해결했습니다.

  19. 1 댓글:

    정말좋은것같아요

  20. 구진희 댓글:

    덕분에 이해하기 한결 쉬워졌어요 고맙습니다!

  21. eccl 댓글:

    안녕하세요. css를 배우는 초기단계에 있습니다.
    미디어 쿼리를 이용해서 폰트사이즈를 vw단위를 사용하려고 보니
    너비에 비례해 반응하다보니 너무 작아지더라구요.
    혹시 폰트사이즈의 최소값을 css로 지정하는 방법이 있나요?
    너무 초보라서 죄송된질문일지도 모르지만…. 간혹 궁금한거 찾을때마다 여기 사이트가 나와서 많이 도움받았던터라 질문도 남겨봅니다. 감사합니다.

  22. 정찬명 댓글:

    @eccl
    폰트 사이즈에 대한 min/max 값을 설정하는 속성은 현재 없습니다. 저라면 글꼴에 상대값을 사용하지 않고 그냥 px을 사용할 것 같아요.

  23. eccl 댓글:

    댓글 너무 감사합니다 .
    코딩의 늪에 빠져 길을 자주 헤매게 되네요
    삽질도 공부다 생각하며 무한 삽질 중에 있습니다.

    오늘은 슬라이드 소스를 공부하고 있었는데

    html {
    font-size: calc(4px + 0.45vw);
    }

    이런 외계어를 발견했습니다.

    너무 충격받았어요. 저런 코드도 가능한건가요?
    혹시 사용해보신적있으신가요??

    궁금한데 주변에 물어볼곳이 없네요.
    귀찮게 해드려서 죄송합니다.

  24. 정찬명 댓글:

    @eccl
    CSS3에 새로 등장한 값을 작성하는 새로운 형식입니다. calc() 괄호 안에서 사칙연산이 가능해요.

    https://developer.mozilla.org/ko/docs/Web/CSS/calc
    https://caniuse.com/#feat=calc

    저는 아직 잘 사용하지 않아요.
    브라우저 호환성 문제도 있고 코드가 직관성이 좀 떨어지는 것 같기도 해요.

댓글 쓰기

전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.

필수 아님

필수 아님