[html/css] 클릭 전/후/마우스오버, 하이퍼링크(a href) 글자 색 바꾸기, 밑줄 없애기

 

HTML에서 하이퍼링크는 유저가 링크 클릭으로 방문 전과 후의 색이 다르게 나타나고 밑줄이 생기기도 합니다.

 

이 하이버링크의 색깔을 바꾸는 방법과 밑줄을 없애는 방법에 대해서 정리하겠습니다.

 

 

하이퍼 링크 밑줄 없애기

 

 

먼저, 밑줄 없애기 입니다.

 

HTML에서 링크를 생성하면 기본적으로 아래에 밑줄이 표시됩니다.

 

 

 

(css를 적용하지 않은 하이퍼링크)

 

 

이제 밑줄을 없애기 위해서 'text-decoration-line' 속성을 none으로 입력해주면 됩니다.

 

 

text-decoration-line 속성은 다음의 4가지 값을 가질 수 있습니다.

 

- none : 선 없음 

- underline : 밑줄 

- overline : 윗줄 

- line-through : 취소선

 

 

따라서 예제를 보면 다음과 같이 나오게 됩니다.

 

 

 

 

(밑줄 없애기만 적용한 하이퍼링크)

 

 

 

 

 

 

하이퍼 링크 글자색 바꾸기

 

a:link { color: white; }

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

 

a:visited { color:black; }

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

 

a:hover { color:red; }

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

 

a:active { color:green; }

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

 

 

이때 주의할 점은

 

- a:hover는 a:link, a:visited 뒤에 옴

- a:active는 a:hover 뒤에 옴

 

 

즉, a:link, a:visited, a:hover, a:active 순으로 배치해야 합니다.

 

 

 

아래 예제는 방문한 적 있는 링크의 밑줄 없애기와 링크 스타일 정의를 같이합니다.

 

 

 

 

(밑줄 없애기와 글자 색을 적용한 하이퍼링크)