[HTML] 스타일로 표현할 수 있는 여러가지 링크모양

우리가 처음 HTML을 배울때 기본적으로 접하게 되는 링크는 퍼런색 글씨에 밑줄이 좌악 그어져 있으며
그것도 모자라 누르고 난 링크는 튀튀한 보라색으로 죽은듯한 색상으로 변하게 됩니다.;;;
여기서도 역시 우리의 갈증을 풀어줄 녀석은 스타일시트가 되겠습니다.
우선 스타일시트내에서 링크설정방법을 알아본 후에 사례별 탐구를 해보도록 하겠습니다.

#1.스타일시트 내에서 링크의 설정방법
<style type="text/css">
a:link {color:#1E5893; text-decoration:none; }
a:visited {color:#1E5893; text-decoration:none; }
a:active {color:#1E5893; text-decoration:none; }
a:hover {color:#448CF9; text-decoration:underline; }
</style>
위의 태그를 <head></head>태그 사이에 넣어시면 해당문서의
모든 링크에 위의 설정이 적용됩니다.

a:link - 일반적으로 눈에 보이는(방문한적이 없는) 링크의 기본모양.
a:visited - 방문한 적이 있는 링크의 모양.
a:active - 활성화된 상태에서의 링크의 모양.(링크가 눌린상태)
a:hover - 마우스가 오버됐을 때 변화하는 모양.

--------------------------------------------------------------------------------------------------------

일반적으로는 위의 모양처럼 폰트 색상(color)과 텍스트의 모양(text-decoration)정도의 설정만 해서 모양을
만드는 경우가 많지만 기타의 경우도 아래쪽에서 살펴보도록 하겠습니다.

#2.여러가지 적용예제
a:link {color:#1E5893; text-decoration:none; }
a:visited {color:#1E5893; text-decoration:none; }
a:active {color:#1E5893; text-decoration:none; }
a:hover {color:#448CF9; text-decoration:none; }
...................................................................................
효과미리보기

a:link {color:#1E5893; text-decoration:none; }
a:visited {color:#1E5893; text-decoration:none; }
a:active {color:#1E5893; text-decoration:none; }
a:hover {color:#448CF9; text-decoration:underline; }
...................................................................................
효과미리보기

a:link {color:#1E5893; text-decoration:none; }
a:visited {color:#1E5893; text-decoration:none; }
a:active {color:#1E5893; text-decoration:none; }
a:hover {color:#448CF9; text-decoration:underline overline; }
...................................................................................
효과미리보기

a:link {color:#1E5893; text-decoration:none; }
a:visited {color:#1E5893; text-decoration:none; }
a:active {color:#1E5893; text-decoration:none; }
a:hover {color:#448CF9; text-decoration:none;background:#FDF3C4;}
...................................................................................
효과미리보기

a:link {color:#1E5893; text-decoration:none; }
a:visited {color:#1E5893; text-decoration:none; }
a:active {color:#1E5893; text-decoration:none; }
a:hover {color:#448CF9; text-decoration:none;font-weight:bold}
...................................................................................
효과미리보기

a:link {color:#1E5893; text-decoration:none; }
a:visited {color:#1E5893; text-decoration:none; }
a:active {color:#1E5893; text-decoration:none; }
a:hover {color:#448CF9; text-decoration:none;border-bottom:1 dotted #E0450A}
...................................................................................
효과미리보기

a:link {color:#1E5893; text-decoration:none; }
a:visited {color:#1E5893; text-decoration:none; }
a:active {color:#1E5893; text-decoration:none; }
a:hover {color:#448CF9; text-decoration:none;border:1 dotted #0000FF;}
...................................................................................
효과미리보기