CSS 가상선택자 종류 속성, 링크걸기

웹페이지에 링크를 걸때에 마우스를 클릭, 마우스 롤오버, 방문한 적이 있거나 없는 경우에 css 링크 가상클리스 선택자 속성을 부여하여 각각 색상을 부여해 볼수가 있습니다.

마우스 클릭과 롤오버 속성

링크에 마우스를 클릭했을때는 a:active{} 속성을 부여하게 되며, 마우스를 롤오버했을때는 a:hover{] 속성을 부여하게 됩니다.

<!DOCTYPE HTML>
<HTML>
 <HEAD>
 <style>
	a:active{
	  color:green;}   
	a:hover{
	  color:red;}	
 </style>
 </HEAD>
 <BODY>
 <ul>
 <li><a href="1.html">마우스 클릭시</a></li><br><br>
 <li><a href="2.html">마우스 롤오버</a></li>
 </ul> 
 </BODY>
</HTML>

방문한적 있는링크, 없는링크

링크를 이미 방문하였을때의 속성은 a:visited{} 을 사용하며, 방문한적이 없을떄는 a:link{} 속성을 사용하게 됩니다.

<!DOCTYPE HTML>
<HTML>
 <HEAD>
 <style>
	a:link{
	  color:#0100FF;}   
	a:visited{
	  color:#22741C;}	
 </style>
 </HEAD>
 <BODY>
 <ul>
 <li><a href="1.html">방문한적 없는링크</a></li><br><br>
 <li><a href="2.html">방문한적 있는링크</a></li>
 </ul> 
 </BODY>
</HTML>

링크 밑줄 없애기

보통 a태그를 이용하여 링크를 걸게되면 밑줄이 나타나게 되며 css에서 text-decoration:none; 속성을 부여하게 되면 링크가 되어있는 텍스트 밑줄이 사라지게 됩니다.

<!DOCTYPE HTML>
<HTML>
 <HEAD>
 <style>
	a{text-decoration:none;}
 </style>
 </HEAD>
 <BODY>
 <ul>
 <li><a href="1.html">방문한적 없는링크</a></li><br><br>
 <li><a href="2.html">방문한적 있는링크</a></li>
 </ul> 
 </BODY>
</HTML>