폰트 태그

less than 1 minute read


지원종료된 폰트 태그

font 태그는 html 3.2 부터 등장하여 html5에 들어선 이후로는 지원하지 않게된다.

하지만 그 사이에 많이 사용되어 왔던 태그이기 때문에 무엇인지 알고 넘어갈 필요가 있다.


속성

폰트 태그는 글자 글꼴, 사이즈, 색상 3가지 속성을 가진다.

<html>
  <head>
  </head>
  <body>
    <font size="5" color="red" face="돋움">Hello World</font>
  </body>
</html>
Hello World
  • size

    글자의 크기를 지정한다.

  • color

    글자의 색상을 지정한다.

  • face

    글자의 글꼴을 지정한다.


사라진 이유

<html>
  <head>
  </head>
  <body>
    <font size="5" color="red" face="돋움">Hello World</font>
    <font size="5" color="red" face="돋움">Hello World</font>
    <font size="5" color="red" face="돋움">Hello World</font>
    <font size="5" color="red" face="돋움">Hello World</font>
    <font size="5" color="red" face="돋움">Hello World</font>
  </body>
</html>

같은 디자인의 문자를 여러번 사용하기 위해서는 똑같은 코드를 중복해서 사용할 수 밖에 없는 비효율적인 방식이 요구된다.

이런 코드의 작성은 파일 자체의 용량이 증가하기도하고 다른 태그들과 혼용해서 사용해야할 경우에 코드의 가독성을 현저하게 떨어뜨리기도 한다.

그 외에도 h1, li 등 문자 자체에 의미를 부여하는 다른 태그들과 달리 font태그는 오로지 문자가 보여지는 디자인만 바꾸기 때문에 정보로써 가치가 없다. 결국 font태그는 전체적으로 봤을 때 웹 페이지의 정보로서의 가치를 현저히 떨어뜨리게 된다.

html5에 들어서는 font는 퇴출되었고 더 효율적인 방법인 css를 통해서 글자를 디자인하여 사용할 수 있게 된다.