CSS로 링크에 스타일을 적용하려면 먼저 링크가 가질 수 있는 네 가지 상태를 이해해야 합니다. 바로 link(기본 링크), visited(방문한 링크), hover(마우스 오버), active(클릭 중인 링크)입니다. 앵커(<a>) 요소의 가상 클래스(pseudo-class)를 활용하면 각 상태별로 링크를 자유롭게 꾸밀 수 있습니다.
링크 상태별 가상 클래스
a:link — 아직 방문하지 않은 기본 링크
a:visited — 사용자가 이미 방문한 링크
a:hover — 마우스 커서를 올렸을 때의 링크
a:active — 클릭하고 있는 순간의 링크
스타일 적용 순서(LVHA 규칙)
가상 클래스는 작성 순서가 중요합니다. 일반적으로 :link → :visited → :hover → :active 순서(이른바 LVHA 순서)로 선언해야 나중에 정의된 스타일이 이전 스타일을 덮어쓰지 않고 의도대로 동작합니다.
예제 1: 링크 상태별 색상 변경하기
다음 예제에서는 링크의 상태에 따라 글자색을 다르게 적용합니다.
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
color: orange;
text-decoration: underline;
}
a:hover {
color: red;
text-decoration: underline;
}
a:active {
color: green;
text-decoration: underline;
}
</style>
</head>
<body>
<h1>Tutorials</h1>
<p><a href="https://www.tutorialspoint.com/java">Java</a></p>
<p><a href="https://www.tutorialspoint.com/chsharp">C#</a></p>
<p><a href="https://www.tutorialspoint.com/jquery">jQuery</a></p>
<p><a href="https://www.tutorialspoint.com/ruby">Ruby</a></p>
<p><a href="https://www.tutorialspoint.com/pytorch">PyTorch</a></p>
</body>
</html>
실행 결과
위 코드에서는 기본 링크가 주황색으로 표시되고, 마우스를 올리면 빨간색으로, 클릭하는 순간에는 초록색으로 변경됩니다.
예제 2: 링크 밑줄 제거하기
이번에는 모든 상태에서 링크 색상을 파란색으로 통일하고 밑줄을 제거하는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
color: blue;
text-decoration: none;
}
a:hover {
color: blue;
text-decoration: none;
}
a:active {
color: blue;
text-decoration: none;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<div>
<p>This is the <a href="https://tutorialspoint.com">reference</a></p>
</div>
</body>
</html>
실행 결과
text-decoration: none; 속성을 사용하면 브라우저가 기본적으로 표시하는 링크 밑줄을 제거할 수 있어, 보다 깔끔한 디자인을 구현할 수 있습니다.
정리
CSS의 링크 가상 클래스를 활용하면 링크의 상태에 따라 색상, 밑줄 등 다양한 스타일을 유연하게 제어할 수 있습니다. 실무에서는 LVHA 순서를 지키고, hover와 active 상태에 시각적 변화를 추가해 사용자에게 명확한 피드백을 주는 것이 좋습니다.