이 포스트에서는 <span> 태그의 CSS로 <font> 태그를 대체하는 방법을 설명합니다.
HTML의 유용한 태그 <span> 포스트에 설명한 바와 같이 과거에는 <font> 태그가 널리 쓰였으나 W3C에서 ‘HTML 문서에는 의미적인 기능을 부여한다’는 정책 기조를 수립함에 따라 HTML 4.01에서 <font> 태그를 표준에서 제외할 것을 예고하였고 HTML5부터 <font> 태그의 지원이 중단되었습니다. 이에 따라 기존의 <font> 태그는 비슷한 성격을 가진 <span> 태그에 CSS를 입히는 것으로 대체하게 되었습니다.
예전 <font> 태그의 사용법은 다음과 같았습니다.
<font color="color" face="font" size="n">Text</font>
여기서 color는 색상값(예: blue, #0000ff 등), face는 글꼴 이름(예: Arial, 나눔고딕 등), size는 글꼴 크기 단계(최소 1, 최대 7)를 의미합니다.
그러나 <font> 태그로는 정할 수 있는 속성이 글자색과 글꼴 이름과 글꼴 크기의 3가지로 한정되는데다 글꼴 이름을 한 가지만 지정할 수 있고 글꼴 크기의 미세한 값이나 7보다 더 큰 값 등을 지정할 수 없다는 단점이 있습니다. 이 단점은 <span> 태그의 CSS로 해결 가능합니다.
일단 <font> 태그의 size 단계값은 CSS의 다음 값에 대응합니다.
| 단계값 | CSS | ||
|---|---|---|---|
| 1 | 7.5pt | 10px | x-small |
| 2 | 9.75pt | 13px | small |
| 3 | 12pt | 16px | medium |
| 4 | 13.5pt | 18px | large |
| 5 | 18pt | 24px | x-large |
| 6 | 24pt | 32px | xx-large |
| 7 | 36pt | 48px | – |
이렇게 최소 7.5pt(10px)에서 최대 36pt(48px)까지입니다. 물론 CSS를 쓴다면 7.5pt보다 더 작은 글꼴이나 36pt보다 더 큰 글꼴도 가능하고 4단계(13.5pt)와 5단계(18pt) 사이의 15pt 등 미세한 조정도 가능합니다.
그리고 기존 <font> 태그로 불가능하였던 예비 글꼴 이름도 CSS로는 지정 가능합니다. 예를 들어,
.ubuntu-font {
font-family: 'Ubuntu', 'Nanum Gothic', sans-serif;
}
<span class="ubuntu-font">Hello, world!</span>
이렇게 할 경우 Hello, world!라는 문구는 기본적으로 Ubuntu 글꼴을 적용하고, 적용이 불가능할 경우 예비적으로 나눔고딕 글꼴을 적용하고, 이 역시 불가능할 경우 기본 산세리프 글꼴로 적용합니다.
또한, CSS로는 색상을 HSL(H,S,L) 식으로 RGB 대신 HSV 색 공간으로 지정하거나 RGBA(R,G,B,A) 또는 HSLA(H,S,L,A)처럼 불투명도를 지정하여 반투명한 색을 만들 수도 있습니다. 이 또한 기존의 <font> 태그로는 불가능하였던 속성입니다.
그리고,
.hello {
font-size: 13.5pt;
color: #ffff55;
background-color: #0000aa;
font-weight: bold;
}
<span class="hello">Hello, world!</span>
이와 같이 기존의 <font> 글꼴로는 불가능하였던 배경색이나 굵은 글씨 효과 등도 가능합니다. 이미 굵은 글씨는 <strong>이나 <b> 태그로도 가능하지만, 시각적으로 굵은 글씨 효과만 주고 강조의 의미는 부여하지 않고자 할 때 <strong> 혹은 <b> 태그를 쓰지 않고 그 대신 <span> 태그 안에 글씨를 굵게 하는 CSS 효과를 넣을 수도 있습니다.