CSS 앵커 의사 클래스(Pseudo Classes)란?
CSS에서는 의사 클래스 선택자인 :link, :visited, :hover, :active를 사용하여 링크(앵커)의 각 상태별로 서로 다른 스타일을 지정할 수 있습니다. 이를 활용하면 사용자가 링크와 상호작용하는 순간마다 시각적인 피드백을 제공할 수 있어, 웹 페이지의 사용성과 디자인 완성도가 크게 향상됩니다.
네 가지 의사 클래스가 의도한 대로 정확하게 작동하려면 선언 순서가 매우 중요합니다. 반드시 아래의 순서(LVHA 순서)대로 작성해야 합니다.
- :link — 아직 방문하지 않은 일반 링크
- :visited — 사용자가 이미 방문한 링크
- :hover — 마우스 커서를 올려둔 링크
- :active — 클릭되고 있는 순간의 링크
만약 이 순서를 지키지 않으면, 예를 들어 :hover보다 :visited가 나중에 선언될 경우 방문한 링크에 마우스를 올려도 hover 스타일이 적용되지 않는 등 스타일이 서로 덮어써지는 문제가 발생할 수 있습니다.
기본 문법
CSS 의사 클래스 속성의 기본 문법은 다음과 같습니다.
a:(pseudo-selector) {
/*선언부*/
}
예제 1: 링크 상태별 스타일 적용하기
다음 예제는 CSS 앵커 의사 클래스를 활용하는 기본적인 방법을 보여줍니다.
<!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>
<h2>Your favourite sports?</h2>
<a href="#">Football</a>
<a href="">Cricket</a>
</div>
</body>
</html>
출력 결과
초기 화면:
첫 번째 링크에 마우스를 올리면(hover) 글자 크기가 커지고 주황색으로 강조되며 그림자 효과가 나타납니다.
첫 번째 링크를 클릭하는 순간(active)에는 빨간색과 내부 그림자 효과가 적용된 아래와 같은 화면이 표시됩니다.
예제 2: 그라디언트 배경과 함께 활용하기
이번에는 배경 그라디언트와 마지막 자식 선택자(:last-child)를 함께 활용한 또 다른 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<title>CSS Anchor Pseudo Classes</title>
</head>
<style>
div {
color: #000;
padding:20px;
background-image: linear-gradient(135deg, grey 0%, white 100%);
text-align: center;
}
.anchor {
color: #FF8A00;
}
.anchor:last-child {
color: #03A9F4;
}
.anchor:visited {
color: #FEDC11;
}
.anchor:hover {
color: #C303C3;
}
.anchor:active {
color: #4CAF50;
}
</style>
<body>
<div>
<h1>Search Engines</h1>
<a class="anchor" href="https://www.google.com" target="_blank">Go To Google</a>
<a class="anchor" href="https://www.bing.com" target="_blank">Go To Bing</a>
</div>
</body>
</html>
출력 결과
마무리
CSS 앵커 의사 클래스를 활용하면 별도의 JavaScript 없이도 링크의 상태 변화에 따른 동적인 스타일링을 구현할 수 있습니다. 특히 :hover와 :active 효과는 사용자에게 즉각적인 시각적 피드백을 제공하여 더 나은 사용자 경험(UX)을 만들어 줍니다. 다만 선택자 선언 순서(LVHA)를 반드시 지켜야 한다는 점, 그리고 보안상의 이유로 :visited 선택자에서는 색상 외의 일부 CSS 속성 사용이 브라우저에 따라 제한될 수 있다는 점을 기억해 두시기 바랍니다.