Old/CSS
06_link
깨꾹2
2018. 10. 19. 11:09
링크의 상태
1.) link : 방문하기 전 상태
2.) hover : 링크에 마우스의 포인터를 올렸을 때
3.) active : 링크를 마우스로 클릭한 순간
4.) visited : 방문한 후 상태
링크는 이렇게 4가지 상태를 갖고 있는데 CSS를 통해 링크 상태를 제어할 수 있다.
<html>
<head>
<meta charset="UTF-8">
<title>링크</title>
<link rel="icon" href="btn.png">
<style>
a:link{
text-decoration: none;
}
a:visited{
text-decoration: none;
color: orange;
}
a:hover{
color: skyblue;
text-decoration: underline;
}
a:active{
text-decoration: none;
color: green;
}
</style>
</head>
<body>
<a href="http://www.w3schools.com/css/" target="blank"> CSSTUTORIALS</a>
</body>
</html>
text-decoration은 링크가 걸린 텍스트의 모양을 바꿀수 있는데 default 값은 underline(밑줄)로 되어 있는것을 밑줄을 없앤것이다.
위의 예제에서 link(처음상태)에서는 밑줄을 지우고 hover(마우스를 올렸을때)는 글씨 색이 skyblue로 변하며 active(클릭시)에는 green으로 변하며 링크를 한 번이라도 방문했을때는(visited)글씨 색이 orange상태가 된다.