20
9월
2007

CSS의 em 단위

CSS에서는 글자 폰트 크기나 width, height 등의 크기를 지정할 때 다양한 단위를 사용할 수 있습니다. (pt, px, em, ex, %) 대부분의 브라우저는 단위를 사용하지 않으면 자동으로 px단위(모니터의 픽셀)로 인식하여 렌더링을 하게 되지만, 현재 표준은 단위를 항상 명시해주는 것입니다. (0 제외)

 DIV.test { padding:5px 0 5px 10px; font:normal 9pt 돋움; } 

대부분 HTML 개발 시에는 px 단위를 사용하고 폰트 크기에는 pt, px 단위를 혼용하여 사용하고는 하는데, em 이라는 단위를 사용하자는 움직임도 있는 것 같습니다.

pt, px 가 절대적인 크기를 나타내는데 반해서, em, ex, % 는 상위 엘레멘트에 대한 상대적인 크기를 나타냅니다.

em, ex 단위의 장점이라면 웹 브라우저 메뉴에서 글꼴 크기를 변화시켜 줄 수 있고, 그에 따라 레이아웃을 유동적으로 적용할 수 있기 때문에 접근성이 향상됩니다. 즉 작은 글자를 보기 어려운 분들도 글자 확대를 하여 쉽게 볼 수 있다는 점이죠. (IE6을 사용하신다면 콘트롤 키를 누르고 마우스 휠을 돌려보세요)

IE 기준으로 글꼴 크기를 “보통”으로 지정했을 경우(웹브라우저 디폴트) 최상엘리멘트 1em은 12pt, 16px 와 같습니다. 기준인 셈이죠. 보통 많이 사용하는 굴림체 9pt 의 경우는 12px 이므로 em 으로 환산하면 0.75em 이 됩니다. 참고할 만한 단위표는 다음을 참고!

PointsPixelsEmsPercent
6pt8px0.5em50%
7pt9px0.55em55%
7.5pt10px0.625em62.5%
8pt11px0.7em70%
9pt12px0.75em75%
10pt13px0.8em80%
10.5pt14px0.875em87.5%
11pt15px0.95em95%
12pt16px1em100%
13pt17px1.05em105%
13.5pt18px1.125em112.5%
14pt19px1.2em120%
14.5pt20px1.25em125%
15pt21px1.3em130%
16pt22px1.4em140%
17pt23px1.45em145%
18pt24px1.5em150%
20pt26px1.6em160%
22pt29px1.8em180%
24pt32px2em200%
26pt35px2.2em220%
27pt36px2.25em225%
28pt37px2.3em230%
29pt38px2.35em235%
30pt40px2.45em245%
32pt42px2.55em255%
34pt45px2.75em275%
36pt48px3em300%

단점이라면… 개발이 좀 어렵습니다. 디자인 등에서 사용하는 픽셀 단위를 환산하여 상대적인 크기를 계속 계산해나가야 하기 때문입니다.

또한 IE7이나 파이어폭스의 최신 웹브라우저는 글자 크기를 확대하는 개념과는 다른 “줌브라우징” 기능을 가지고 있습니다. 화면 자체를 확대하기 때문에 절대크기, 상대크기의 의미가 없어져서 em을 써서 접근성을 높이자는 목소리의 설득력이 조금씩 없어지고 있는 듯. 하지만 당분간은 IE6이 득세할 것 같으니 당장의 문제는 아니죠.

그나마 그 단점 중 한가지 정도는 보완해 줄 수 있는 웹 유틸리티를 링크합니다.

이른바 Em Calcurator. 사용 방법은 간단해요. 몇단계 하위 노드로 들어가든 기존의 px 단위를 완벽하게 em 단위로 계산해줍니다. 하던 작업(세션) 저장도 됩니다.

예전에 픽셀 기준으로 작업 하던 것을 잘 활용하면 완벽하게 em단위로 제작해서 한층 높은 접근성을 확보할 수 있습니다. (물론 em단위로 완벽하게 활용하기 위해서는 디자인의 유연성도 필요하기 때문에 디자이너도 고심해야할 필요가 있습니다.)

2 Responses

  1. kayd 댓글:

    em을 사용해서 디자인 할려면 정말 머리 뽀개지죠~ >.,< 소개해주신 사이트 사용하면 좀 덜하겠네요~ 😀 헌데 em 값을 사용하자는 것은 순전히 IE 6 때문입니다. 파이어 폭스나 오페라, 사파리 등의 소위 모던 브라우저는 글꼴 크기를 px로 지정해도 크기 조절이 가능합니다. (줌 기능이 아니라 말씀하신 IE에서의 글꼴 크기 조절과 같은...) 헌데 IE 6는 글꼴 크기를 px로 지정하면 사용자 임의로 글꼴 크기를 변경하는 기능이 안먹습니다. ㅡㅡ; 역시 무서운 IE입니다. 여튼 그래서 글꼴 크기에 em 값을 사용하자는 얘기가 나오기 시작한 것으로 알고 있습니다.

    • 아마티 댓글:

      그러게말입니다…
      원흉은 IE6입니다만, 문제는 이 브라우저의 국내 점유율이 90%대라는 점이죠. 서비스 만드는 입장에선 이를 무시할 수 없으니까요 ^^;;

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다

%d 블로거가 이것을 좋아합니다: