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

 
Previous Post HTML-CSS] A태그의, 링크 밑줄(언더라인) 없애기, 제거; Links without...Perl/펄] 일본어 히라가나(인명/지명), 여권용 로마자로 변환 표기; Japanese ...C언어] printf() 함수에서, 큰따옴표(쌍따옴표) 출력 방법; Print Double...C언어] 배열 크기, 길이, 사이즈 (요소 개수) 구하기; Get Array Size, N...Java/자바] 복소수 사칙연산 클래스; 덧셈, 뺄셈, 곱셈, 나눗셈; Complex Nu...Excel/엑셀] 복소수 사칙연산; 덧셈, 뺄셈, 곱셈, 나눗셈; Calc Complex ...지메일(Gmail) 영문판, 한글판 스냅샷(캡처) 화면; Screen CaptureExcel/엑셀] 복소수 표현, 입력 함수, 사용 방법; Input Complex Numb...C언어] malloc 함수, strcpy 함수로, 문자열 복사, 저장, 출력 방법; Str...C언어] malloc() 함수로 메모리 할당 받기. 사용 방법

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

Saturday, February 17, 2007

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

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


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="http://www.google.co.kr/">Google 검색</a>


<br />


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


</body>
</html>



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

0 Comments:

Post a Comment

<< Home RSS 2.0 feed

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