pt, px, em, % 비교표

웹디자인을 하면서 글꼴(폰트) 크기를 표현하는 방법에는 pt, px, em, % 가 있다. 나는 이미지 사용이나 기존 테이블 레이아웃을 할 때의 습관으로 px 를 주로 사용하는 편이다. 하지만 해외 웹사이트의 대부분이 em 을 사용하며, 유동성 부분 때문에 em이 표준으로 자리잡아가고 있다.

REEDdesign 사이트에 이들 수치에 대한 비교표가 있다.

픽셀과 포인트, em의 비교표



16개의 의견이 있습니다. | 당신의 의견을 바랍니다.

  1. 1. Gravatar erin | 2005.04.17 , 오후 05:15 · permallink

    아무래도 em이나 pt가 좋죠.. px보다는…
    저 같은 경우는 pt를 선호하는 편입니다..

  2. 2. Gravatar hooney | 2005.04.17 , 오후 05:30 · permallink

    해외에서는 em이 표준으로 자리잡아간다고 하더군요. pt는 모니터 해상도에 영향을 많이 받고, px는 mac과 linux에서 예상치 못한 결과를 초래한다고 하네요. ^-^

  3. 3. Gravatar erin | 2005.04.17 , 오후 07:04 · permallink

    네.. 한참 px 쓰다가 당황스러운 적이 있어서요… pt로 곧 바꿨던 것으로 기억함니다.. 금방 이야기 듣고는 em으로 변경했습니다. 모니터 해상도에 영향을 받는다라… 곰곰히 생각을 해 봐야겠습니다.

  4. 4. Gravatar likejazz | 2005.04.18 , 오전 02:36 · permallink

    굿! 방금 제 블로그의 모든 폰트를 em 단위로 변경하였습니다.

  5. 5. Gravatar hooney | 2005.04.18 , 오전 09:17 · permallink

    저 역시 likejazz님 블로그에서 좋은 정보 많이 얻었답니다. :)

  6. 6. Gravatar 쿠키~* | 2005.04.18 , 오후 12:09 · permallink

    윽.. 전 예전에 한참 pt로 쓰다가
    언젠가 (아마도 F모에이전시) 다른 코더들이 px을 추천해주길래 px로 다 바꾸어서 썼는데..
    이제 다시 또 em으로 바꾸어야 겠네요@_@
    회사에서 포인트 비교하려구..
    저것과 비슷한 표를 로컬에 만들어 두었는데
    전 미리보기식으로 만들었어요.. 그래서 표가..
    밑으로 갈수록 대빵 만해졌답니당… 으흐흐

  7. 7. Gravatar hooney | 2005.04.18 , 오후 02:40 · permallink

    저도 사실 어제서야 em으로 수정했답니다.
    기본폰트 크기를 12px로 쓰다가 0.75em으로 변경하니 어색하더군요.

    해외 사이트들은 폰트 뿐만 아니라 div 박스나 span에서 활용하고 있더군요.

  8. 8. Gravatar tux | 2005.04.20 , 오후 10:45 · permallink

    em이 표준으로 잡아간다는것에대한 문서 혹시 링크 가능할까요? 그런것에 대해 논하는 곳을 알고싶어요~ 우리나라에선 거의 전무하다 시피한 부분이라서요.
    좋은정보 감사합니다!

  9. 9. Gravatar hooney | 2005.04.21 , 오전 12:12 · permallink

    WCG(Web Standards Group)에 가시면 관련 내용을 찾을 수 있습니다.
    WCG는 로그인을 해야 포럼 내용을 확인할 수 있기 때문에 링크가 안돼네요.

    간단한 절차에 따라 가입하시고 WCG의 회원이 되세요~ 어쩌면 당신 한국의 3번째 회원인 될 수도 있답니다. :)

  10. 10. Gravatar 일모리 | 2005.04.21 , 오전 12:29 · permallink

    저도 가입은 했지만… ㅡㅜ
    Korea 로는 하지 않았네요 확 Korea 로 할까요? ㅎ

  11. 11. Gravatar hooney | 2005.04.21 , 오전 12:46 · permallink

    일몰님 / 제가 일몰님 블로그 버튼 만들어 논 거 있는데, 멜로 한번 보내드릴까요?

    WP 일몰 블로그의 파비콘을 사용했답니다. ^^;

  12. 12. Gravatar 일모리 | 2005.04.21 , 오전 09:29 · permallink

    네 당연히 감사히 받아야죠 ^^

  13. 13. Gravatar likejazz | 2005.04.28 , 오후 05:08 · permallink

    em 의 결정적인 문제점을 발견했어요. IE 5.5 이하에서 1em 의 크기가 지나치게 큽니다. 1em 의 크기가 지금의 크기가 된건 IE 6.0 에서부터인듯해요.

  14. 14. Gravatar erin | 2005.04.29 , 오전 07:01 · permallink

    아무래도 pt를 계속 사용해야 겠습니다.

  15. 15. Gravatar hooney | 2005.04.29 , 오전 08:42 · permallink

    요즘 스팸글이 많기 때문에, 1주 전에 작성한 글에 답글을 달면 일단 조정상태로 대기시키는 플러그인을 설치했답니다. ^^;

    바로 IE5.5를 설치하고 테스트해봐야 겠습니다. 좋은 정보 가르쳐주신 likejazz님 감사합니다.

  16. 16. Gravatar gildong's Web doodles | 2007.06.29 , 오전 11:04 · permallink

    div 크기 단위 px 와 em 의 차이점…

    웹표준을 준수하기 위해 CSS 를 공부 중이다.이전까지는 아주 단순히 화면에 나타나는 위주로만 구성하다가 이제 웹표준에 맞춰 정식으로 적용해보려 한다.그중 가장 사용빈도가 많은 태그인…

당신의 의견을 바랍니다..

사용할 수 있는 HTML 태그 : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



Aboout Author

조훈 Hooney라는 ID로 온라인에서 활동하는 조훈입니다.
자세히 보기 »

CSS Reference

Hooney와 함께 만드는 CSS Reference!


Be Friend~! Be Friend~!