웹 페이지의 링크는 개발자의 요구 사항에 따라 자유롭게 스타일링할 수 있습니다. 다만 사용자가 일반 텍스트와 쉽게 구별할 수 있도록 링크에는 별도의 스타일을 적용하는 것이 좋습니다.
브라우저는 링크의 상태(state)에 따라 각각 다른 기본 스타일을 적용합니다. 링크 상태별 기본 색상은 아래 표와 같습니다.
링크 상태별 기본 색상
| 링크 상태 | 색상 |
|---|---|
| Active (활성) | #EE0000 |
| Focus (포커스) | Windows 및 Mac에서는 #5E9ED6 또는 이와 유사한 파란색 계열의 외곽선(outline), Linux에서는 #F07746 외곽선이 표시되며 텍스트 색상은 그대로 유지됩니다. |
| Hover (마우스 오버) | #0000EE |
| Link (기본 링크) | #0000EE |
| Visited (방문함) | #551A8B |
참고: 위에 안내된 색상은 브라우저의 새로운 버전이 출시됨에 따라 변경될 수 있습니다. 또한 가상 선택자(pseudo selector)가 올바르게 동작하려면 반드시 :link → :visited → :hover → :active 순서로 작성해야 합니다.
예제 1: 기본 링크 스타일 확인하기
다음 예제는 표준 링크 스타일이 실제로 어떻게 적용되는지 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
* {
text-align: center;
}
</style>
</head>
<body>
<h2>Learn JDBC</h2>
<a href="">Click here</a>
<br/><br/>
<a href="#">And here <img src="https://www.tutorialspoint.com/jdbc/images/jdbc-mini-logo.jpg"></a>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
링크를 클릭하여 활성(active) 상태가 되면 아래와 같이 표시됩니다.
예제 2: 커스텀 링크 스타일 적용하기
다음 예제는 표준 스타일이 아닌 사용자 지정(non-standard) 링크 스타일을 테이블과 함께 적용한 모습입니다.
<!DOCTYPE html>
<html>
<head>
<style>
#one {
color: black;
text-decoration: none;
}
#two {
font-style: italic;
box-shadow: inset 0 0 8px coral;
}
table, td {
font-size: 1.4em;
padding: 8px;
text-align: center;
border: thin solid;
}
</style>
</head>
<body>
<table>
<tr>
<td><a id="one" href="#">1</a>(non standard link)</td>
<td id="two"><a href="#">2</a></td>
</tr>
<tr>
<td><a href="">3</a></td>
<td><a href="#">4</a></td>
</tr>
</table>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
여기서 "2"를 클릭하면 포커스(focus) 상태가 적용되어 아래와 같이 표시됩니다.
