'단위'에 해당되는 글 1건

웹 어플리케이션을 개발하다 보면 폰트나 여백 등에 사용되는 단위들이 혼돈될 때가 많다.
반응형웹을 개발하는 경우 상대단위는 필수적이다.

기본적인 단위계에 대해 정리한다.


절대단위 (in, cm, mm, pt, pc)

in    : inch 단위로 계산(1inch = 2.54cm)
cm  : centimeter 단위로 계산(1cm = 10mm)
mm : mm단위로 계산(10mm = 1cm)
pt   : point 단위로 계산(1pt = 1/72inch)
pc   : pica단위로 계산(1pc = 12pt)

 
상대단위 (px, em, ex, %, rem)
px : pixel을 기준으로한 값. 

      브라우저에는 고정적이지만 표시장치의 해상도에 따라서 상대적인 크기를 갖는다.(1px = 1dot)
em : 해당 폰트의 대문자 M의 너비를 기준으로 한 값.
ex : 해당 폰트의 소문자 x의 높이를 기준으로 한 값.
% : 기본글꼴의 크기에 대해 상대적으로 한 값.
rem : root em 최상위 요소의 크기에 대해 상대적으로 한 값.


반응형웹의 등장과 더블어 rem단위를 많이 사용하게 되는데 이때 가장 문제가 되는 것이 브라우저의 호환성이다.

브라우저 호환성의 확인은 다음 사이트에서 가능하다.

http://caniuse.com/rem

만일 필요한 값을 계산하고 싶은 경우 다음 사이트를 이용하면 편리하게 환산 할 수 있습니다.

http://pxtoem.com

6px 0.375em 37.5% 5pt
7px 0.438em 43.8% 5pt
8px 0.500em 50.0% 6pt
9px 0.563em 56.3% 7pt
10px 0.625em 62.5% 8pt
11px 0.688em 68.8% 8pt
12px 0.750em 75.0% 9pt
13px 0.813em 81.3% 10pt
14px 0.875em 87.5% 11pt
15px 0.938em 93.8% 11pt
16px 1.000em 100.0% 12pt
17px 1.063em 106.3% 13pt
18px 1.125em 112.5% 14pt
19px 1.188em 118.8% 14pt
20px 1.250em 125.0% 15pt
21px 1.313em 131.3% 16pt
22px 1.375em 137.5% 17pt
23px 1.438em 143.8% 17pt
24px 1.500em 150.0% 18pt