[HTML/CSS] 하이퍼링크(a href) 글자 색 바꾸기 (클릭중/전/후, 마우스오버)

 

지난 번에는 하이퍼링크(a href)의 밑줄을 없애는 방법을 알아보았습니다.

[HTML/CSS] 링크(a href)의 밑줄 없애기, 점선, 색깔 바꾸기

[HTML/CSS] 링크(a href)의 밑줄 없애기, 점선, 색깔 바꾸기

 

기본 하이퍼링크는 사용자가 링크를 클릭하기 전과 후의 링크 색깔이 다릅니다.

이번에는 하이버링크의 색깔을 바꾸는 방법에 대해서 정리합니다.

 

 

하이퍼링크 글자색 바꾸기

<a href='https://hianna.tistory.com' target='_blank'>
  블로그 홈으로 이동하기
</a>

a:link {
  color : pink;
}
a:visited {
  color : black;
}
a:hover {
  color : red;
}
a:active {
  color : green
}

 

a:link { color:pink; }

아직 방문하지 않은 링크의 글자색을 정의합니다.

위 예제에서 링크의 글자색이 분홍색이 아닌 검정이라면, 위 사이트를 방문한 적이 있기 때문입니다.

HTML 코드를 수정하여, 웹사이트를 다른 사이트로 변경 한 후,

글자색이 분홍색이 되는지 확인해 보세요.

 

a:visited { color:black; }

사용자가 방문한 적이 있는 링크의 글자색을 정의합니다.

 

a:hover { color:red; }

마우스를 링크에 올려두었을 때, 글자색을 정의합니다.

 

a:active { color:green; }

마우스로 링크를 클릭하고 뗄 때까지의 글자색을 정의합니다.

마우스로 링크를 클릭하고 떼지말고 기다려보세요. 

그 동안은 링크 글자색이 초록색입니다.

 

이렇게 링크의 스타일을 정의하는 link, visited, hover, active 클래스를 사용할 때는

작성 순서에 주의해야 합니다.

• a:hover는 a:link, a:visited 뒤에 와야 합니다.
• a:active는 a:hover 뒤에 와야 합니다.

정리하면

• a:link, a:visited, a:hover, a:active (LVHA) 순서로 배치해야 합니다.

 

마우스 오버되었을 때만 밑줄 보여주기

<a href='https://hianna.tistory.com' target='_blank'>
  블로그 홈으로 이동하기
</a>

a:link {
  color : pink;
  text-decoration: none;
}
a:visited {
  color : black;
  text-decoration: none;
}
a:hover {
  color : red;
  text-decoration: underline;
}
a:active {
  color : green;
  text-decoration: none;
}

 

a:link, a:visited, a:hover, a:active에 

밑줄 모양을 정의할 수도 있습니다.

위 예제는 링크에 마우스 오버 되었을 때만 밑줄을 보여줍니다.

링크에 밑줄 모양을 정의하는 방법은 지난 포스팅을 참조하세요.

[HTML/CSS] 링크(a href)의 밑줄 없애기, 점선, 색깔 바꾸기

 

 

---

 

CSS로 링크의 색상을 변경하는 방법을 알아보았습니다.