본문 바로가기

Development/CSS

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

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


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

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

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

9pt, 12px, 0.75em, 75%


이를 간단히 표로 정리하면,
 
PointPixelem%
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%


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

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

em : 요소의 대문자 M의 가로 너비를 1로 합니다. 
ex : 요소의 폰트의 소문자 엑스'x'의 높이를 1로 합니다.


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

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


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