측정단위

측정 단위의 종류

상대적인값

절대적인값

상대적인 값에 속하는 것은 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

줄과 줄 사이의 간격을 띄워 주는 css의 속성이다. 굉장히 유용한데, 지금 읽고 있는 이 페이지 역시 줄과 줄 사이를 적절하게 띄워 둔 것이다. 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:12px;line-height:120%}

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

숫자로만 지정한경우

p {font-size:12px;line-height:1.2}

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

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

line-height 는 사용하지 않는것이 좋다.