CSS 기초강좌 8 (Link)

CSS Links

Link는 CSS 속성으로 여러가지를 표현할 수 있습니다.

(예를 들면, color, font-family, background,...)

link는 아래의 4가지 형태로 각기 다르게 표현됩니다.

a:link - 방문한적이 없는 보통의 링크

a:visited - 방문한적이 있는 링크

a:hover - 마우스를 올렸을때의 링크

a:active - 마우스로 클릭한 순간의 링크

a태그 뒤에 붙어있는 :visited나 :hover 등은 가상클래스라고 부르는 것인데, 자주 쓰이는 것은 위의 네가지 말고도 몇개가 더 있습니다. 여기서는 이런 것이 있다는 정도만 알고 넘어가도록 하겠습니다.

예제

a:link {color: #FF0000;}

a:visited {color: #00FF00;}

a:hover {color: #FF00FF;}

a:active {color: #0000FF;}

결과

네가지 링크를 사용할때는 아래의 규칙을 따라야 합니다.

a:hover 는 반드시 a:link 또는 a:visited 다음에 나와야 합니다.

a:active 는 반드시 a:hover 다음에 나와야 합니다.

text-decoration 속성은 대부분 언더라인을 제거하는데 사용되고, background-color를 이용하여 마우스오버시 색상을 바꿀 수 있다.

예제

a:link {text-decoration:none;background-color:#b2ff99;}

a:visited {text-decoration:none;background-color:#ffff85;}

a:hover {text-decoration:underline;background-color:#ff704d;}

a:active {text-decoration:underline;background-color:#ff704d;}

결과

즐거운 하루 되세요. 이페이지는 W3Cschool.com을 인용하여 만들었습니다.