[CSS] 단위 pt, px, em, ex, %

보통 디자인 결과물이 pt, px형태이기 때문에, 그대로 사용하는 것이 편하지만,

해상도와 플랫폼 등에 따라서 접근성을 가지기 위해서는 em, ex, %를 사용하는 것이 좋습니다.

pt, px가 절대적인 단위인 반면에 em, ex, %는 상위 요소에 대한 상대적인 크기를 가지고 있어서 레이아웃을 좀 더 유동적으로 적용시킬 수 있습니다.

예를들어, 최상위 요소가 9pt인 경우 다음과 같습니다.
대부분 브라우저는의 폰트 사이즈는 12pt, 16px, 1em, 100%가 기본입니다.

9pt, 12px, 0.75em, 75%

이를 간단히 표로 정리하면,
 

Point	Pixel	em	%
9pt	12px	0.75em	75%
10pt	13px	0.8em	80%
10.5pt	14px	0.875em	87.5%
11pt	15px	0.95em	95%
12pt	16px	1em	100%
13pt	17px	1.05em	105%
13.5pt	18px	1.125em	112.5%
14pt	19px	1.2em	120%
14.5pt	20px	1.25em	125%
15pt	21px	1.3em	130%
16pt	22px	1.4em	140%

자, 위에서 ex를 나열하지 않은 이유는 무엇일까요?

em과 ex의 차이는 다음과 같습니다.

em : 요소의 대문자 M의 가로 너비를 1로 합니다. 

ex : 요소의 폰트의 소문자 엑스'x'의 높이를 1로 합니다.

폰트가 달라지더라도 pt와 px, em, %값은 어느정도 유사함을 갖지만, ex의 경우에는 폰트마다 다른 경우가 많아서 값이 심하게 변하는 경우가 많습니다.

개인적으로는 ex보다는 em을 사용하시기를 권합니다.

이걸 매번 계산하기는 매우 귀찮으므로, 변환해주는 링크를 이용합시다.

http://emtopx.com/