6. 폰트(Font)
현재 2011년 10월 기준 CSS3 Draft 문서(“http://www.w3.org/TR/css3-fonts/”)에는 다양한 형태 폰트(font) 속성을 설정할 수 있는 방법들이 소개되어 있는데 이 책에서는 가장 기본적인 font 속성 을 이용하는 방법 정도만 소개합니다.
6.1 font-family 속성을 이용하여
사용할 글꼴을 설정하기
font-family 속성은 요소에
사용할 글꼴을 설정하는 속성으로 다음과 같은 형식을 사용합니다.
font-family : family-name | generic-family | [family-name generic-family] | inherit;
속성값으로 “family-name”이나 “generic-family”이 올 수 있으며 “family-name”과
“generic-family”을 같이 조합하여 사용할 수 있으며 마지막으로 부모 요소로부터 상속받는
“inherit”가 올 수 있습니다.
“family-name”에는 글꼴들 중 해당 글꼴의 이름을 “굴림”, “바탕”, “Helvetica”, “Verdana”와 같이 명시하면 되고 여러분이 원하는
“family-name”을 콤마(,)를 함께 여러 개 정의하여
사용할 수 있습니다. 그렇게 하면 브라우저는 콤마(,)로
분리된 다수의 “family-name”을 순차적으로 검색하여 맞는 찾아 그것을 이용하게 됩니다.
다음으로 “generic-family”에는 “serif”,
“sans-serif”, “cursive”, “fantasy”, “monospace” 값이 올 수 있습니다. 각각 다음과 같은 특징을 가지고 있습니다.
|
generic-family 값 |
의미 |
|
serif |
명조체 계열 |
|
sans-serif |
고딕 계열 |
|
cursive |
필기체 계열 |
|
fantasy |
장식체 계열 |
|
monospace |
고정폭 |
“generic-family”를 사용할 때
주의할 점은 실제 사용시에는 이중 따옴표(“ ”)를 사용하지 않으며 예를 들어 나타내면 다음과 같습니다.
p { font-family: Arial, Helvetica, sans-serif
}
“generic-family”를 이용하는 이유는 여러분이 family-name에 명시한
글꼴, 예를 들면 “굴림”,
“바탕” 글꼴을 이용하여 구축한 웹사이트를 해당 글꼴이 설치되지 않은 컴퓨터에서 웹 브라우저를
통해 연결할 경우 시스템에 “굴림”, “바탕” 글꼴이 없어서 정확하게 텍스트(text)를 나타내지 못할 수 있습니다. 하지만 “generic-family”를 사용할 경우 “굴림”, “바탕” 글꼴이
없으며 설정한 “generic-family”를 이용하여 텍스트(text)를
비슷하게 나타낼 수 있습니다.
정리하면 “family-name”와 “generic-family”을 같이 사용할 경우에는 서로 맞는 조합이 있는데
About.com의 가이드인 Jennifer Kyrnin에 의하면 다음과 같이 구분하여
사용할 수 있습니다.
|
generic-family 값 |
관련 family-name |
|
serif |
Garamond, Georgia, New York, Times, Times New Roman |
|
sans-serif |
Arial, Geneva, Helvetica, Lucida Sans, Trebuchet, Verdana |
|
cursive |
Century Gothic, Comic Sans MS |
|
fantasy |
Copperplate, Desdemona, Impact, Kino |
|
monospace |
Courier, Courier New, Lucida Console, Monaco |
이제 예제를 해봅니다. 차이점을 파악하기 위해서 영어의
격언을 하나 가지고 해보도록 합니다. “시간은 사람을 기다려 주지 않는다.”라는 뜻의 “Time and tide wait for no man.” 문장을
가지고 방금 전 설명한 font-family 속성을 알아봅니다. 메모장을
열어서 다음과 같이 코드를 작성합니다.
<!DOCTYPE HTML>
<html>
<head>
<title>font-family 예제</title>
<style>
p#serif{ font-family:Georgia, serif
}
p#sans-serif{ font-family: Arial,
Helvetica, sans-serif }
p#cursive{ font-family: "Century
Gothic", cursive }
p#fantasy{ font-family: Impact,
fantasy }
p#monospace{ font-family: "굴림체", GulimChe,
monospace }
</style>
</head>
<body>
<p id="serif">Time and
tide wait for no man.</p>
<p id="sans-serif">Time
and tide wait for no man.</p>
<p id="cursive">Time and
tide wait for no man.</p>
<p id="fantasy">Time
and tide wait for no man.</p>
<p id="monospace">Time
and tide wait for no man.</p>
</body>
</html>
“family-name”에서 공백이
존재하는 영문 폰트이름으로 경우 이중 따옴표(“”)로 묶어주고 한글의 경우는 한 단어라도 이중 따옴표(“”)로 묶어준 후 콤마(,) 다음에 영문이름을 같이 써서 사용합니다. “font-familyEx.html”로 저장한 후 IE9로 열어보면
다음과 같이 나타납니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 CSS3에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 6.3 font-stretch 속성을 이용한 글자를 좁게 넓게 나타내기 (0) | 2013.08.04 |
|---|---|
| 6.2 font-weight 속성을 이용하여 글자 가늘고 굵게 만들기 (0) | 2013.08.04 |
| 5.2 색(Color)을 표현하는 방법 (0) | 2013.08.04 |
| 5. 색(Color) (0) | 2013.08.04 |
| 4. CSS에서 사용되는 수치(Measurements) (0) | 2013.08.04 |
