웹 코딩에 필요한 CSS 단위와 사이즈 비교 표

코딩할 때 크기 속성은 여러 가지 단위로 사용할 수 있다. 요즘 브라우저들은 대부분 확대-축소(Zoom) 기능을 갖추고 있기 때문에 굳이 상대 단위인 em이나 %를 쓸 필요 없이 편한 대로 px나 pt 수치로 입력하면 되지만, 화면 크기에 따라 다르게 출력되는 반응형 페이지를 코딩할 때는 상대 단위를 활용하는 것이 유용하다. 이 장점 때문에 점점 비율 단위가 많이 쓰이는 것 같다.

CSS에 사용되는 size 단위들

CSS의 크기 단위로는 절대 단위와 상대 단위가 쓰인다.

절대 단위

• in(Inches) : 말 그대로 인치(inch)이다. 1인치는 2.54cm이다.
• cm(centimeters) : 우리가 미터법에 따라 쓰는 그 센티미터를 말한다.
• mm(millimeters) : 0.01cm에 해당하는 밀리미터이다.
• pc(picas) : 12포인트가 1파이카이다.
• pt(points) : 1/72인치가 1포인트이다. 12pt 글자 크기라면 0.42cm에 해당한다.

상대 단위(비율 단위)

• em과 ex : 지정되거나 상속받은 폰트 높이에 대한 상대 크기를 말한다.
  가령 'div .A'의 폰트 사이즈를 10px로 정하고 그 단에 상속된 'div .a'의 폰트 크기를 0.8em으로 했다면, 'div .a' 속 글자들은 8px로 출력된다.
  em과 ex가 다른 점은, em은 대문자 'M'의 크기를 기준으로 한 비율이고 ex는 소문자 'x'의 크기를 기준으로 한 비율이라는 것. 즉 1em은 1ex보다 약 두 배정도 높이가 크다.
• %(percentages) : 지정되거나 상속받은 폰트 높이에 대한 상대 크기를 말한다. em을 수치만 다르게 한 것이라고 보면 쉽다.
• px(pixels) : 화면 해상도에 따라 달라진다. 크기를 px로 지정해 둔다면 1028X768에서는 작게 보이는 글자가 800X600 해상도에서는 크게 보일 것이다.

[참고] CSS에 사용되는 size 비교 표(px, em, %, pt)

코딩에 자주 쓰이는 단위들의 사이즈 비교 표를 가져와 소개한다.

Pixels	EMs	Percent	Points
6px	0.375em	37.5%	5pt
7px	0.438em	43.8%	5pt
8px	0.5em	50%	6pt
9px	0.563em	56.3%	7pt
10px	0.625em	62.5%	8pt
11px	0.688em	68.8%	8pt
12px	0.75em	75%	9pt
13px	0.813em	81.3%	10pt
14px	0.875em	87.5%	11pt
15px	0.938em	93.8%	11pt
16px	1em	100%	12pt
17px	1.063em	106.3%	13pt
18px	1.125em	112.5%	14pt
19px	1.188em	118.8%	14pt
20px	1.25em	125%	15pt
21px	1.313em	131.3%	16pt
22px	1.375em	137.5%	17pt
23px	1.438em	143.8%	17pt
24px	1.5em	150%	18pt