:link, :visited, :hover, :active Pseudo-class

Home > Document > CSS > Pseudo > :link, :visited, :hover, :active

Link 관련 가상 클래스

링크걸린 글자에 관련된 가상 클래스로서, BODY Element에 속성 중 link(링크걸린 글자색), vlink(방문했던 링크의 글자색), alink(링크를 클릭했을 때의 글자색) 를 기억하리라 생각합니다. 이 페이지에서 다루는 :link, :visited, :hover, :active 의 4 가지 가상 클래스는 단순히 글자의 색상만을 다루는 것이 아니라 글자에 class로 지정할 수 있는 여러가지 CSS Property들을 지정할 수 있습니다. 특히 :hover 같이 Link 글자에 마우스가 올라 갔을 때의 CSS Property 지정은 HTML Element만으로는 안됩니다.

[표 보는 방법]

:LINK, :VISITED, :HOVER, :ACTIVE Property
Value	class로 지정
Initial	없음
Applies to	Link 걸린 글자
Inherited	N/A
Percentages	N/A
Media	Visual
HTML Syntax	[A]:link(visited, hover, active) {sRules }
Scripting	N/A

:link
방문하지 않은 link에 대한 CSS Property를 지정합니다.

:visited
방문한 link에 대한 CSS Property를 지정합니다.

:hover
마우스를 link에 올렸을 때의 글자에 대한 CSS Property를 지정합니다.

:active
링크를 클릭했을 때의 글자에 대한 CSS Property를 지정합니다.

예제 1

아래의 예제와 같이 문서의 모든 링크에 같은 CSS Property를 사용하여 링크 글자를 다룰 때는 사실 확장자가 .CSS 인 Style Sheet 를 사용하는게 바람직합니다. 왜냐하면 Style block을 사용하여 문서 내부에서만 사용하게 하면 먼 훗날(변덕이 심한 사람은 빠른 시일내에) 링크 걸린 글자색이라든지 밑줄을 없애고 싶을 때 문서마다 일일이 수정을 가해야 되기 때문이져. 자세한 내용은 여기를 참조하세요.

문서의 모든 링크에 같은 CSS Proeprty를 일괄적으로 지정할 경우

<HTML>
    <HEAD>
        <TITLE>link 관련 Pseudo class</TITLE>
    <STYLE type="text/css">
    <!-- 
    A:link{color:royalblue;}
    A:visited{color:gray;} 
    A:hover{color:orange;text-decoration:underline;}
    A:active{color:tomato;}
    -->
    </STYLE>   
    </HEAD>
    <BODY>
        <A href="http://www.yahoo.co.kr" target="_blank" title="야후코리아">야후코리아</A>
        <BR>
        <A href="http://www.naver.com" target="_blank" title="네이버">네&nbsp;&nbsp;&nbsp;이
        &nbsp;&nbsp;&nbsp;버</A><BR>
        <A href="http://www.nate.com" target="_blank" title="네이트닷컴">네이트닷컴</A><BR>
        <A href="http://www.hanafos.com" target="_blank" title="하나포스">하 나 포 스</A>
    </BODY>
</HTML>

출력결과

야후코리아
네 이 버
네이트닷컴
하 나 포 스

예제 2

이번에는 문서의 모든 링크에 일괄적으로 지정하는 경우가 아니고 2 가지의 Link 관련 가상 클래스를 지정하여 사용하는 방법입니다. 이 경우는 예를 들어 새로운 내용이 Update 되었다거나 특별한 공지 사항등이 있을 때 사용하면 유용합니다. 단 아래의 소스와 같이 :link 에{ font-weight : bold } 를 사용했을 경우 나머지 :visited, :hover, :active 도 같은 bold를 사용하는게 좋습니다. 예를 들어 :link만 bold를 사용하면 마우스를 올렸을 때 font-weight가 bold에서 normal로 바뀌면서 글자의 면적이 줄어들게 되므로 꿈틀거리는 효과가 나게 되져. 머 꿈틀거리는 효과가 마음에 들면 그렇게 쓰는 것도 괜찮겠지만 말입니다.

문서의 링크에 각각 다른 CSS Proeprty를 지정할 경우

<HTML>
    <HEAD>
        <TITLE>link 관련 Pseudo class</TITLE>
    <STYLE type="text/css">
    <!-- 
    A.new:link{color:red; font-weight:bold;}
    A.new:visited{color:red; font-weight:bold;} 
    A.new:hover{color:orange;text-decoration:underline; font-weight:bold;}
    A.new:active{color:tomato; font-weight:bold;}
    A:link{color:royalblue;}
    A:visited{color:gray;} 
    A:hover{color:orange;text-decoration:underline;}
    A:active{color:tomato;}
    -->
    </STYLE>   
    </HEAD>
    <BODY>
        <A class="new" href="http://www.yahoo.co.kr" target="_blank">야후코리아</A>
        <BR>
        <A class="new" href="http://www.naver.com" target="_blank">네&nbsp;&nbsp;&nbsp;이
        &nbsp;&nbsp;&nbsp;버</A><BR>
        <A href="http://www.nate.com" target="_blank" title="네이트닷컴">네이트닷컴</A><BR>
        <A href="http://www.hanafos.com" target="_blank" title="하나포스">하 나 포 스</A>
    </BODY>
</HTML>

출력결과

야후코리아
네 이 버
네이트닷컴
하 나 포 스

Top

Back

New

검색