방문한 모든 링크에 스타일을 적용하려면 CSS의 :visited 선택자를 사용하면 됩니다. 이 선택자는 사용자가 이미 클릭하여 방문한 적이 있는 링크만 대상으로 하며, 방문 여부에 따라 글자 색상, 배경색 등을 다르게 표현할 수 있습니다.
기본 문법
:visited 선택자는 다음과 같이 a 태그와 함께 사용합니다.
a:visited {
color: purple;
}예제
아래 코드를 실행하면 :visited 선택자가 실제로 어떻게 동작하는지 확인할 수 있습니다. 일반 링크와 방문한 링크는 흰색 배경에 검은 글자와 파란 테두리로 표시되며, 마우스를 올리거나 클릭하는 순간에는 빨간 배경에 흰 글자로 바뀝니다.
<!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 선택자에 적용할 수 있는 CSS 속성을 제한하고 있습니다. color, background-color, border-color 등 일부 시각적 속성만 변경할 수 있으며, JavaScript를 통해 방문 여부를 확인하는 것도 차단됩니다. 따라서 :visited 선택자는 링크의 방문 상태를 단순히 시각적으로 구분하는 용도로 활용하는 것이 좋습니다.