상상공장 스킨공작소

홈페이지를 만드는 사람은 종종 그 홈페이지를 이용하는 사람에게 자신의 결과물을 강요하곤 합니다. 방탄웹에도 언급했듯이 가장 대표적인 예가 폰트 사이즈일 것입니다. 디자이너는 보통 픽셀단위의 폰트 사이즈를 사용합니다. 그것이 비단 작업하기 편해서만은 아닐것입니다. 디자이너는 언제 어떠한 경우든 자신의 결과물이 동일하게 보여지길 원합니다. 자존심과 직결되는 문제일수도 있으니까요. 자신이 작업한 포토샵 파일과 프로그램 입히는 과정을 거친 결과물이 조금이라도 틀려지는 날엔 그날로 자신의 프라이드에 상처입고, 프로그래머를 가시눈으로 쳐다보게 될것입니다. 디자이너가 이만한 프라이드도 없다면 그것도 문제아닌가?싶기도 한데 ^^;;;

그 자존심을 조금더 내세워~ 만드는 사람이나 이용하는 사람이나 둘다 만족시키는 방법을 다양한 각도로 찾아 보는건 어떨까요?

방탄웹에 따르면 절대크기 키워드와 퍼센트를 적절히 사용한다고 한다. 아마 익숙치 않은 사람에겐 상당히 골치아플수도 있을것 같습니다. 게다가 IE나 FF 둘다 신경써야 하니까...

공부도 할겸 하나둘 정리해 보려고 합니다.

절대 크기(absolute-size)

글꼴 크기를 지정하지 않았을 경우 기본값은 medium으로 지정됩니다.

• xx-small
• x-small
• small
• medium (← 기본값)
• large
• x-large
• xx-large

상대 크기(relative-size)

상위 엘레먼트의 현재 글꼴 크기에 의해 결정됩니다.

현재 글꼴 크기가 medium으로 지정되어 있다면 larger는 large로 smaller는 small로 현재 글꼴 크기가 지정됩니다.

• larger
• smaller

백분율(percentage)

상위 엘리먼트에 지정된 글씨 크기에 상대적인 크기가 지정됩니다

상위 엘리먼트 글씨 크기가 12pt로 지정되어있는 상태에서 글씨 크기를 120%로 지정했다면 글씨 크기는 14.4pt가 됩니다.

길이 단위

• em : 1em은 브라우저 기본 글꼴의 100%를 말합니다. 백분율과 같이 상대적인 길이 단위

  브라우저 기본 글꼴 medium이 16px라고 가정 한다면 1em = 16px, 0.75em = 12px

• px : 글꼴이 화면(모니터)에 출력될때 글꼴이 차지하는 픽셀의 수. 동일 장치 내에서는 절대적 크기를 나타냅니다. 흔히 화면에 표시되는 세로폭의 픽셀수를 나타냅니다.
• pt : 글꼴이 화면이나 지면에 출력될때 글꼴의 세로폭. 동일 장치 내에서는 절대적 크기를 나타냅니다.