웹 페이지에서 하이퍼링크에 글꼴 크기, 배경색 등 다양한 스타일을 적용하고 싶다면 CSS의 가상 클래스(pseudo-class)를 활용하면 됩니다. :link(방문 전), :visited(방문 후), :hover(마우스 오버)와 같은 가상 클래스를 사용하면 링크의 상태별로 서로 다른 스타일을 지정할 수 있습니다.
예제
<!DOCTYPE html>
<html>
<head>
<style>
a.first:link {color:#ff0000;}
a.first:visited {color:#0000ff;}
a.first:hover {color:#ffcc00;}
a.second:link {color:#ff0000;}
a.second:visited {color:#0000ff;}
a.second:hover {font-size:150%;}
a.third:link {color:#ff0000;}
a.third:visited {color:#0000ff;}
a.third:hover {background:#66ff66;}
</style>
</head>
<body>
<p>아래 링크에 마우스를 올려보세요:</p>
<p><b><a class = "first" href = "demo1.html" target = "_blank">색상이 변경되는 링크</a></b></p>
<p><b><a class = "second" href = "demo2.html" target = "_blank">글꼴 크기가 변경되는 링크</a></b></p>
<p><b><a class = "third" href = "demo3.html" target = "_blank">배경색이 변경되는 링크</a></b></p>
</body>
</html>코드 설명
위 예제에서는 세 개의 링크에 각각 다른 클래스(first, second, third)를 지정하여 상태별 스타일을 다르게 적용했습니다.
- first 클래스: 마우스를 올리면(
:hover) 링크 색상이 노란색(#ffcc00)으로 변경됩니다. - second 클래스: 마우스를 올리면 글꼴 크기가 기본 크기의 150%로 확대됩니다.
- third 클래스: 마우스를 올리면 배경색이 연두색(
#66ff66)으로 변경됩니다.
또한 모든 링크는 방문하기 전에는 빨간색(:link), 한 번 클릭하여 방문한 후에는 파란색(:visited)으로 표시됩니다. 이처럼 가상 클래스를 조합하면 사용자의 인터랙션에 반응하는 동적인 링크 스타일을 손쉽게 구현할 수 있습니다.