[css] 링크 효과 관련 a:link, a:visited, a:hover, a:active 정리

a 태그를 이용해서 하이퍼링크를 걸면 밑줄이 쳐지고 파란색으로 글자가 표현됩니다. 그리고 링크를 방문하고 나면, 파란색은 보라색 비스무리한 것으로 바뀝니다. 또한 링크에 마우스를 올려놓을 때 딱히 색상 변화가 없습니다. 그리고 링크를 클릭할 때 색상이 일시적으로 빨간색으로 변합니다.

 

a 태그와 관련해서 디폴트 상황을 정리하자면, 

 

링크를 방문하기 전 색상: 파란색

 

링크 방문 전

 

링크를 방문한 이후 색상: 보라색

 

링크 방문 후

 

링크에 마우스를 올려 놓을 때: 색상 변화 없음

 

 

링크를 클릭하는 순간: 빨간색

 

(이건 캡쳐가 쉽지 않아서 따로 그림은 첨부하지 않겠습니다.^^)

 

입니다. 

 

이 색상들을 바꾸고 싶으면 다음과 같이 값을 변경해주면 가능합니다. 

 

우선 링크 방문 전 색상은 a 요소 선택자에 :link 의사클래스를 붙여서 다뤄줍니다. 또한 링크 방문 후 색상은 a 요소 선택자에 :visited 의사클래스를 붙여서 다룹니다. 링크에 마우스를 올려놓을 때 색상은 :hover 의사클래스를, 링크를 클릭하는 순간의 색상은 :active 의사클래스를 붙여서 다룰 수 있습니다. 의사클래스라는 것은 선택자(selector)에 추가하는 키워드인데요, 선택한 요소가 특별한 상태일 때만 사용되는 클래스입니다[1]. 예를 들어, :hover는 선택한 요소에 마우스 커서가 올라가 있는 특별한 상태일 때를 위해 사용하는 클래스인 것이죠. 

 

다음과 같이 color 속성의 값들을 설정해보겠습니다. 4개 의사클래스의 순서가 중요하니, 순서를 이대로 해주세요. 순서를 바꿔주면 제대로 적용이 안되더라고요. 

 

a:link { /*링크 방문 전*/
    color: red;
}
 
a:visited { /*링크를 방문한 이후*/
    color: blue;
}
 
a:hover { /*마우스를 올려놓을 때*/
    color: green;
}
 
a:active { /*클릭하는 순간*/
    color: yellow;
}

 

이렇게 해주면 링크를 방문하기 전 색상은 빨간색이 되고,

 

 

방문 후 색상은 파란색이 되고, 

 

 

마우스를 올려놓을 때 색상은 초록색이 되고, 

 

 

마우스로 클릭하는 순간의 색상은 노란색이 됩니다. 

 

 

<참고자료>

[1] developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes, "mozilla", "의사클래스"