CSS에서 :link 가상 클래스(선택자)를 사용하면 아직 방문하지 않은 링크의 색상을 자유롭게 지정할 수 있습니다. 색상 값은 색상 이름, HEX 코드(#FF0000), RGB, HSL 등 유효한 모든 형식으로 작성할 수 있습니다.
예제
아래 코드를 실행하면 페이지 내 링크가 빨간색으로 표시됩니다.
<html>
<head>
<style>
a:link {
color:#FF0000
}
</style>
</head>
<body>
<a href = "">데모 링크</a>
</body>
</html>
함께 알아두면 좋은 링크 관련 가상 클래스
링크 스타일링 시 :link 외에도 다음과 같은 가상 클래스를 함께 활용하면 더욱 완성도 높은 UI를 만들 수 있습니다.
- :visited — 사용자가 이미 방문한 링크의 색상을 지정합니다.
- :hover — 마우스 포인터를 링크 위에 올렸을 때의 스타일을 지정합니다.
- :active — 링크를 클릭하고 있는 순간의 스타일을 지정합니다.
참고로 이 가상 클래스들은 LVHA 순서(:link → :visited → :hover → :active)로 선언해야 의도대로 동작하므로, 스타일시트 작성 시 순서에 유의하는 것이 좋습니다.