여러가지 LINK 속성 만들기
{1} 이번예제는 하이퍼링크시 링크속성을 여러가지 모습으로 제어하는 내용입니다.
| A:link |
한번도 클릭한적이 없는 하이퍼링크 |
| A:visited |
방문한적이 있는 하이퍼링크 |
| A:hover |
마우스가 하이퍼링크로 올라갔을 때 |
| A:active |
실행 하이퍼링크{마우스를 눌렀을 때의 하이퍼링크} |
{1}이번예제는 내용의 양이 모호하면 스크롤이 X축 또는 Y축에 동시에 생기는 현상이 있습니다.
이런경우 CSS 한줄이면 원하는 방향에 스크롤을 강제로 없애는 기능입니다.
{2}먼저 <HEAD> 부분에 CSS 를 선언합니다.
<html>
<head>
<title>여러가지 LINK 속성 만들기</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<style type="text/css">
<!--
a.no1:link {color:#990000; text-decoration:none;}
a.no1:visited {color:#990000; text-decoration:none;}
a.no1:hover {color:#990000; text-decoration:none;}
a.no2:link {color:#990000; text-decoration:none;}
a.no2:visited {color:#990000; text-decoration:none;}
a.no2:hover {color:#990000; text-decoration:underline;}
a.no3:link {color:#990000; text-decoration:none;}
a.no3:visited {color:#990000; text-decoration:none;}
a.no3:hover {color:#990000; text-decoration:underline overline;}
-->
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
</body>
</html> |
{3}CSS 선언된 내용을 보시면 {no1}, {no2}, {no3} 라는식으로 각기 이름을 가지고있죠?
이 이름은 <BODY> 안에서 <Class=no1>, <Class=no2>, <Class=no3> 라는식으로 각각 불러들여서
사용한답니다.
예를들어<a href="http://myhome.naver.com/jong2509" target="_blank" Class=no1>해관이의 드림위버
공부방</a>
이런식이라고 보시면 됩니다.
▷ {text-decoration:none;} - 밑줄안긋기
▷ {text-decoration:underline;} - 밑줄긋기
▷ {text-decoration:underline overline;} - 밑줄 및 윗줄긋기
{4} 그럼 이렇게 적용이 되겠죠?
<html>
<head>
<title>여러가지 LINK 속성 만들기</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<style type="text/css">
<!--
a.no1:link {color:#990000; text-decoration:none;}
a.no1:visited {color:#990000; text-decoration:none;}
a.no1:hover {color:#990000; text-decoration:none;}
a.no2:link {color:#990000; text-decoration:none;}
a.no2:visited {color:#990000; text-decoration:none;}
a.no2:hover {color:#990000; text-decoration:underline;}
a.no3:link {color:#990000; text-decoration:none;}
a.no3:visited {color:#990000; text-decoration:none;}
a.no3:hover {color:#990000; text-decoration:underline overline;}
-->
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
| <a href="http://myhome.naver.com/jong2509" target="_blank" Class=no1>해관이의 드림위버4 공부방</a>
| <a href="http://myhome.naver.com/jong2509" target="_blank" Class=no2>해관이의 드림위버4 공부방</a>
| <a href="http://myhome.naver.com/jong2509" target="_blank" Class=no3>해관이의 드림위버4 공부방</a> |
</body>
|
