폰트 사이즈 뭐이리 복잡해?...em px pt ex %

블로그의 폰트사이즈를 변경하려다 보니 워드나 파워포인트에서 쓰는 단위가 아닌 px, em등의 단위들이 보이더군요.

무슨차이가 있는 걸까요?

폰트는 주로 CSS(cascading style sheets)파일에서 지정하게 됩니다.

CSS(Cascading Style Sheets) 파일이란?(출처 : 위키피디아) CSS는 마크업 언어가 실제 표시되는 방법을 기술하는 언어로, HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다. W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높다.

결국, CSS파일은 웹 문서의 전반적인 스타일을 미리 지정해 둔 스타일시트입니다. 블로그, 테이블, 제목, 본문 등의 페이지내의 모든 요소의 모양과 색깔, 폰트등을 미리 정해 놓은 파일입니다.
그런데, CSS파일내에서 폰트 사이즈를 결정하려고 하면 em, px, pt, ex, %를 보게 됩니다. 모두 폰트 크기의 단위 입니다.

CSS의 표준권고안에 따르면 크기 단위는 절대단위와 상대단위로 구분됩니다.
 - 절대단위 : in, cm, mm, pt, pc가 있으며 출력장치(모니터)의 물리적 속성을 아는 경우 효율적
 - 상대단위 : em, ex, px, %가 있으며 기종간, 플랫폼 간의 호환성을 유지하는데 유리

- em : font_size, 해당폰트의 대문자 M의 너비를 기준으로 함.  - ex : x-height, 해당폰트의 소문자 x의 높이를 기준으로 함.  - px : pixel, 표시장치(모니터)에 따라서 상대적인 크기를 가짐.  - %  : percent, 기본글꼴의 크기에 대하여 상대적인 값을 가짐.  - pt  : point, 일반 문서(워드 등)에서 많이 사용하는 단위

대부분의 브라우저는 폰트 사이즈의 기본값이 12pt, 16px, 1em, 100% 입니다.
예를 들어, 본문 전체가 12pt으로 설정되어 있는 상태에서 본문내의 테이블에서는 좀더 작은 9pt를 사용하고자 한다면,
em단위로 본문의 폰트사이즈는 1em이 되고 테이블내 폰트사이즈는 0.75em이 되는 것입니다.

이런 단위를 외우고 있기는 힘들기 때문에 단위를 자동으로 변환해 주는 사이트를 소개하면서 마칩니다.

PXtoEM.com(바로가기)

본문(Body)의 폰트사이즈를 선택하면 본문의 폰트사이즈에 맞춘 변환표를 보여주는 사이트 입니다.