noimage

font의 단위로 em과 %를 사용할 경우 문제점 해결

부제: CSS 초보가 당황할 만한 것 #2

문제 :

Font 단위로 px·pt만 사용하다가 em이나 %를 사용할 경우, 생각했던 것 보다 글씨가 크거나 작게 나온다.

해결법 :

em·%에 대해 정확하게 이해한다.

상황 :

언제나 처럼 각 div나 table에 font 속성을 지정하고 중첩 div나 중첩 table을 사용했다.

이렇게 보일 것임

font_em_preview

해결법

1. em·%에 대해 정확하게 이해한다.

em·%를 px·pt 사용하듯이 사용하지 않습니다.
px·pt는 어떤 상황에서도 크기가 변하지 않는 절대크기 이지만, em·%는 말 그대로 상대적인 크기 입니다.

– 위에 예시한 것 처럼 모든 엘리먼트에 font 크기 설정을 한 경우

  • px·pt를 사용한 경우에는 모든 엘리먼트에 font 크기 설정을 하고 엘리먼트들을 중복으로 쓰든 말든 상관없이 폰트는 지정한 고정 크기로 고정됩니다. (ex. 9pt)
  • em·%를 사용한 경우에는 엘리먼트가 중복될때 마다, 상위 엘리먼트의 75% 크기의 폰트 크기로 보여집니다.
    • container에서는 브라우저 기본 폰트의 75% 크기로 보여집니다. (이 상태를 굳이 절대값으로 따지면 9pt와 동일합니다)
    • contents에서는 브라우저 기본 폰트 기준이 아니라 container에서 보여진 폰트 크기의 75%로 보여집니다. (굳이 또 따지면 9pt의 75%)
    • sidebar에서는 contents에서 보여진 폰트 크기의 75%로 보여집니다. (굳이 또또 따지면 9pt의 75%의 75%)

2. 해결법+덧붙임

  • 한글의 웹글꼴 크기 비교 이런 포스트를 했었는데,
    저기 있는 em·%는 모두 브라우저의 기본 글꼴을 기준으로 em·% 처리가 된 크기입니다.
    1em은 100%와 동일하고, 1em 이라는것은 브라우저의 기본글꼴의 100%크기 라는 뜻입니다.
    브라우저의 기본글꼴 크기(1em·100%)를 기준으로 우리가 보통 사용하는 9pt·12px의 글꼴은 0.75em·75% 크기가 됩니다.
    그리고 브라우저의 기본 글꼴 크기 (1em·100%)는 절대값으로 환산할 경우는 12pt·16px 크기 입니다.

3.위의 예시에서 모든 글꼴을 같은 크기로(절대값일 경우 9pt·12px로) 보이도록 하려면 아래와 같은 방법들이 있습니다.

  1. body에만 0.75em(75%)의 글꼴 크기를 지정해 준다.
  2. container에만 0.75em(75%)의 글꼴 크기를 지정해 준다.
  3. 굳이 각각의 div에 글꼴을 지정해줘야 한다면

위의 예시에서 sidebar만 조금 작게 (절대값일 경우 8pt·11px) 보이도록 하려면 아래와 같은 방법이 있습니다.

“이제는 em·%가 대세다!” 라고 생각하고 기존의 단위들을 바꿔보려고 하는 분들이 많아 지고 있습니다.
기존에 작성된 css에서 단위만을 바꾼다면, 중첩되는 많은 엘리먼트들 때문에 글씨가 깨알만해 지는 것들이 많을 거라고 생각합니다.
고정이 아닌 상위 엘리먼트에 종속된다는 것을 기억하고, 익숙해 지도록 해야겠습니다.

관련 URL

한글의 웹글꼴 단위 및 크기 비교표

  • 기존에 있던걸 상대크기로 변경하려니 도통 감이 안와서 포기하고 새로 만드는 스킨에 em 단위를 적용해봤는데 참 좋더라구요.. 익스플로러에서도 좀 세밀하게 글자크기 조절이 가능했으면 좋았을텐데.. 폰트크기 비교표는 필요할때마다 요긴하게 잘 쓰고있습니다. 감사 ^^

  • 네, 다른분들두 기존에 있던 것들을 “일단 한번 바꿔보자” 이런 맘으로 바꾸려면 쉽지 않을거라고 생각해용.. crizin님 처럼 스킨 새로 만들때 하면 더 편하게 하겠네용 ^^
    작은 것이나마 도움이 된다니.. 감사합니다

  • em과 % 단위는 CSS의 가장 큰 특징인 캐스케이드(계단형 상속 관계)를 이해하고 사용하면, px와 pt보다 훨씬 유동적이며 편리한 단위라고 생각해요.

    아직, CSS2마저 IE6에서 제대로 인식되지 못한 부분들이 많은 점이 있지만, ie7에서나 조금 나아진다고 하니 다행입니다.

    선조, 자손, 부모, 자식의 관계만 파악하고 사용할 수 있으면 CSS의 놀라움에 빠지게 될텐데요. ie가 정말 밉습니다. ㅜ.ㅜ

  • tux

    쿡히님 설명을 쉽게 잘해주시네요. 가독성이 좋게 쓰시는건가..
    전 글을 대충대충 흝어보는(skimming) 습관때문에 글이 눈에 안들어오면 잘 읽지 않죠. 미련없이 pass~
    가끔 제 블로그에 제가 쓴글도 보기 힘들면 읽어보지도 않는다는.. -_-

    후루룩쩝쩝~ 금방 내용이 들어오네요! 저도 담엔 em으로 세팅한번 할까 생각중입니다. 원츄정보!

  • ㅎㅎㅎ 폰트는 그냥 small, x-small, medium 으로 확 정해버리세요 ie 는 한단위 적게 해주어야 합니다만,,, 🙂

  • 제 개인적인 생각으론 폰트 크기는 px로 해주는 게 가장 정확하다고 봅니다. 여러 웹 디자인 책을 읽어봐도 폰트 지정은 되도록 px로 하라고 나와있고, 유명 웹 디자이너들의 CSS 소스를 들춰보면, 폰트 크기는 하나같이 px로 지정해 놓고 있습니다.

    em과 %는 대체로 줄간격, 레이아웃 같이 유동적인 요소에 유용하지만 폰트처럼 고정적인 요소에는 맞지 않다고 봅니다. 따라서 “이제는 em-%가 대세다”라는 말에 완전히 찬동할 수가 없군요. ^^;

  • hooney/
    네, 전 전반적인 관리가 가능하다는 점에서 em이나 %가 좋습니다 ㅎㅎ
    tux/
    사실 저도 글은 대충대충 읽는 편인디.. 제가 쓴 글은 제대로 쓴건지 아닌지 잘 모르겠네용 ㅎㅎ
    일모리/
    그냥 편한대로 쓰는거죠 뭐~
    ceprix/
    폰트 크기 단위에 대해서는 개인의 선택이 될 수 밖에 없을 것 같습니다.
    제 개인적인 의견은 전반적인 사이즈들을 조절할때는 em이나 %가 편리한 것 같다는 생각입니다.
    ceprix님 말도 맞는 것 같고, 유동적인 것도 맞는 것 같고~
    이것저것 써보다 보면 더 알게 되겠죠 뭐 ㅎㅎ

  • yser

    한 번에 글 읽고 답글을 다니 우측에 도배가 되어가네요 ^^;

    파폭이나 익스에서 pt 단위에 따른 폰트 렌더링이 좀 다른 부분이 있더군요. 가령 11pt 이던가 12pt 이던가에 따라 IE 는 글자 크기가 같은데도 파폭은 다르게 보일 때도 있고, 이것이 폰트와 국가 언어에 따라 달라지기도 하던데 도통 정신이 없어서 정확한 비교를 할 수가 없더군요. 때로는 10pt 가 어느 폰트에선 너무 작아서 읽을 수가 없었는데, 그걸 IE 에서 보면 잘 보일 때도 있었구요. 내부 계산에서 소수점을 자르느냐 올리느냐 그런 차이인걸까 생각을 했는데..

    전에 폰트 단위에 따른 차이 글 잘 보았는데 언제 시간 나시면 절대 단위에 따른 브라우저, 글자 폰트 간 차이 이런 것도 한 번 써보심이… ^^;

  • yser

    아 그리고 쿠키님의 글이 읽어 보이기 쉬운 이유 중 하나는 여백과 적절한 색상의 사용 덕분인 듯 합니다. 글 자체가 쉽게 이해할 수 있는 면도 있지만 역시 눈으로 접하는 부분이 친근감이 있달까요.. 여백이 특히 그 역할을 잘 살리고 있는 듯. 느낌입니다.

  • 이런 도배라면 대환영입니다 ㄱㄱ ㅑ~ 하하~
    yser님께서 그렇게 봐주신다면 정말 감사할따름이지요..T_T)@

  • Pingback: kukie » 한글의 웹 글꼴 단위 및 크기 비교()

  • Pingback: NHN UI Develope Guide()

  • Pingback: 나라디자인 » 오픈소스 프로젝트 ‘Zeroboard XE’ 참여 후기.()

  • 내용이 너무 좋습니다.

    너무도 편안한 느낌의 색상과 글씨체를 잘 섞어 쓰셔서 보기에도 너무 편하고 내용도 쏙 들어오네요.

    너무 좋은 내용이라서 네이버 블로그에 퍼갑니다.

    혹, 문제가 된다면 지우도록 하겠습니다.

  • 디노

    필요했던 내용이라 퍼갑니다.
    혹시 문제가 되신다면 삭제하겠습니다.

  • Pingback: CSS Tips | a wonderful life()