0046 font-size 설정하기
앞에서 절대 길이(absolute length)와 상대 길이(relative length) 등을 살펴보았으므로 이제 font-size에 사용되는 길이(length)들이 어떻게 작동하는지 대충 알게 되었다.
텍스트의 크기를 결정하는 것은 알게 되었지만 중요한 것은 다양한 브라우저들 사이에서 일관된 결과물을 만들어내는 것이므로 주로 사용되는 방법에 대해서 알아보자.
우선, <body> 요소에 텍스트의 크기를 규정하여 웹페이지의 기준 텍스트 크기를 설정한다.
그리고 다른 요소들은 em이나 %를 사용하여 상대적인 비율로 텍스트의 크기를 결정한다.
<body> 요소에 기준이 되는 텍스트 크기를 설정할 때, %를 사용한다. 브라우저는 보통 기본 텍스트 크기를 16px로 설정한다. 따라서 <body> 요소에 텍스트 크기를 %로 설정하면 16px에 대하여 비례하는 텍스트 크기가 된다.
<body> 요소의 텍스트 크기를 상대 길이(relative length)인 %를 이용하여 규정하면 나중에는 기준이 되는 <body> 요소의 텍스트 크기만 조절하여 전체 웹페이지의 텍스트 크기를 자연스럽게 조절하는 것이 가능해진다.
관련 자료를 찾다보니 불문율 같은 것이 느껴졌다. 이론적으로는 <body> 요소에서 텍스트 크기를 규정할 때 em이나 %나 모두 동일한 상대 길이(relative length)인데 W3C 튜토리얼이나 교재들을 뒤져보면 모든 예제에서 <body> 요소의 텍스트 크기는 반드시 %나 키워드로 규정하고 있다(키워드는 다루지 않으려고 한다.). 하물며 W3C에서는 em 사용을 권장하면서도 예제에는 <body> 요소에서 em으로 텍스트 크기를 설정하는 사례를 보여주지 않는다.
그래서 Chrome과 FireFox에서 몇 가지 비교 테스트를 해보았지만 <body> 요소에서 font-size를 em으로 정의하나 %로 정의하나 전혀 차이가 없었다. 그래서 불문율이 실제로 있는 것인지 명확하지 않다. 개인적인 망상일지도 모른다고 생각하지만 워낙 HTML의 발달사가 혼란스러워서 과거에 어떤 문제가 있었는지도 모른다는 생각이 든다. 관련 자료를 찾아보니 디자인적인 문제와 개념적인 문제가 혼재되어 이야기를 전개하고 있어 내 역량을 넘어서는 문제라는 생각도 든다. 이에 대한 부분은 좀 더 전문적인 디자이너로 거듭날 때 파악하는 것으로 하고 em과 %에 대한 이야기는 이제 그만하려고 한다.
em이나 %가 아닌 반응형으로 Font 크기를 결정할 수 있다. 이에 대한 상세한 내용은 0045 CSS 반응형 길이(responsive length) 단위 포스팅을 참고하기 바란다.
Anki 파일
아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다.
Ankilog 파일: 
0046 font-size 설정하기.apkg
'Anki로 공부하기 > HTML공부' 카테고리의 다른 글
| 0048 CSS로 색깔 넣기 (0) | 2019.01.11 |
|---|---|
| 0047 CSS의 Font Weight, Style, Variant (0) | 2019.01.08 |
| 0045 CSS 반응형 길이(responsive length) 단위 (0) | 2019.01.04 |
| 0044 CSS의 길이(length) 중 상대 길이(relative length) (0) | 2019.01.03 |
| 0043 CSS의 길이(length) 중 절대 길이(absolute length) (0) | 2018.12.26 |
0043.html
