순지난
RSS
<html>
<head>
<title>링크에 여러가지 효과 주기</title>
<!--
BORDER는 전체 적인 곳에 적용 되고 왼쪽, 오른쪽, 위, 아래에 적용 할 때에는 BORDER-(TOP/BOTTOM/LEFT/RIGHT) 원하시는 것을 사용 하시면 됩니다.
그리고 BORDER 스타일을 준 곳에 마우스 오버시 약간 흔들리죠^^ 그건 처음에는 BORDER 값이 없다가 오버시에 BORDER 값이 생겨서 그렇습니다.
그걸 방지 하시려면 처음에도 BORDER 값을 주셔야 하는데 여기에서 중요 한 것은 앵커 태그에 직접 주시면 안된 다는 것입니다.
직접 줄 경우에 스타일 정의가 무시 됩니다.
또한 앵커 태그 안에 폰트에 줄경우에는 BORDER 값이 적용되고 그 위에 다시 스타일에 BORDER값이 또 한번 적용 되어 결과 적으로는 2px solid 가 되어 버립니다.
- X -
(처음부터 앵커태그 스타일만 적용/스타일 정의가 무시 됩니다)
스타일 정의 부분
A:hover
{BORDER: #000000 1px solid}
본문중 앵커 태그 부분
<a href="#" style="BORDER: #000000 1px solid">aaaaa</a>
- X -
(결과적 2px solid/앵커 태그에서 1px 그리고 또 다시 스타일 정의에서 1px)
스타일 정의 부분
A:hover
{BORDER: #000000 1px solid}
본문중 앵커 태그 부분
<a href="#"><span style="BORDER: #000000 1px solid">aaaa</span></a>
- O -
스타일 정의 부분
A:hover
{BORDER: #000000 1px solid}
SPAN A
{BORDER: 바탕색 1px solid}
본문중 앵커 태그 부분
<span><a href="#">aaaa</a></span>
위와 같은 경우 처음부터 바탕색으로 1px가 존재 하기 때문에 보이지 않다가 마우스 오버시 보이지 않던 1px에 바탕색외에 색을 주어서 보이게 합니다.
몇가지 예제를 통해서 효과를 주었지만 스타일만으로도 수없이 많은 효과를 만들수 있습니다.
-->
<style type="text/css">
<!--
.FONTS
{FONT-FAMILY: verdana, arial, sans-serif; font-size: 11px}
A:hover.A
{TEXT-DECORATION: none}
/*링크된 곳에 밑줄 효과를 주지 않습니다*/
A:hover.B
{TEXT-DECORATION: overline}
/*링크된 곳에 윗줄 효과를 줍니다*/
A:hover.C
{TEXT-DECORATION: line-through}
/*링크된 곳에 가운데줄 효과를 줍니다*/
A:hover.D
{TEXT-DECORATION: overline underline}
/*링크된 곳에 윗줄과 밑줄을 동시에 줍니다*/
A:hover.E
{TEXT-DECORATION: none; FONT-STYLE: italic}
/*글체가 이탤릭체로 변합니다*/
A:hover.F
{TEXT-DECORATION: none; BACKGROUND-COLOR: #FFF5B7}
/*링크된 곳에 배경색을 줍니다*/
A:hover.G
{TEXT-DECORATION: none; BORDER: #000000 1px solid}
/*링크된 곳에 보더를 주어 박스를 형성 합니다*/
A:hover.H
{TEXT-DECORATION: none; BORDER: #000000 1px solid; BACKGROUND-COLOR: #FFF5B7}
/*링크된 곳에 박스를 형성 하고 그안에 배경색을 줍니다*/
A:hover.I
{TEXT-DECORATION: none; FONT-WEIGHT: bold}
/*링크된 곳에 글자가 굵게 나타 납니다*/
A:hover.J
{TEXT-DECORATION: none; FONT-WEIGHT: bold; COLOR: #FF0000}
/*링크된 곳에 글자 굵기와 함께 글자 색이 변합니다*/
SPAN A
{TEXT-DECORATION: none; BORDER: #FFFFFF 1px solid}
/*바탕색과 같은색의 보더를 미리 앵커에 줍니다*/
-->
</style>
</head>
<body>
<div class="FONTS">
<a href="#">CSS</a><br><br>
<a href="#" class="A">CSS</a><br><br>
<a href="#" class="B">CSS</a><br><br>
<a href="#" class="C">CSS</a><br><br>
<a href="#" class="D">CSS</a><br><br>
<a href="#" class="E">CSS</a><br><br>
<a href="#" class="F">CSS</a><br><br>
<a href="#" class="G">CSS</a><br><br>
<a href="#" class="H">CSS</a><br><br>
<a href="#" class="I">CSS</a><br><br>
<a href="#" class="J">CSS</a><br><br>
<span><a href="#" class="G">CSS</a></span>
</div>
</body>
</html>
'Html &CSS' 카테고리의 다른 글
| 텍스트 갤러리 소스 (0) | 2011.06.28 |
|---|---|
| 문단서식 방향바꾸기 (0) | 2011.06.25 |
| CSS를 이용한 마우스 커서 모양 지정 (0) | 2011.06.25 |
| 테이블의 선을 단선으로 border-collapse 속성 (0) | 2011.06.25 |
| table-layout 속성을 이용하여 테이블 고정하기 (0) | 2011.06.25 |