mwultong Blog ... 프로그래밍 / 계산기

컴퓨터 엑셀 워드 포토샵 구글어스 WINDOWS JAVASCRIPT JAVA C++

 
Saturday, February 17, 2007

HTML-CSS] 마우스 가져갔을 때에만, 밑줄(언더라인) 표시; Mouse Hover Underline


평소에는 링크 텍스트에 밑줄을 넣지 않다가, 마우스가 그 위를 지나갈 때(호버)에만 밑줄(언더라인)을 넣는 방법입니다. 링크에 항상 밑줄이 있는 것이 기본값이지만, 그러면 가독성이 떨어지기에, 마우스가 지날 때에만 밑줄을 넣는 방법이 많이 사용됩니다.

또한, 마우스를 가져가면, 링크 텍스트를 빨간색으로 변경시켜 알아보기 쉽게 하는 법도 있습니다.


a:link 는 보통 때의 링크 텍스트의 스타일이고

a:visited 는 이미 방문한 적이 있는 링크의 스타일이고

a:hover 는 마우스가 링크 위를 스쳐 지날 때의 색깔이고

a:active 는 좀 모호한데, 링크를 완전히 클릭하지 않고, 마우스로 선택만 해 둔 상태의 스타일입니다.


마우스 호버 때에만, 링크에 언더라인, 색상 변경 예제


파일명: example.html
<html>
<head>
<style type="text/css">


/*
기본값 + 마우스 가져가면 링크 텍스트를 빨간색으로 변경
모든 링크들에 일괄적으로 적용됩니다.
*/
a:link    { text-decoration:underline; color:#8600E4 }
a:visited { text-decoration:underline; color:#800080 }
a:hover   { text-decoration:underline; color:#FF0000 }
a:active  { text-decoration:underline; color:#FF0000 }


/*
마우스 가져갔을 때에만, 링크 텍스트에 밑줄 넣기
no-uline 이라는 클래스를 지정한 링크에만 적용됨
*/
a.no-uline:link    { text-decoration:none }
a.no-uline:visited { text-decoration:none }
a.no-uline:hover   { text-decoration:underline }
a.no-uline:active  { text-decoration:none }


</style>
</head>


<body>


<!-- 기본 스타일 + 마우스 가져가면 링크 텍스트를 빨간색으로 변경 -->
<a href="https://www.google.co.kr/">Google 검색</a>


<br />


<!--
a.no-uline 클래스를 이용하여,
마우스 가져갔을 때에만 밑줄 표시하기 + 링크 텍스트를 빨갛게 표시
-->
<a href="https://www.google.co.kr/" class="no-uline">Google 검색</a>


</body>
</html>



참고: ▶▶ HTML-CSS] A태그의, 링크 밑줄(언더라인) 없애기, 제거; Links without Underline




tag: html
HTML | CSS | 자바스크립트 JavaScript

0 Comments:

<< Home RSS 2.0 feed

구글 Google 에서 제공하는 무료 블로그 서비스인 블로거 Blogger 의 인터넷 주소는 www.blogger.com 입니다. Blogger 에 블로그를 만들면, blogspot.com 이라는 주소에 블로그가 생성됩니다.
블로그를 직접 방문하지 않고도 최신 게시물을 구독하려면 RSS 2.0 feed 주소를 리더기에 등록하시면 됩니다.
Previous Posts
Monthly Archives
Top