CSS 의사 클래스(가상 선택자)인 :link, :visited, :hover, :active를 사용하면 링크의 상태별로 서로 다른 스타일을 적용할 수 있습니다. 일반 텍스트와 차별화된 링크 디자인은 사용자에게 해당 요소가 클릭 가능하다는 것을 직관적으로 알려주므로, 웹 페이지의 사용성과 접근성을 높이는 데 큰 도움이 됩니다.
선택자 선언 순서(LVHA)가 중요한 이유
네 가지 의사 클래스는 모두 동일한 특이도(specificity)를 가지기 때문에, CSS 특성상 나중에 선언된 규칙이 먼저 선언된 규칙보다 우선 적용됩니다. 따라서 의도한 대로 동작하게 하려면 반드시 :link → :visited → :hover → :active 순서로 작성해야 합니다. 예를 들어 :hover를 :visited보다 먼저 선언하면, 이미 방문한 링크에는 마우스를 올려도 hover 스타일이 적용되지 않습니다.
문법(Syntax)
CSS 링크 의사 클래스의 기본 문법은 다음과 같습니다.
a:(pseudo-selector) {
/*declarations*/
}예제 1: 기본적인 링크 상태 스타일링
다음 예제는 링크의 네 가지 상태에 각각 다른 색상과 밑줄 효과를 적용하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin-left: 20px;
display: flex;
float: left;
}
a:link {
color: navy;
text-decoration: none;
}
a:visited {
color: yellowgreen;
}
a:hover {
color: orange;
text-decoration: wavy underline;
}
a:active {
color: red;
}
</style>
</head>
<body>
<div>
<div>
<a href="#">Demo link </a>
</div>
<div>
<a href="">Demo visited link</a>
</div>
</div>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
첫 번째 링크에 마우스 포인터를 올리면(hover) 글자가 주황색으로 바뀌고 물결 모양 밑줄이 나타납니다.
두 번째 링크를 클릭하는 동안(active)에는 글자가 빨간색으로 변경됩니다.
예제 2: 버튼 형태의 링크 스타일링
다음 예제에서는 링크에 여백, 테두리, 텍스트 그림자를 추가해 버튼처럼 보이게 만들고, 상태별로 더욱 눈에 띄는 시각적 변화를 적용했습니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: flex;
float: left;
}
a {
margin: 20px;
padding: 10px;
border: 2px solid black;
text-shadow: -1px 0px black, 0px -1px black, 0px 1px black, 1px 0px black;
font-size: 1.1em;
}
a:link {
text-decoration: none;
}
a:visited {
color: blueviolet;
}
a:hover {
color: orange;
font-size: 150%;
font-weight: bold;
box-shadow: 0 0 5px 1px grey;
}
a:active {
color: red;
box-shadow: inset 0 0 15px red;
}
</style>
</head>
<body>
<div>
<a href="#">Kapow!</a>
<a href="">Dishoom</a>
</div>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
첫 번째 링크에 마우스를 올리면 글자 크기가 커지고 굵어지며, 회색 외곽 그림자가 나타납니다.
링크를 클릭하는 순간에는 글자가 빨갛게 변하고, 요소 안쪽으로 붉은 그림자(inset shadow)가 채워집니다.
