웹 어플리케이션을 개발하다 보면 폰트나 여백 등에 사용되는 단위들이 혼돈될 때가 많다.
반응형웹을 개발하는 경우 상대단위는 필수적이다.
기본적인 단위계에 대해 정리한다.
절대단위 (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
'CSS3' 카테고리의 다른 글
[ CSS3 ] 스타일시트 스타일 가이드 (0) | 2020.04.27 |
---|---|
[CSS3] 모서리 둥글게 하는 css 요소 border-radius (0) | 2019.12.04 |
[CSS3] outline과 border의 차이 (0) | 2019.12.01 |
[CSS3] CSS style guide (0) | 2019.11.06 |
[CSS3] 가로 세로 중앙 정렬 방법(2) (0) | 2019.10.30 |
[CSS3] 가로 세로 중앙 정렬 방법(1) (0) | 2019.10.29 |
[CSS3] grid system : cell (0) | 2019.10.29 |
[CSS3] grid system : template (0) | 2019.10.28 |