2018. 1. 24. 11:44ㆍ웹 표준 퍼블리싱 바이블
1. 글자 크기 지정하기
들자 크기는 "font-size" 속성으로 지정합니다. 기본으로 가지고 있는 절대값과 상대값이 있고 CSS의 길이 값을 표현하는 단위 중에서 "px", "em"을 사용할 수 있으며, 비율을 표현하는 "%"를 활용하기도 합니다.
＃ 아무런 지정도 하지 않은 기본 그잘의 크기는 픽셀로 환산했을 때 16픽셀이 됩니다.
1-1. 글자 크기는 7단계의 절대값을 가지고 있습니다. "medium"값이 기본값이고 "small"방향으로 점점 작아지며, "large"방향으로 점점 큰 폰트를 표현합니다.
<style type="text/css"> body{ font-size: xx-small; font-size: x-small; font-size: small; font-size: medium; font-size: large; font-size: x-large; font-size: xx-large; } </style>
|
1-2. "font-size" 속성은 상속을 받게 되는데, 부모요소로부터 한 단계 더 크게 만들거나 작게 만드는 "상대적인" 값을 표현하는 방법이 있습니다. 크게 할 때는 "large", 작게하려면 "smaller"를 적용합니다.
<style type="text/css"> body{ font-size: larger; font-size: smaller; } </style>
|
1-3. 길이 값으로는 주로 "px"과 "em"을 활용합니다. 상속되는 특징을 살려서 상위 선택자(주로 body)에 "px"로 폰트의 크기를 지정하고, 그 자식 선택자들은 "em"을 값으로 지정하면 이후 전체적인 폰트 크기를 수정할 경우 상위 선택자 하나만 수정하면 되는 편리함이 있습니다.
<style type="text/css"> body{ font-family: "돋움",dotum, helvertica, sans-serif; font-size: 12px; } .area{font-size: 1.1em;} .area p{font-size: 2em;} </style>
|
이 문서에서 ".area"의 폰트는 13.2픽셀, ".area p"의 폰트는 26.4픽셀의 크기를 가지게 됩니다. 이후 <body>에 지정한 "font-size"를 16픽셀로 수정하기만 하면 ".area"의 폰트는 17.6px, ".area p"의 폰트는 35.2px이 되는 것입니다.
1-4. 폰트의 크기를 비율의 단위인 "%"로 지정할 수도 있습니다. 이때 100%는 16%, 75%는 12px과 같은 크기를 나타내는데 다음은 %의 값을 환산하여 정리한 표입니다.
Percent (%) |
EMs (em) |
Pixels (px) |
37.5 |
0.375 |
6 |
43.8 |
0.438 |
7 |
50.0 |
0.500 |
8 |
56.3 |
0.563 |
9 |
62.5 |
0.625 |
10 |
68.8 |
0.688 |
11 |
75.0 |
0.750 |
12 |
81.3 |
0.813 |
13 |
87.5 |
0.875 |
14 |
93.8 |
0.938 |
15 |
100.0 |
1.000 |
16 |
106.3 |
1.063 |
17 |
112.5 |
1.125 |
18 |
1118.8 |
1.188 |
19 |
125.0 |
1.250 |
20 |
131.3 |
1.313 |
21 |
137.5 |
1.375 |
22 |
143.8 |
1.438 |
23 |
150.0 |
1.500 |
24 |
'웹 표준 퍼블리싱 바이블' 카테고리의 다른 글
| 4-4. 서체(font)와 글(text) 스타일 - 4 (0) | 2018.01.26 |
|---|---|
| 4-4. 서체(font)와 글(text) 스타일 - 3 (0) | 2018.01.25 |
| 4-4. 서체(font)와 글(text) 스타일 - 1 (0) | 2018.01.23 |
| 4-3. 선택자의 우선순위 (0) | 2018.01.19 |
| 4-2. 다양한 선택자 알아보기 - 4 (0) | 2018.01.18 |