CSS에서 사용할 수 있는 여러 크기 단위에 대하여 알아봅니다. 현재는 em, px 정도를 많이 사용하지만 rem 또한, 병행되어 사용되어질 수 있습니다.
가변 크기 단위
상대적인 크기를 지니는 단위이다.
em
em은 요소에 지정하는 글자 크기 단위다. em 단위를 쓰면 부모 요소에서 지정한 글자 크기를 기준으로 배율을 조정한다. 따라서 2em을 지정하면 부모 요소의 글자 크기의 2배가 된다. 문서 레이아웃을 글자 크기에 따라 유동적으로 만들때 많이 사용한다.
ex
ex는 요소에 들어잇는 현재 폰트의 문자 x의 높이에 해당하는 단위다. ex 단위의 크기는 em과 연관성은 있으나 거의 쓰이지 않는다.
rem
rem은 root em이라는 뜻으로, HTML 문서의 root 요소인 <html>을 가리키며, 이 요소에 지정된 크기를 기준으로 상대적인 값을 가지게 된다는 것이다.
html { font-size: 62.5%; }
body { font-size: 14px; font-size: 1.4rem; }
h1 { font-size: 24px; font-size: 2.4rem; }
IE8이하는 rem을 인식하지 못하기에 그들을 위한 값을 먼저 정의하고, rem을 이후 정의하는 게 포인트다.
더 많은 rem에 대한 정보들
- CSS3: {font-size:*rem} new relative value.
- [번역:CSS3] rem으로 글자 크기 지정하기 – 워드프레스 Twenty Twelve 테마에 사용된 놈
고정 크기 단위
부모나 기타 요소들에 영향을 받지 않고 항상 일정한 크기를 유지하는 단위이다.
in
in은 인치를 의미한다. 이것은 화면의 논리적 인치로 현실에서의 물리적 인치와 다르다. 실제로 물리적 크기는 운영체제 또는 사용자가 선택한 설정이나 모니터에 따라 달라지기 때문에 in을 논리 인치라고 표현하기도 한다.
모니터의 도트 피치에 따라 px 단위의 실제 크기가 달라지고 그에 따라 논리 인치의 실제 크기 역시 달라진다. 또한 운영체제마다 dpi 설정도 다르다. 흔히 매킨토시는 72dpi, 유닉스는 75dpi나 100dpi, 윈도우는 96dpi나 120dpi 값을 쓴다. 이론상 인치의 실제크기는 72dpi에서보다 더 많은 도트가 들어 있는 120dpi에서 더 크다. 요소 너비 96dpi는 윈도우에서는 1in와 같고 72dpi 해상도의 매킨토시에서는 1.33in와 같다.
px
px은 화소를 의미한다. px 단위는 요소를 이미지에 맞춰 정확히 배치해야 할 때 사용하면 좋다. 이미지의 크기 단위가 px이기 때문이다.
pt
pt는 포인트를 의미한다. 1pt는 1/72in 이다.
pc
pc는 파이카를 의미한다. 1pc는 12pt이며 1/6in 이다.
cm
cm는 화면의 논리적 센티미터를 의미한다. 1in는 2.54cm다.
mm
mm는 밀리미터를 의미한다. 1in는 25.4mm다.
96dpi 화면의 크기 단위 환산표
| 값 | 픽셀 | 포인트 | 파이카 | 인치 | 밀리미터 |
|---|---|---|---|---|---|
| 1 pixel | =1px | =0.75pt (3/4) | =0.063pc (1/16) | =0.0104in (1/96) | =0.265mm |
| 1 point | =1.333px (4/3) | =1pt | =0.083pc (1/12) | =0.0138in (1/72) | =0.353mm |
| 1 pica | =16px | =12pt | =1pc | =0.1667in (1/6) | =4.233mm |
| 1 inch | =96px | =72pt | =6pc | =1in | =25.4mm |
| 1mm | =3.779px | =2.835pt | =4.233pc | =0.039in | =1mm |
96dpi 화면의 폰트 크기 단위 환산표
| CSS 값 | em | pt | px | %(퍼센트) | 제목단위 | HTML 값 | 실물 크기 |
|---|---|---|---|---|---|---|---|
| xx-small | 0.50em | 6pt | 8px | 50% | 10px | ||
| xx-small | 0.57em | 7pt | 9px | 57% | 12px | ||
| x-small | 0.63em | 7.5pt | 10px | 63% | h6 | 1 | 12px |
| x-small | 0.69em | 8pt | 11px | 69% | 13px | ||
| x-small | 0.75em | 9pt | 12px | 75% | 2 | 14px | |
| small | 0.82em | 9.75pt | 13px | 82% | h5 | 16px | |
| small | 0.88em | 10.5pt | 14px | 88% | 17px | ||
| small | 0.94em | 11.25pt | 15px | 94% | 18px | ||
| medium | 1em | 12pt | 16px | 100% | h4 | 3 | 18px |
| medium | 1.08em | 13pt | 17px | 108% | 20px | ||
| large | 1.13em | 13.5pt | 18px | 113% | h3 | 4 | 22px |
| large | 1.17em | 14pt | 19px | 117% | 23px | ||
| large | 1.25em | 15pt | 20px | 125% | 25px | ||
| large | 1.38em | 16.5pt | 22px | 138% | 26px | ||
| x-large | 1.50em | 18pt | 24px | 150% | h2 | 5 | 29px |
| x-large | 1.75em | 21pt | 28px | 175% | 34px | ||
| xx-large | 2em | 24pt | 32px | 200% | h1 | 6 | 38px |
'웹코딩 > CSS' 카테고리의 다른 글
| CSS3 이면가시성(backface-visibility) 속성 (2) | 2015.07.29 |
|---|---|
| CSS3 외형(Appearance) 속성 (0) | 2015.07.28 |
| CSS 배치 모델(Placement Model) (2) | 2015.06.16 |
| CSS 박스 모델 크기 #2 (0) | 2015.06.15 |
| CSS 박스 모델 (box model) #1 (2) | 2015.06.11 |
