CSS Links

웹페이지에서 a 태그 링크가 걸릴 경우 글자, 배경색을 다르게 하여 방문자에게 링크가 있음을 알리고 반응하는 코드 입니다.

a:link    { color:#00456a; text-decoration:none; } 
a:visited { color:#00456a; text-decoration:none; } 
a:hover   { color:#006ca6; text-decoration:underline; } 
a:active  { color:#006ca6; text-decoration:none; }

Link에 글자색을 바꾸고 밑줄을 없애고 hover 마우스를 올릴 경우 색을 바꾸며 밑줄을 표시하는 속성입니다. visited는 한번 클릭한 링크이며 active는 클릭하는 순간 이펙트 입니다.

 

이 코드들은 a 태그 이외에도 적용이 가능합니다.

Mouse on & Click

 

<div style="border:1px solid #c1c1c1" class="testbox">Mouse on & Click</div> 
<style> 
.testbox:active  { box-shadow:0px 0px 5px black inset; } 
.testbox:hover   { color:#006ca6; text-decoration:underline; } 
</style>

DIV에 적용하여 효과 부여도 가능합니다.