active 상태, 링크 선택된 상태 CSS 이용한 링크 밑줄 처리 예제 소스

[ 태그에 관한 설명 ] A:link -> 링크를 나타냅니다. A:visited -> 방문한 링크를 나타냅니다.  A:active -> 활성화된 링크를 나타냅니다. 마우스를 눌렀을때 변화하는 모양이기도 합니다.  A:hover -> 마우스를 가져갔을 때의 링크를 나타냅니다. 인터넷 익스플로러에서만 제대로 표현됩니다. color 링크의 색상 -> color : red  font 링크의 글꼴 -> font : 12pt 굴림  text-decoration 링크의 장식 -> none, underline, overline, line-through, blink  background-color 링크의 배경색 -> background-color : yellow  font-weight 링크의 굵기 -> normal, bold, bolder, lighter

[ 링크에 마우스 올렸을 때만 밑줄 나옴 ] <style type="text/css"> a:link { text-decoration:none; } a:visited { text-decoration:none; } a:active { text-decoration:none; } a:hover { text-decoration:underline; } </style>

[ 링크에 마우스 올렸을 때 밑줄 나오지 않음 ] <style type="text/css"> a:link { text-decoration:none; } a:visited { text-decoration:none; } a:active { text-decoration:none; } a:hover { text-decoration:none; } </style>

[ 링크에 마우스 올렸을 때 밑줄 나오지 않고 색상 변함 ] <style type="text/css"> a:link { text-decoration:none; } a:visited { text-decoration:none; } a:active { text-decoration:none; } a:hover { color:red; text-decoration:none; } </style>

[ 링크에 마우스 올렸을 때 밑줄 나오지 않고 글자색 변하며,글자 두껍게 ] <style type="text/css"> a:link { text-decoration:none; } a:visited { text-decoration:none; } a:active { text-decoration:none; } a:hover { color:green; font-weight:bold; text-decoration:none; } </style>

[ 링크에 마우스 올렸을 때 밑줄 나오며 글크기10pt 글자색 변하며,글자 두껍게 ] <style type="text/css"> a:link { text-decoration:none; } a:visited { text-decoration:none; } a:active { text-decoration:none; } a:hover { color:red; font-weight:bold; font-size:8pt; text-decoration:underline; } </style>

원본 : http://blog.naver.com/carchannel/100014161270