CSS를 활용하면 웹 페이지의 링크를 자유롭게 꾸밀 수 있습니다. 텍스트에 색상을 입히거나 배경을 추가하고, 글자 크기를 조절하는 것은 물론, 애니메이션 효과까지 더해 시각적으로 매력적인 링크를 만들 수 있습니다.
의사 클래스(Pseudo-class) 작성 순서
링크 관련 의사 클래스가 정상적으로 동작하려면 반드시 아래 순서대로 선언해야 합니다.
- :link — 아직 방문하지 않은 링크
- :visited — 사용자가 이미 방문한 링크
- :hover — 마우스 커서를 올린 상태의 링크
- :active — 클릭되는 순간의 링크
이 순서는 흔히 LVHA 규칙이라고 부르며, 순서가 바뀌면 일부 스타일이 덮어써져 의도대로 적용되지 않을 수 있습니다.
예제 1: 기본적인 링크 스타일링
다음 예제는 CSS로 링크에 배경색, 테두리, 호버 효과를 적용하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 25px;
}
#mod {
padding: 10px;
color: darkturquoise;
border: thin solid;
background-color: lemonchiffon;
}
#mod:hover {
color: white;
box-shadow: 0 0 0 1px black;
background-color: slateblue;
}
</style>
</head>
<body>
<p>
<a href="mailto:user@example.com">데모 링크</a>
</p>
<p>
<a id="mod" href="mailto:user@example.com">수정된 데모 링크</a>
</p>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
두 번째 링크에 마우스 커서를 올리면(:hover) 아래와 같이 배경색과 그림자 효과가 적용됩니다.
예제 2: 버튼형 링크와 호버 애니메이션
다음 예제는 flex 레이아웃 안에서 버튼 요소와 링크를 나란히 배치하고, 호버 시 박스 그림자·윗줄 장식·글자 크기 변화를 주는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 25px;
display: flex;
float: left;
border: thin solid;
background-color: snow;
padding: 20px;
}
body * {
border-radius: 5%;
}
#mod {
padding: 10px;
color: royalblue;
text-decoration: none;
}
#mod:hover {
box-shadow: 0 0 10px 2px black;
text-decoration: overline;
font-size: 1.2em;
}
</style>
</head>
<body>
<div>
<button><a href="#">데모</a></button>
<a id="mod" href="#">데모</a>
</div>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
두 번째 링크에 마우스 커서를 올리면 그림자가 생기고 글자 크기가 커지며 윗줄 장식이 나타납니다.
마무리
이처럼 CSS의 의사 클래스를 활용하면 별도의 JavaScript 없이도 링크에 다양한 인터랙티브 효과를 손쉽게 구현할 수 있습니다. :link → :visited → :hover → :active 순서만 잘 지키면, 색상·배경·그림자·애니메이션 등을 자유롭게 조합해 사용자 경험을 한층 끌어올릴 수 있습니다.