CSS를 사용하면 링크에 자유롭게 색상을 지정할 수 있습니다. color 속성은 요소 내 텍스트의 글자색을 설정하는 데 사용되며, 링크(<a> 태그)에도 동일하게 적용됩니다.
링크 상태를 나타내는 가상 클래스(의사 선택자)는 반드시 아래 순서대로 선언해야 하며, 이를 LVHA 순서라고 부릅니다.
:link— 아직 방문하지 않은 링크:visited— 한 번이라도 방문한 적이 있는 링크:hover— 마우스 포인터를 올려놓은 상태의 링크:active— 클릭하고 있는(누르는 중인) 링크
문법(Syntax)
CSS color 속성의 기본 문법은 다음과 같습니다.
Selector {
color: /*값*/
}
예제 1
다음 예제는 color 속성과 링크 가상 클래스를 함께 사용하여, 링크의 상태별로 서로 다른 색상을 적용하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
#demo::after {
content: " (visited) ";
font-style: italic;
}
a:link {
color: lime;
}
a:visited {
color: green;
}
a:hover {
color: orange;
}
a:active {
color: gold;
}
</style>
</head>
<body>
<h2>Demo Links</h2>
<a id="demo" href="">This is demo text 1.</a>
<hr>
<p>
<a href="#">This is demo text 2.</a>
</p>
</body>
</html>
실행 결과(Output)
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
두 번째 링크에 마우스를 올리면(:hover) 아래와 같이 색상이 변경됩니다.
두 번째 링크를 클릭하면(:active) 아래와 같이 색상이 변경됩니다.
예제 2
아래 예제는 배경색이 지정된 박스 안에 있는 링크에 :link 가상 클래스를 사용하여, 방문하지 않은 링크의 기본 색상을 지정하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: auto;
font-size: 1.4em;
background-color: lightseagreen;
width: 100px;
text-align: center;
}
a:link {
color: rebeccapurple;
}
</style>
</head>
<body>
<div>
<a id="demo" href="">Demo link.</a>
</div>
</body>
</html>
실행 결과(Output)
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
