 밑줄 없는 링크 만들기
|
<설명>
-
문자에 링크를 걸면 밑줄이 생기지요 ? 스타일 시트를 이용하여 밑줄을 없앨 수 있습니다.
아래 명령문을 <head> 부분에 정의해 주면 링크걸린 곳에 생기는 밑줄이 없어집니다. 이것은 <a>태그의 속성을 바꾸어 주는 명령어입니다.
|
<예문> -
<style type="text/css">
a:link {color:#(색상코드) ; text-decoration : none}
a:visited {color:#(색상코드) ; text-decoration : none}
</style>
|
|
| |
| 마우스 오버시 밑줄 나타내기
|
<설명>
-
링크된 텍스트 부분을 마우스로 오버하는 경우에만 텍스트 밑에 줄이 그어지는 기능입니다. 아래 예문을 <head> 부분에 정의해 주면 됩니다.
|
<예문> -
<style type='text/css'>
A:link {color:#000000;text-decoration:none;}
A:visited {color:#000000;text-decoration:none;}
A:hover { text-decoration: underline; }
</style>
|
|
| |
| 링크부분 점선 안보이게 하기
|
<설명>
-
링크된 아이콘이나 이미지를 마우스로 누르면 이미지 주변에 점선이 나타납니다. 그러나 이러한 점선을 나타나지 않게 하는 기능이 있습니다. 아래 예문을 이용해 보시기 바랍니다.
|
| <예문>
<a href="링크할 페이지" onfocus='this.blur()'><img src="이미지 파일명"></a>
|
|
| |
| 링크부분 밑줄 바꾸기
|
<설명>
-
일반적으로 링크된 텍스트 부분을 마우스로 누르면 텍스트 밑에 줄이 그어집니다. 이때 밑줄을 점선 모양의 선으로 바꾸어 사용할 수 있습니다. 점선 모양은 그래픽으로 만드시고, 아래 예문을 <head> 부분에 정의해 주면 됩니다.
|
<예문> -
<style type='text/css'>
A:link {color:#000000;text-decoration:none;}
A:visited {color:#000000;text-decoration:none;}
A:active {color:#000000;text-decoration:none;}
A:hover {color:#666666;
background-image:(점 이미지 파일명);
background-position:bottom;
background-repeat:repeat-x;
text-decoration:none}
</style>
|
|
