스타일 시트로 앵커 적용하기
앵커의 속성에는 4가지가 있다.
link, visited, hover, active 이다.
사용방법은 스타일 태그 내에
a:link { color:red; } 링크
a:visited { color:purple; } 한번 방문한 링크
a:hover { color:green; } 마우스가 링크위에 올라갔을때
a:active { color:yellow; } 마우스를 눌렀을때
형식으로 사용하면 된다. 여기서 주의 할것은 반드시 위의 순으로 코딩이 되어야 한다는 것이다. 만약 순서가 바뀔경우에는 적용이 되지 않는 경우가 있으므로 반드시 link, visited, hover, active 순으로 코딩해야 한다.
<html>
<head>
<style>
a:link { color:red; text-decoration:none; }
a:visited { color:purple; text-decoration:none; }
a:hover { color:green; text-decoration:underline; }
a:active { color:black; text-decoration:underline; }
</style>
</head>
<body>
<ul>
<li><a href="http://www.qoop.kr">쿠프</a></li>
<li><a href="http://www.naver.com">네이버</a></li>
</ul>
</body>
</html>
위의 쿠프는 빨강색으로 표시가 된다. text-decoration이 none 이므로 밑줄이 없어진다. 쿠프 위에 마우스를 올리면 밑줄이 생기면서 녹색으로 변한다. 다음 클릭을 하면 색상이 검정으로 변하고 지정한 주소로 이동을 한다. 그리고 다시 원래의 페이지로 돌아오면 이제까지 빨강이었던 쿠프가 자주색으로 바뀌어 있음을 볼수 있다.
'Web > Css' 카테고리의 다른 글
| SELECT 박스에서 테두리 변경하기 (0) | 2008.09.11 |
|---|---|
| 레이아웃 작성하기 (1단 레이아웃) (0) | 2007.12.22 |
| 박스 모델 (0) | 2007.11.14 |
| 스타일시트를 문서에 적용하는 법 (0) | 2007.11.14 |
| 레이아웃 가운데 정렬하기 (0) | 2007.11.14 |