CSS의 :visited 선택자는 사용자가 이미 방문한 적이 있는 링크에 스타일을 적용할 때 사용하는 의사 클래스(pseudo-class)입니다. 이를 활용하면 방문 전과 후의 링크를 시각적으로 구분할 수 있어, 사용자가 어떤 페이지를 이미 확인했는지 한눈에 파악하기 쉽습니다.
:visited 선택자 기본 문법
기본적인 사용법은 다음과 같습니다. 링크 관련 의사 클래스는 일반적으로 LVHA 순서(:link → :visited → :hover → :active)로 작성하는 것이 권장됩니다.
a:visited {
color: purple;
}예제: 버튼 형태의 링크 스타일링
아래 예제에서는 :link, :visited, :hover, :active 선택자를 함께 사용하여 버튼처럼 보이는 링크를 만들고, 마우스를 올리거나 클릭했을 때 색상이 변하도록 구현했습니다.
<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
background-color: white;
color: black;
border: 1px solid blue;
padding: 30px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
color: white;
}
</style>
</head>
<body>
<a href = "demo.html" target = "_blank">Demo Link</a>
</body>
</html>:visited 선택자 사용 시 주의사항
1. 개인정보 보호를 위한 제약
브라우저는 사용자의 방문 기록을 보호하기 위해 :visited 선택자에 적용할 수 있는 CSS 속성을 제한합니다. 사용 가능한 속성은 color, background-color, border-color, outline-color, column-rule-color 등 색상 관련 속성뿐입니다.
2. JavaScript로 값 읽기 불가
getComputedStyle() 같은 자바스크립트 API로도 방문 여부를 확인할 수 없도록 브라우저가 차단하고 있으므로, 방문 기록을 추적하는 용도로는 사용할 수 없습니다.
3. opacity 등 비색상 속성 무시됨
opacity, display, padding과 같은 속성은 :visited 상태에서 변경해도 브라우저가 무시하므로, 반드시 색상 계열 속성으로만 스타일을 지정해야 합니다.
마무리
:visited 선택자는 간단하지만 사용자 경험(UX)을 크게 향상시킬 수 있는 도구입니다. 다만 개인정보 보호 정책으로 인해 적용 가능한 속성이 제한적이라는 점을 기억하고, 색상 중심으로 디자인하는 것이 좋습니다.