웹 페이지에서 사용자가 이미 클릭한 적이 있는 링크(방문한 링크)의 색상을 변경하려면 CSS의 :visited 가상 클래스를 사용합니다. 이 선택자를 활용하면 방문 전과 후의 링크 스타일을 다르게 지정할 수 있어, 사용자가 어떤 페이지를 이미 확인했는지 한눈에 파악하기 쉽습니다.
:visited 기본 문법
아래 예제는 a:visited 선택자에 빨간색(#FF0000)을 지정하여, 방문한 링크가 빨간색으로 표시되도록 설정한 코드입니다.
<html>
<head>
<style>
a:visited {
color: #FF0000;
}
</style>
</head>
<body>
<a href="#">My Link</a>
</body>
</html>
실행 결과
위 코드를 브라우저에서 실행한 후 해당 링크를 클릭하면, 이후부터 그 링크는 빨간색으로 표시됩니다. 일반 링크 상태의 색상을 함께 지정하고 싶다면 a:link, 마우스를 올렸을 때의 스타일은 a:hover, 클릭하는 순간의 스타일은 a:active 선택자를 함께 사용하면 됩니다.
참고 사항
보안상의 이유로 브라우저는 :visited에 적용할 수 있는 CSS 속성을 제한합니다. 주로 color, background-color, border-color 등 색상 관련 속성만 사용할 수 있으며, 글꼴 크기나 위치 등 다른 속성은 적용되지 않으니 유의하세요.