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

 

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

 

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

 

 

하이퍼 링크 밑줄 없애기

 

 

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

 

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

 

 

 

See the Pen tistory_css1 by Su Yong Park (@parkkingcar) on CodePen.

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

 

 

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

 

 

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

 

- none : 선 없음 

- underline : 밑줄 

- overline : 윗줄 

- line-through : 취소선

 

 

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

 

 

 

 

See the Pen tistory_css2 by Su Yong Park (@parkkingcar) on CodePen.

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

 

 

 

 

 

 

하이퍼 링크 글자색 바꾸기

 

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 순으로 배치해야 합니다.

 

 

 

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

 

 

 

 

See the Pen Untitled by Su Yong Park (@parkkingcar) on CodePen.

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