본문으로 바로가기

CSS 크기 단위

category 웹코딩/CSS 2015.06.17 11:00

CSS에서 사용할 수 있는 여러 크기 단위에 대하여 알아봅니다. 현재는 em, px 정도를 많이 사용하지만 rem 또한, 병행되어 사용되어질 수 있습니다.

그림 출처 : http://www.narga.net/understanding-font-sizing-in-css-em-px-pt-percent-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에 대한 정보들

고정 크기 단위

부모나 기타 요소들에 영향을 받지 않고 항상 일정한 크기를 유지하는 단위이다.

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) 속성  (1) 2015.07.29
CSS3 외형(Appearance) 속성  (0) 2015.07.28
CSS 크기 단위  (0) 2015.06.17
CSS 배치 모델(Placement Model)  (2) 2015.06.16
CSS 박스 모델 크기 #2  (0) 2015.06.15
CSS 박스 모델 (box model) #1  (1) 2015.06.11

댓글을 달아 주세요

티스토리 툴바