링크의 상태
링크는 아래와 같이 4가지의 상태를 가지고 있고, 각 상태에 따라서 시각적으로 다른 모양을 가질 수 있다.
방문하지 않은 링크 | a:link{} | |
방문했던 링크 | a:visited{} | |
마우스를 오버한 링크 | a:hover{} | a:link과 a:visited 뒤에 와야 함 |
마우스를 누른 상태의 링크 | a:active{} | a:hover 뒤에 와야 함 |
예제
example1.html - (jsfiddle, github)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html> < html > < head > < meta http-equiv = "Content-Type" content = "text/html;charset=utf-8" > < style > a:link { color: red; }/* unvisited link */ a:visited { color: blue; }/* visited link */ a:hover { color: green; }/* mouse over link */ a:active { color: orange; } /* selected link */ </ style > </ head > < body > </ body > </ html > |