<font> 태그를 <span> 태그로 대체하기

이 포스트에서는 <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>
Hello, world!

이와 같이 기존의 <font> 글꼴로는 불가능하였던 배경색이나 굵은 글씨 효과 등도 가능합니다. 이미 굵은 글씨는 <strong>이나 <b> 태그로도 가능하지만, 시각적으로 굵은 글씨 효과만 주고 강조의 의미는 부여하지 않고자 할 때 <strong> 혹은 <b> 태그를 쓰지 않고 그 대신 <span> 태그 안에 글씨를 굵게 하는 CSS 효과를 넣을 수도 있습니다.

답글 남기기

이메일 주소는 공개되지 않습니다.