측정 단위의 종류

측정 단위는 크게 두 종류가 있습니다.

• 상대적인 값
• 절대적인 값

상대적인 값에 속하는 것은 px(pixel), em, ex, % 등이 있습니다. 이들은 화면의 크기에 따라 측정단위의 크기도 변하는 것들입니다. 예를 들어, 800x600 해상도에서의 1픽셀 크기와, 1024x768 해상도의 1픽셀 크기는 다릅니다. em이나 ex, 퍼센트 등도 그렇습니다.

반면 절대적인 값들이 있습니다. 우리가 일상적으로 많이 사용하는, 인치(inch)라든지, 센티미터, 밀리미터 등이 여기에 속합니다. 그외에, 포인트(pt, points)와 파이카(pc, paicas)도 절대적 단위입니다. 포인트나 파이카는 귀에는 익숙하지만 정확한 크기를 잘 모르고 쓰는 경우가 많은데요. 정확한 크기를 알고 쓰면 더욱 좋겠죠?

1포인트는 1인치를 72로 나눈 값입니다.( 1pt = 1/72inch )
1파이카는 12포인트입니다.( 1pc = 12pt )

em은 어떤 요소의 일반적인 크기를 의미하는 것으로 만약 <p>를 12pt로 지정했다면 1em은 12pt, 2em은 12x2=24pt를 의미하게 됩니다. 조금 더 엄밀하게 얘기하자면 1em은 그 element에 있는 문자의 높이를 의미합니다.

이와 같은 여러 가지 측정 단위들은 화면상의 여러 요소의 크기를 규정할 때 사용되는데, 간단하게는 폰트 크기에서부터 복잡하게는 특정 블럭(block elements)의 화면상의 위치와 크기를 결정하는 데 사용됩니다.

그러면 우선, 폰트 크기에 어떻게 쓰이는지 알아 봅시다.

폰트 크기

예를 들어, 모든 패러그래프를(<p> 와 </p>로 둘러쌓인 부분) 다 10포인트로 하고 싶다면,

p {font-size: 10pt}

가 될 것입니다.

또는 머리말을 나타내는 h2 태그를 '보통'(normal) 싸이즈보다 1.5배 크게 보이는 것으로 설정한다면,

h2 {font-size: 1.5em}

그러면 위에서 얘기한 절대적인 값(이를 테면 point)으로 폰트크기를 지정하는게 좋을까요, 아니면 상대적인 값(em, %)으로 지정하는게 좋을까요? 화면 해상도에 따라 글자 크기가 조절될 수 있도록 상대적인 크기가 좋지 않느냐는 얘기를 하는 사람도 있지만, 사실상 '인터넷 익스플로러에 1024 x 768'처럼 현재 가장 보편적인 해상도와 웨브라우져를 대상으로 고정 값을 주면 큰 무리는 없을 것 같습니다. 그렇게 하는 게 좋은 또 하나의 이유는 em이나 %의 경우 대단히 '불안정'하다고 알려져 있기 때문입니다. 넷스케잎-익스플로러 호환성 문제도 크고, 의도하지 않은 방식으로 디스플레이되는 경우가 예상보다 많습니다. 그러므로 '표준'에 해당하는 해상도와 플랫폼을 중심으로 고정 값을 사용하는 게 더 좋은 것 같습니다.

포인트는 한 가지 조심할 점이 있습니다. 매킨토시에서는 똑같은 포인트의 폰트라도 1/3 가량 작아 보입니다. 이런 이유로 해서 픽셀(px)을 쓸것을 추천하는 사람도 있습니다. 픽셀을 쓰고 싶다면, 윈도우즈의 경우 10pt가 13px 정도에 해당된다고 생각하고 쓰면 됩니다. 즉, 모든 패러그래프를 10 포인트 크기로 하고 싶다면,

p {font-size: 13px}

line-height

line-height는 줄과 줄 사이의 간격을 띄워 주는 css의 속성입니다. 굉장히 유용합니다. 지금 읽고 있는 이 페이지 역시 줄과 줄 사이를 적절하게 띄워 둔 것입니다. 만약 이 페이쥐를 그냥 "소스보기"로 저장해서 웹브라우져로 다시 보면 굉장히 읽기가 불편하게 줄들이 붙어 있을 것입니다. line-height를 사용했기 때문에 페이지의 가독성이 좋아지는 것입니다.

line-height에 대해서 조금 더 자세히 알아 봅시다. 어떤 문서의 각 줄(line)은 실제 글자가 차지하는 부분과 위 아래 여백(leading이라고 합니다)으로 이뤄져 있습니다. '한 줄'이라는 것을 하나의 박스로 생각해 보세요. 그 박스 안에는 실제 글자가 들어 있고, 글자의 위 아래에는 여백이 있는 것입니다. 이러한 박스가 여러 층으로 쌓인 것이 패러그래프(paragraph)입니다.

line-height(한 줄의 크기) = font-size(글자크기) + leading(공백)

위 식에서 보신대로 line-height는 라인의 높이 즉, 그 박스의 높이입니다. 그러므로 line-height를 18px로 지정하고, 그 라인에 쓰이는 폰트 크기는 16px로 지정했다면 18-16 = 2픽셀 만큼의 여백이 남게 됩니다. 그리고 여백은 항상 위 아래 반반씩 가져가게 되므로 글자 위로 1px, 글자 밑으로 1px의 공백(leading)이 생기는 것입니다. 그 결과, 우리 눈에 보이기로는 각 줄의 글자 사이에 '공백'이 있는 것처럼 보이는 것입니다. 즉, 행간을 벌려주는 것입니다.

이러한 line-height를 지정하는 방법에는 여러 가지가 있습니다. 앞에서 본 것처럼 픽셀(px)로 지정할 수도 있고, %로 지정할 수도 있고 또는 그냥 숫자로만 지정할 수도 있습니다. 예를 들어,

p {font-size: 10pt ; line-height: 120%}

라고 지정했다면, <p> 태그에 의해 둘러쌓인 부분은 모두 10pt 크기의 폰트로 보이게 되고 각 줄의 높이(=line-height)는 10pt x 120% = 12pt가 됩니다. 따라서 12 - 10 = 2pt의 여백이 남게 되고, 이 여백은 위 아래 반반씩 가져가니까 글자 위에 1pt, 글자 아래에 1pt 씩의 여백이 생기는 것입니다.

이번에는 그냥 숫자로만 지정해 볼까요? 퍼센트랑 마찬가지입니다. 120%를 1.2로 지정하는 것일 뿐입니다.

p {font-size: 10pt; line-height: 1.2}

또는 다음과 같이 지정할 수도 있습니다.

p {font: 12pt/14pt 굴림}

line-height 14pt 중에 폰트 크기는 12pt를 차지한다는 의미입니다.

그러면 퍼센트와 숫자 사이의 차이는 없을까요? 있기는 합니다. 이 스타일 지정을 상속(inherit) 할때, 전달되는 값이 약간 다른데 그런 것은 별로 중요하지 않습니다. 저의 경험으로는 퍼센트보다 숫자로 지정하는 것이 브라우져나 모니터 해상도에 상관없이 보다 일관된 값을 보여주는 것 같습니다.