HTML의 <font> 태그는 텍스트의 글꼴 색상, 글꼴 모양(서체), 글꼴 크기를 지정하는 데 사용되는 태그입니다. 이 태그에서 활용할 수 있는 주요 속성은 다음과 같습니다.
- color: 글꼴의 색상을 지정합니다.
- face: 글꼴의 종류, 즉 서체(family)를 지정합니다.
- size: 글꼴의 크기를 지정합니다.
참고: <font> 태그는 HTML5에서 더 이상 지원되지 않습니다. 따라서 최신 웹 페이지를 개발할 때는 CSS를 사용해 글꼴 스타일을 지정하는 것이 권장됩니다. 다만 레거시 코드를 이해하거나 유지보수하는 경우에는 여전히 알아두면 유용합니다.
그럼 이제 HTML에서 <font> 태그를 실제로 구현하는 예제를 살펴보겠습니다.
예제
<!DOCTYPE html> <html> <body> <h2>Playing with Fonts</h2> <p>Displaying different fonts below:</p> <p><font face="arial" size="20" color="yellow">Demo Text!</font></p> <p><font size="10" color="gray">Demo Text!</font></p> <p><font size="15" face="verdana" color="magento">Demo Text!</font></p> <p><font size="8" face="calibri" color="magento">Demo Text!</font></p> </body> </html>
실행 결과
위 예제에서는 <font> 태그의 속성들을 조합하여 각 문단마다 서로 다른 글꼴 스타일을 적용했습니다. 그중 마지막 줄에 사용된 코드는 다음과 같습니다.
<font size="8" face="calibri" color="magento"> Demo Text! </font>
이 코드에서 각 속성이 어떤 역할을 하는지 하나씩 살펴보겠습니다.
먼저 size 속성으로 글꼴 크기를 지정했습니다.
font size="8"
다음으로 face 속성을 사용해 글꼴 서체를 지정했습니다.
font face="calibri"
마지막으로 color 속성을 통해 글꼴 색상을 지정했습니다.
font color="magento"
이처럼 <font> 태그는 세 가지 속성을 자유롭게 조합하여 텍스트의 외관을 손쉽게 변경할 수 있습니다. 하지만 앞서 언급했듯이 HTML5에서는 지원되지 않으므로, 새로운 프로젝트에서는 CSS의 font-family, font-size, color 속성을 사용하는 것이 바람직합니다.