폰트는 웹 페이지에서 보여지는 텍스트의 글꼴을 말하며 폰트에 스타일을 지정하는 속성의 종류는 다음과 같습니다.
■ font-family (글꼴)
글꼴(체)을 지정하며 컴마(,)를 구분자로 사용해 여러 개의 글꼴을 같이 지정할 수 있습니다. 여러개의 글꼴을 지정하면 해당 웹 페이지를 보는 사용자의 시스템에 따라 글꼴이 결정됩니다. 앞의 글꼴부터 적용이 되며, 지정한 글꼴이 없다면 무시되고 다음 글꼴이 적용됩니다.
글꼴로 지정할 수 있는 값은 시스템의 폰트들입니다. 윈도우 폰트를 그대로 사용할 수 있으나, 한글이 적용되는 폰트는 그 중 일부분에 지나지 않습니다. 윈도우 상의 폰트 중 사용가능한 한글 폰트의 종류는 [ windows - fonts ] 디렉토리에서 확인할 수 있습니다.
윈도우 폰트들을 테스트 해본 결과 한글 폰트라고 모두 적용되는 것은 아니였습니다. 폰트의 이름을 잘못 작성해서 그런지도 모르겠지만, 확인 결과 한글로 작성된 폰트만 적용되었습니다. 글꼴의 이름에 공백이 들어가는 경우에는 인용부호를 이용하여 작성한다.
글꼴에 키워드를 지정할 수 있는 데, 키워드는 글꼴에 기본 속성을 지정하는 것이다. 키워드의 종류는 다음과 같다.
- serif : 명조계열
- sans-serif : 고딕계열
- cursive : 필기체
- fantasy : 장식체
- monospace : 등폭 글꼴
이처럼 키워드를 등록하는 것은 지정한 모든 특정 글꼴을 사용할 수 없는 경우, 최종적인 선택 범위로 지정해 두는 것이 좋다.
■ font-size (글꼴의 크기)
font-size 속성은 사용할 글꼴의 크기를 설정하는 속성으로 하위 요소들에게 상속된다. 초기값은 medium이며, 7단계의 키워드 또는 절대단위, 상대단위와 같은 단위값, 그리고 상위 요소에 대한 %값 등을 사용할 수 있다. 실수값 + 단위 형태로 표현할 수 있으며, 글꼴 크기에 음수 값을 지정할 수 없다. 또한, 키워드는 영문 글꼴에 특화된 경향이 있어 키워드 값은 국내에서는 잘 사용하지 않는다.
상대단위의 종류 : px, em, ex, %
1. 픽셀(px)
가장 많이 사용되는 단위이며, 같은 해상도의 화면이라도, 화면의 DPI 값에 따라 상대적인 크기로 보이게 된다. 일반적으로 윈도우의 경우 96dpi를 많이 사용하지만 사용자에 따라 변경이 가능한 부분이다. 물론 화면 해상도(1024*768)과 같은 흔히 말하는 해상도에 따라 실제 모니터에 보여지는 크기도 달라진다.
2. 전각(em)
해당 글꼴의 크기를 1로 간주하고 계산하는 단위이다. 즉, 상위 요소로부터 상속된 글꼴의 크기가 1로 간주되어 계산된다. 상위 요소가 없을 경우 디폴트 사이즈를 1로 판단하고 계산된다.
3. ex
해당 글꼴의 소문자 'x'의 높이를 1로 간주하고 계산되는 단위이다. 적용 및 사용은 전각단위인 em과 같다.
■ font-weight (글꼴의 두께)
font-weight 속성은 글꼴의 두께를 지정하는 속성이다. 키워드 값과 정수값을 사용할 수 있다.
■ 지정할 수 있는 폰트 스타일 리스트
[참고] http://www.w3schools.com/css/css_outline.asp
모든 폰트 스타일을 적용할 때 사용할 때는 다음의 순서대로 작성한다.
font 속성을 사용할 때는 스타일이 지정 순서는 위와 같이 적용하고 각 각의 스타일은 뛰어쓰기로 구분한다.
'HTML& CSS > CSS' 카테고리의 다른 글
| 스타일 속성 - 텍스트(text) (0) | 2009.10.16 |
|---|---|
| 스타일 속성 - background (0) | 2009.10.16 |
| 개요 - HTML 문서에 스타일 시트 포함시키는 방법 (0) | 2009.10.10 |
| 개요 - id 선택자와 class 선택자 (0) | 2009.10.10 |
| 개요 - CSS의 문법 설명과 주석 (0) | 2009.10.10 |