![[2021/12/20]국비지원 CSS3 2-(5)-{2} a link (하이퍼링크)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2F1Mqxh%2Fbtrr3jeBBtp%2FAAAAAAAAAAAAAAAAAAAAAFdtyZGSqYo7ecjNVbatBEyFH-s9sePkKduQyRPFMACK%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1756652399%26allow_ip%3D%26allow_referer%3D%26signature%3D%252BJqY%252FIwVMgv0lqhOTxUtjPqGUTc%253D)
가상 클래스 ( psuedo-class )
- :link : 아직 방문하지 않은 링크 ( 브라우저 상의 기록이 없는 경우 default 색상 파란색 )
- :visited : 이미 방문한 링크 ( default color : 보라색 )
- :active : 마우스 클릭한 상태
- :focus : 클릭당하고 주목받은 상태
( 그 외 :first-child / :nth-child / :first-of-type 등이 있으나 후에 한 번 더 정리해서 올릴 예정 )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>a link2<title>
<style type="text/css">
ol li a{text-decoration: none;color: #000;}
ol li a:hover{text-decoration: underline;color: #f00;}
/* 가상클래스 a:link, a:visited, a:hover, a:active, a:focus 순서 중요, 우선순위 10점 */
.a1 a:link{color:yellow;}
.a1 a:visited{color:green;}
.a1 a:hover{background-color:aqua;}
.a1 a:active{font-size: 30px;}
.a1 a:focus{font-style: italic;}
.a2 a:link{color:blue;}
.a2 a:visited{color:grey;}
.a2 a:hover{background-color:red;}
.a2 a:active{font-size: 30px;}
.a2 a:focus{font-style: bold;}
.a3 a:link{color:red;}
.a3 a:visited{color:lime;}
.a3 a:hover{background-color:blue;}
.a3 a:active{font-size: 30px;}
.a3 a:focus{font-style: italic;}
.a4 a:link{color:orange;}
.a4 a:visited{color:yellow;}
.a4 a:hover{background-color:pink;}
.a4 a:active{font-size: 30px;}
.a4 a:focus{font-style: italic;}
</style>
</head>
<body>
<ol>
<li class="a1"><a href="#">menu</a></li>
<li class="a2"><a href="http://www.naver.com" target="_blank">menu</a></li>
<li class="a3"><a href="#">menu</a></li>
<li class="a4"><a href="http://www.naver.com" target="_blank">menu</a></li>
</ol>
</body>
</html>
결과물
1. hover 전
2. 각각 hover 후
