HTML href font color 변경하는 예전 방법 vs 지금 방법

by

href font color 변경 방법

<a> 태그에 적힌 글씨 색을 바꾸는 방법은 예전에 사용하던 방법은 <font> 태그를 <a> 태그 사이에 삽입하는 것입니다.

<a href = "주소">
  <font color = "색">히타이트 문명</font>
</a>

하지만 현재 <font> 태그는 웹표준이기 아니기 때문에 아래 예시의 첫 번째 <a> 태그의 방법은 최대한 피해야 되는 방법입니다.

현재 작동되는 이유는 과거의 문법 기준으로 작성된 수많은 웹문서를 보존하기 위함입니다.

<h2>수메르 문명</h2>
  <a href="https://ko.wikipedia.org/wiki/%ED%9E%88%ED%83%80%EC%9D%B4%ED%8A%B8" target="_blank"><font color="blue">히타이트 문명</font> </a>
  <br>
  <a href="https://ko.wikipedia.org/wiki/%EC%88%98%EB%A9%94%EB%A5%B4" target="_blank" style="color:red;">wikipedia - 수메르</a>

두번째 <a> 태그 예시 처럼 style 속성과 color:red 와 같은 속성값을 삽입하는 형식으로 글씨색을 변경하는 것이 웹표준입니다. <font> 태그와 달리 색 뒤에 세미콜론 ; 을 삽입해야 합니다.

<a href = "주소" style = "color: 색;">wikipedia - 수메르</a>

<style> 태그에서 CSS 선택자로 변경

가장 보편적인 방법은 <head> 태그에 <style> 태그를 삽입하고, <a> 태그를 선택자로 지정하면 대량으로 색 변경을 할 수 있습니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      a {
        color:crimson;
      }
    </style>
  </head>
  <body>
    <h2>수메르 도시 국가 목록</h2>
      <a href="https://ko.wikipedia.org/wiki/%EC%9A%B0%EB%A5%B4" target="_blank">우르</a>
      <a href="https://ko.wikipedia.org/wiki/%EB%9D%BC%EA%B0%80%EC%8B%9C" target="_blank">라가시</a>
      <a href="https://ko.wikipedia.org/wiki/%EC%9A%B0%EB%A3%A8%ED%81%AC" target="_blank">우루크</a>
      <a href="https://ko.wikipedia.org/wiki/%EB%B3%B4%EB%A5%B4%EC%8B%9C%ED%8C%8C" target="_blank">보르시파</a>
  </body>
</html>