:visited 의사 클래스란?
CSS의 :visited 의사 클래스(pseudo-class)는 사용자가 이미 클릭하여 방문한 적이 있는 링크에 특별한 스타일을 적용할 때 사용됩니다. 이를 통해 방문 전과 후의 링크를 시각적으로 구분할 수 있어 사용자 경험을 크게 향상시킬 수 있습니다.
:visited 의사 클래스에는 유효한 형식이라면 어떤 색상 값이든 지정할 수 있습니다. 예를 들어 색상 이름(green), HEX 코드(#006600), RGB 값(rgb(0, 102, 0)) 등 다양한 표기 방식을 사용할 수 있습니다.
사용 예제
<html>
<head>
<style>
a:visited {
color: #006600
}
</style>
</head>
<body>
<a href = "">Click this link</a>
</body>
</html>위 예제에서는 a:visited 선택자를 사용해 방문한 링크의 글자색을 진한 초록색(#006600)으로 변경합니다. 페이지를 열고 링크를 한 번 클릭한 후 다시 돌아오면, 해당 링크의 색상이 기본 파란색에서 초록색으로 바뀐 것을 확인할 수 있습니다.
:visited와 함께 자주 사용되는 의사 클래스
:visited는 보통 다른 링크 관련 의사 클래스들과 함께 사용되어 링크의 상태별 스타일을 체계적으로 관리합니다.
- :link – 아직 방문하지 않은 링크에 스타일을 적용합니다.
- :hover – 마우스 포인터가 링크 위에 있을 때 스타일을 적용합니다.
- :active – 링크가 클릭되는 순간의 스타일을 적용합니다.
이때 선언 순서는 :link → :visited → :hover → :active(LVHA 순서)를 따르는 것이 좋습니다. 순서가 잘못되면 일부 스타일이 덮어써져 의도대로 적용되지 않을 수 있습니다.
주의 사항: 개인정보 보호를 위한 제한
브라우저는 악의적인 사이트가 사용자의 방문 기록을 추측하는 것을 막기 위해 :visited에 적용할 수 있는 CSS 속성을 제한합니다. 실제로 사용할 수 있는 속성은 color, background-color, border-color 등 일부 색상 관련 속성뿐이며, font-size나 display 같은 속성은 무시됩니다. 또한 방문 여부를 JavaScript로 정확히 판별하는 것도 차단되므로, :visited는 오직 시각적 피드백 제공 용도로 활용하는 것이 바람직합니다.