[CSS] 10. Links ( 링크 설정 )

이번에는 CSS를 이용한 링크 관련 설정에 대해서 알아보도록 하겠습니다.  

 

•  :link Signifies unvisited hyperlinks.

•  :visited Signifies visited hyperlinks.

•  :hover Signifies an element that currently has the user's mouse pointer hovering over it.

•  :active Signifies an element on which the user is currently clicking.

이 링크관련 속성은 HTML문서의 헤더부분에 정의를 하시면 됩니다. 그리고 a:hover속성은 a:link 와 a:visited 다음에 와야 합니다. 그리고 a:active속성은 a:hover속성 다음에 와야 합니다. 

<style type="text/css">
a:link {color: #000000}
a:visited {color: #006600}
a:hover {color: #FFCC00}
a:active {color: #FF00CC}
</style>

 

 

 

# 참고로 아래 예제들은 네이버 블로그 특성상 스타일을 먹지 않고 있습니다. 개인적으로 html문서를 만들어서 테스트 해보시기를 권장합니다.

 

 

링크 기본 색상 설정

Following is the example which demonstrates how to set the link color. Possible value could be any color name in any valid format.

<style type="text/css"> a:link {color:#0000FF} </style> <a href="/html/index.htm">Black Link</a>

This will produce following black link:

Black Link

 

방문했던 링크 색상 설정

Following is the example which demonstrates how to set the color of visited links. Possible value could be any color name in any valid format.

<style type="text/css"> a:visited {color: #006600} </style> <a href="/html/index.htm">Click this link</a>

This will produce following link. Once you will click this link, it will change its color to green.

Click this link

 

마우스 hover시 링크 색상 설정

Following is the example which demonstrates how to change the color of links when we bring a mouse pointer over that link. Possible value could be any color name in any valid format.

<style type="text/css"> a:hover {color: #FFCC00} </style> <a href="/html/index.htm">Bring Mouse Here</a>

This will produce following link. Now you bring your mouse over this link and you will see that it changes its color to yellow.

Bring Mouse Here

 

액티브 링크 색상 설정

Following is the example which demonstrates how to change the color of active links. Possible value could be any color name in any valid format.

<style type="text/css"> a:active {color: #FF00CC} </style> <a href="/html/index.htm">Click This Link</a>

This will produce following link. This will change it color to pink when user clicks it.

Click This Link

 

 

 

 

 

 

 

Reference : http://www.tutorialspoint.com/css/css_links.htm