6.5 font-size 속성을 이용하여 글자의 크기를 설정하기
font-size 속성은 글자의 크기를 설정하는데 사용하는 속성으로 다음과 같은 형식을 사용합니다.
font-size : 속성값;
대개 “medium”을 기본 속성값으로 사용하며 부모
요소로부터 상속받는 형태인 “inherit”와 “절대 크기”, “상대적 크기”, 그리고 우리가 많이 보아온 15pt, 15px, 15cm 등과 같이 고정된 값을 사용할 수 있으며 마지막으로 부모 요소의 font-size를 기준으로 이를 퍼센트(percentage) 형태로
적용하여 속성값을 설정할 수 있습니다.
예제를 다루기에 앞서 “상대적 크기” 값으로
올 수 있는 값은 가장 작은 크기인 “xx-small”부터 중간 크기인 “medium” 그리고 가장 큰 크기인 “xx-large”의 값들이
해당합니다.
그리고 “상대적 크기” 값으로 올 수 있는 값은
부모 요소의 font-size 값이나 table 요소의 font-size 값에 대한 상대적 크기를 나타내는 값으로 “smaller”,
“larger” 값이 올 수 있습니다.
이제 메모장으로 “font-weightEx.html” 파일을 열고 <body>…</body>블록을 다음과 같이 수정합니다.
<body>
<p id="p_xxs">카푸카의 "변신"(xx-small)</p>
<p id="p_m">카푸카의 "변신"(medium)</p>
<div id="div_xxl">
<p>카푸카의
"변신"(inherit)</p>
<p id="p_larger">카푸카의 "변신"(larger)</p>
</div>
<p id="p_length">카푸카의 "변신"(length)</p>
<p id="p_percentage">카푸카의 "변신"(percentage)</p>
</body>
다음으로 <style>…</style> 블록의 기존의 코드를 다음과
같이 수정합니다.
<style>
p#p_xxs{ font-size: xx-small; }
p#p_m{ font-size:12pt; }
div#div_xxl{ font-size:24pt; }
p#p_larger{ font-size:14ptr; }
p#p_length{ font-size: 12px; }
p#p_percentage{ font-size: 50%; }
</style>
다른 이름으로 저장을 선택하여 “font-sizeEx.html”로
저장한 후 IE9를 통해 보면 해당 속성값들이 적용되어 나타납니다.
6.6 font 속성을 이용한 font 설정
font 속성은 앞서
설명한 font-family, font-size 등과 같은 속성들을 포함하여 메뉴(menu)나 메시지 박스(message-box)같은 속성값들을 이용하여
다수의 font 관련 속성들을 설정하는데 사용됩니다. font 속성
설정은 다음과 같은 형식을 사용합니다.
font : [font-style | font-size | font-family | font-weight | line-height ] | capition | small-caption | menu | icon | small-con | status-bar | messagebox | inherit
위에서 caption, small-caption, icon,
menu, message-box, status-bar 속성값들은 각각 button, label 같은
컨트롤, 상태바(status-bar)나 label의 대화상자(dialog box)에 이용되는 폰트를 나타냅니다.
위에서 line-height 속성이 보이는데 한 줄의 높이(height)를 설정하는데 사용하며 보통 %로 표현합니다. 메모장을 열어서 다음과 같이 코드를 작성합니다.
<!DOCTYPE HTML>
<html>
<head>
<title>font 예제</title>
<style>
p{ font: italic bold 12pt Times, serif }
p#lineheight{ font: italic bold
12pt/14pt Times, serif }
p#GulimChe{ font: italic bold 12pt
"굴림체",
GulimChe, monospace}
</style>
</head>
<body>
<p>Franz Kafka의 "변신"</p>
<p id="lineheight">Franz
Kafka의 "변신"</p>
<p id="GulimChe">Franz
Kafka의 "변신"</p>
</body>
</html>
위와 같이 Franz Kafka의 "변신" 이라는 텍스트에 대해서 font 속성을 이용하여 3개의 p
요소에 스타일을 적용하는 예제입니다. id 속성값이 설정되지 않은 첫 번째 p 요소에 대해서 font-style 속성값에 해당하는 italic, font-weight 속성값에 해당하는 bold, font-size
속성값을 이용하여 크기를 12pt 마지막으로 font-family
속성은 p 요소에 사용할 글꼴을 설정합니다.
다음으로 id 속성값이 “lineheight”인 p 요소에 적용할 스타일에서 보면 font-size 속성값 다음에 14pt로 되어 있는 부분이 바로 font 속성에서 설정할 수 있는
한 줄의 높이를 나타내는 속성인 line-height 값입니다. 그
외 id 속성값이 “GulimeChe”는 id 속성값이 설정되지 않은 첫 번째 p 요소와 font-family 속성은 p 요소에 사용할 글꼴만 다르고 동일합니다.
“fontEx.html”로 저장하고 IE9를 이용하여 연결하여 보면 다음과 같이 그 결과를 나타냅니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 CSS3에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 7.3 줄 바꿈(Line Breaking)과 단어 내 줄 바꿈(Word Boundaries) (0) | 2013.08.04 |
|---|---|
| 7. 텍스트(Text) (0) | 2013.08.04 |
| 6.3 font-stretch 속성을 이용한 글자를 좁게 넓게 나타내기 (0) | 2013.08.04 |
| 6.2 font-weight 속성을 이용하여 글자 가늘고 굵게 만들기 (0) | 2013.08.04 |
| 6. 폰트(Font) (0) | 2013.08.04 |