![[2021/12/20]국비지원 CSS3 2-(5)-{1} a link (하이퍼링크)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FbYPpgd%2Fbtrr9ANnHbP%2FAAAAAAAAAAAAAAAAAAAAAG953A-JNHDNcIirGU8ly8NGc6Uozg9pU4P5TtMDoeSh%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1756652399%26allow_ip%3D%26allow_referer%3D%26signature%3D4USStUHYyXzOkqxgmMFrXtI%252BRQE%253D)
가상 클래스 (psuedo-class) : 출력할 html 데이터 상 실질적으로 형태가 없는 것을 지정하는 방법
- :hover : 마우스 커서를 올렸을 때 어떤 효과가 나타남
( a의 나머지 가상 클래스는 다음 파트에 )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Document<title>
<style type="text/css">
body{text-align: center;}
ul li{list-style: none;}
li{display: inline;}/* 블록레벨요소를 인라인요소로 change */
li a{color: #000;font-size: 12px;}
#over a{text-decoration: none;}
#over a:hover{color: #0f0;}/* 가상클래스 a:hover */
#over1 a{text-decoration: none;}
#over1 a:hover{color:#0f0;text-decoration: underline;}
#over2 a{text-decoration: none; color: #00f;}
#over2 a:hover{background-color: #00f;padding: 10px;color: #fff;text-decoration: undeline;}
</style>
</head>
<body>
<h1>변화가 없는 형태의 하이퍼링크</h1>
<ul>
<li><a href="#">처음으로</a> </li>
<li><a href="#">메뉴1</a> </li>
<li><a href="#">메뉴2</a> </li>
<li><a href="#">메뉴3</a> </li>
<li><a href="#">메뉴4</a> </li>
</ul>
<hr>
<h1>롤오버가 있는 형태의 하이퍼링크</h1>
<ul id="over">
<li><a href="#">처음으로</a> </li>
<li><a href="#">메뉴1</a> </li>
<li><a href="#">메뉴2</a> </li>
<li><a href="#">메뉴3</a> </li>
<li><a href="#">메뉴4</a> </li>
</ul>
<hr>
<h1>롤오버가 있는 형태의 하이퍼링크1</h1>
<ul id="over1">
<li><a href="#">처음으로</a> </li>
<li><a href="#">메뉴1</a> </li>
<li><a href="#">메뉴2</a> </li>
<li><a href="#">메뉴3</a> </li>
<li><a href="#">메뉴4</a> </li>
</ul>
<hr>
<h1>롤오버가 있는 형태의 하이퍼링크2</h1>
<ul id="over2">
<li><a href="#">처음으로</a> |</li>
<li><a href="#">메뉴1</a> |</li>
<li><a href="#">메뉴2</a> |</li>
<li><a href="#">메뉴3</a> |</li>
<li><a href="#">메뉴4</a> </li>
</ul>
</body>
</html>
결과물
