CalfTo

범용폰트패밀리( generic font-family )

serif : 가변폭, 세리프(각 문자의 자획 끝에 있는 장식), 예

  - Times, TimesNR,  Georgia, New Centry Schoolbook

sans-serif : 가변폭, 세리프 없음

  - Helvetica, Geneva, Verdana, Arial, Universe

monospace : 고정폭(소문자 i 와 m 의 너비가 같음), 세리프 유무와 관계없이, 같은 너비를 가지는 폰트는 고정폭폰트임

  - Courier, Courier New, Andale Mono

cursive : 필기체폰트, 대부분 곡선으로 구성되어 있으며 serif 폰트보다 과장된 자획장식 있음

  - Zapf Chancery, Author, Comic Sans

fantasy : 정의할 만한 특정기준 없음

  - Western, Woodblock, Klingon

적용방법

속성값 : [[<family-name> | <generic family>],]* [<family-name> | <generic-family>] | inherit

상속 : YES

적용대상 : 모든요소

예제)

body { font-family: serif;}

h1, h2, h3, h4 { font-family: sans-serif;}

code, pre, tt, span.input { font-family: monospace;}

p.signiture {  font-family: curisve;}

h1 { font-family: Arial, sans-serif;}

h2 { font-family: Charcoal, sans-serif;}

p { font-family: TimesNR, serif;}

address {  font-family: Chicago, sans-serif;}

p { font-family: Times, TimesNR, 'New Century Schoolbook', Georgia, 'New York', serif;}

권장사항 : 폰트 패밀리 규칙에 항상 범용폰트패밀리를 추가할 것

폰트이름에 공백이나 #,$, 쉼표, % 등 특수기호가 있는 경우 인용부호(작은따옴표나 큰따옴표)를 써야한다.

인용부호는 작은따옴표나 큰따옴표 둘다 사용가능하나 다음의 예제의 경우 잘 살펴야 한다.

p { font-family: sans-serif;} /* 이때 'sans-serif' 라고 하면 안됨, 브라우저는 범용폰트가 아닌 sans-serif 라는 이름의 특정 폰트를 찾으려고 함 */

<!-- 다음의 예제는 맞다(작은 따옴표 사용) -->

<p style="font-family: 'New Century Schoolbook', Times, serif;">.... </p>

<!-- 다음의 예제는 맞지 않다(큰 따옴표 사용) -->

<p style="font-family: "New Century Schoolbook", Times, serif;">.... </p>

absolute positioning : parenet 의 좌표

fixed positioning : browser window 내(view port) 좌표

relative positioning

- respect to other element on the page,

- depends on the default flow layout

- offset based on preceding element

- does not overlap (occupy own space)