blah blah

CSS – Font tag

언제쯤이었는지 기억나진 않지만 사내 메일로 웹 표준 관련 CSS 소개하려고 초안 메모 했던게 있길래 포스팅수나 늘려보려고 그냥 옮겨본다.
CSS 관련 책을 보다 보니 재미있는게 많이 있네요.
CSS 에서 사용하는 font tag 의 font 크기와 관련한 단위들에 대해서 읽은 내용 간단히 요약해봤습니다. 뭐 다 아시는 내용일지 모르지만 그냥 심심풀이로 읽어보세요 ^^;
사용가능한 단위들
pt : Points
pc : Picas
px : Pixels
em : Ems
ex : Exes
%  : Percentages
* points 와 picas
 * 1points = 1/72 inch 라니까 1Points 는 대략 0.354mm 정도됩니다.
 * 1picas = 1/6 inch 이라니까 …
 * points 와 picas 는 스크린에 보여주는 폰트 크기 설정으로는 적합하지 않답니다. 이것은 프린트 디자인을 위한 용도에 최적화된 것으로 프린트용 페이지 디자인에는 적합하지만 일반 스크린으로 디스플레이되는 페이지에서는 디자이너의 의지와 상관없이 크기가 변할 수 있다네요.
 p {
     font-size: 10pt;
 }
* Pixels 
 * 디자이너들이 가장 선호하는 단위로 브라우져나 플랫폼에 상관없이 일관성있는 크기를 유지한다는 장점이 있습니다.
 * 이것은 points, picas 와 대비되는 단위로 생각하면 됩니다. 스크린 상에 보여지는 크기를 설정하는 용도에 적합하며 프린트용 페이지 디자인에는 적합하지 않습니다.
 * 사용자들의 설정값이 전혀 적용되지 않는 문제점이 있는데 가령 사용자가 브라우져에서 글자를 좀 더 크게 보게 설정하더라도 글자 크기가 변하지 않는답니다. 
 p {
     font-size: 12px;
 }
* Ems
 * em 은 상대적인 폰트 크기 단위로 1 em = ‘M’ 문자의 높이 입니다.
 * 1em 은 사용자의 디폴트 폰트 크기와 동일하며 당연히 사용자 설정에 따라 크기가 가변적입니다.
 * em 의 유용함은 정교한 크기 제어가 가능하다는 데 있습니다.
 * 가령 아래의 첫번째 것은 사용자의 기본 설정 글자 크기에 비해 10% 작게, 두번째 것은 10% 크게 설정한 예입니다.
 p {
     font-size: 0.9em;
 }
 p {
     font-size: 0.9em;
 }
* Exes
    * em 과 거의 유사합니다. 다만 1 ex = 소문자 ‘x’ 의 높이와 같습니다.
    * 아직까지는 대부분의 브라우져가  ex 의 크기를 정확하게 지원하지 못한다는군요.
* Percentages
    * em, ex 와 같은 개념으로 상대적인 크기 설정에 사용됩니다.
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s