4. CSS에서 사용되는 수치(Measurements)

4. CSS에서 사용되는 수치(Measurements)

HTML 요소들에 대한 스타일을 설정하다 보면 많이 보이는 것이 pt, em 같은 수치 단위들을 보게 됩니다. 이러한 수치 단위는 HTML 요소의 많은 속성들, 예를 들면 글꼴 크기(font-size), 여백(margin) 등과 같은 속성들에 보통 절대값이나 상대값에 기반한 크기를 사용합니다.
그래서 수치에 대해서 소개하고자 합니다. 먼저 절대값에 기반한 수치 표현을 알아볼까요?

4.1 절대값 수치
특정한 길이(length)나 높이(height)를 다음과 같은 단위로 명시하여 나타낼 수 있습니다.

단위	설명
pixel(px)	픽셀(pixel)은 컴퓨터 화면의 한 점(dot)를 나타냄
point(pt)	1 pt는 1/72 인치(inch)와 같음
pica(pc)	1 파이카(pica)는 12point와 같음 1 파이카는 1/6 인치(inch)
inch(in)	1 인치(inch)는 2.54센티미터(centimeter)
centimeter(cm)	1 미터(meter)의 1/100
millimeter(mm)	1 미터(meter)의 1/1000

4.2 상대값 수치

부모 요소의 길이(length)나 높이(height)를 기준으로 하여 그 크기가 결정되는 수치로 다음과 같은 단위로 나타낼 수 있습니다.

단위	설명
p%	현재 부모 요소의 길이나 높이의 퍼센트(%) 형태로 나타냄. 예를 들어 body 요소의 글꼴 크기(font-size)가 15pt이고 body 요소의 자식 요소에 해당하는 p 요소가 font-size가 60%로 설정되었다면 실제로 나타나는 크기는 15*0.6 p요소의 font-size는 9pt 크기로 나타나게 됨
em	em은 현재의 크기의 상대값으로 예를 들어 현재 p 요소의 글꼴 크기가 12px이면 1em은 12px을 나타내고 2em일 경우는 2*12 즉 24px을 나타냄
ex	1 ex는 하나의 글꼴(font)의 x-height를 나타내는데 보통 x-height는 글꼴 크기(font-size)의 절반 정도에 해당

정리하면 W3C에서는 컴퓨터 화면에서는 em, px, % 수치 표현을 사용하고 인쇄(print)시에는 em, cm, mm, in, pt, pc, %를 사용할 것을 권고하고 있습니다.
이에 대해서는 “http://www.w3.org/Style/Examples/007/units”를 참고하시기 바랍니다.

- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 CSS3에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인 학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기 바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를 비밀댓글로 남겨주시면 연락드리겠습니다.