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 |
