웹 페이지에서 방문하지 않은 모든 링크에 스타일을 적용하려면 CSS의 :link 선택자를 사용합니다. 이 선택자는 사용자가 아직 클릭하지 않은 하이퍼링크만 대상으로 하며, 이미 방문한 링크에는 영향을 주지 않습니다.
아래 예제 코드를 실행하면 :link 선택자의 동작을 직접 확인할 수 있습니다. 이 예제에서는 방문하지 않은 링크의 배경색을 주황색(orange)으로 지정했습니다.
예제
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
background-color: orange;
}
</style>
</head>
<body>
<a href = "https://www.example.com">Demo Website</a>
</body>
</html>실행 결과
페이지를 열면 "Demo Website" 링크의 배경이 주황색으로 표시됩니다. 해당 링크를 클릭해 방문한 후에는 :link 스타일이 더 이상 적용되지 않습니다.
:link와 :visited의 차이점
:link는 방문하지 않은 링크에만 적용되며, 반대로 이미 방문한 링크에는 :visited 선택자를 사용해 별도의 스타일을 지정할 수 있습니다. 두 선택자를 함께 활용하면 사용자가 어떤 링크를 방문했는지 시각적으로 쉽게 구분할 수 있어 웹 페이지의 사용성을 높이는 데 도움이 됩니다.