이전
목록
다음
s

하이퍼링크에 여러가지 스타일만들기

senseme
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 2013-03-21 (목) 22:27:39 · 3881 · 1
<head>
<title> stylesheet : rollover text</title>
<meta http-equiv=content-type content="text/html; charset=euc-kr">
<style>

A:link.test1 { color: blue }
A:hover.test1 { color: red }

A:link.test2 { color: blue }
A:hover.test2 { font-size:15pt }

A:link.test3 { color: blue }
A:hover.test3 { font-weight: bold; font-style: italic }

A:link.test4 { text-decoration: none; color: blue }
A:visited.test4 { text-decoration: none }
A:hover.test4 { background: cyan; color:blue }

A:link.test5 { color: blue }
A:hover.test5 { font-family:궁서; font-weight: bold; font-size: 12pt }

A:link.test6 { color: blue; text-decoration: none }
A:visited.test6 { text-decoration: none }
A:hover.test6 { text-decoration: underline; color:red }

A:link.test7 { color: blue }
A:hover.test7 { color: darkred; font-weight: bold; background:#FFC1C1 }

A:link.test8 { color: blue; text-decoration: none }
A:visited.test8 { text-decoration: none }
A:hover.test8 { color: darkred; font-weight: bold; background:#FFC1C1 ; border:15 solid brown; padding:5px }


.batang {font-family:돋움;
font-size:10pt;
line-height:170%;
letter-spacing:-1px;
text-align:justify;
margin-top:0;
margin-bottom:0;
width:350px;
padding-top:20px;
border-top:10px cyan solid;}/*바탕글*/

.title { filter:shadow(color=#00008B, direction=135) ;
width:600px;
font-family:바탕;
font-weight:900;
font-size:30pt;
color:#90EE90 ;
line-height:300%;
}

ul.hover {list-style:none}
</style>
</head>

<body bgcolor=cccccc>
<table align=center width="569">
<tr>
<td width="563">
<div class="title">글자 롤오버</div>
<div class=batang>
자바스크립트 없이는 롤오버 단추를 만들 수가 없었습니다.
물론 자바스크립트를 쓰면 글자뿐만이 아니라 좀더 선택의 폭이 커집니다.
그러나 글자만으로 롤오버단추를 만든다면 스타일시트만으로도 충분합니다.
얼마든지 멋진 효과를 만들 수 있습니다. 이것들은 모두 <span style="letter-spacing:1px; font-family: times new roman; font-weight:bold; font-size=12pt; color:#696969;">IE5.xx</span> 이상에서만 지원됩니다.
<ol>
<li><a href=" http://www.how2homepage.com " class=test1>글자 색깔이 바뀝니다</a>
<li><a href=" http://www.how2homepage.com" class=test2>글자 크기가 바뀝니다</a>
<li><a href=" target='_blank'> http://www.how2homepage.com " class=test3>글자가 두꺼워지고 이탤릭으로 바뀝니다</a>
<li><a href=" http://www.how2homepage.com " class=test4>배경 색깔이 바뀝니다</a>
<li><a href=" http://www.how2homepage.com " class= test5>아예 글꼴이 바뀝니다</a>
<li><a href= " http://www.how2homepage.com " class=test6>색깔이 바뀌고 밑줄이 생깁니다</a>
<li><a href="http://www.how2homepage.com" class=test7>글자 색깔과 배경, 글자 두께가 바뀝니다</a>
<li><a href="http://www.how2homepage.com" class=test8>테두리 선까지도 굵게 해줄 수 있습니다</a>
</ol>
</div>

</td>
</tr>
</table>
</body>


</body>
#개발자팁 #개발자 #팁자료실 #기타
|

댓글 1개

화화이팅여
프로필 보기이 회원 글보기이 회원의 댓글보기
 2013-05-04 (토) 09:30:45
좋은 정보 감사합니다.^^*
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

8,188건
태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
14-08-26 조회 3,389
14-08-26 조회 3,543
14-08-26 조회 4,100
14-08-26 조회 3,478
14-08-26 조회 3,709
14-08-26 조회 3,636
14-08-26 조회 3,407
14-08-26 조회 3,514
14-08-26 조회 3,471
14-08-26 조회 3,604
14-08-25 조회 4,026
14-08-16 조회 4,154
14-08-12 조회 4,046
14-08-05 조회 3,886
14-08-04 조회 4,585
14-08-04 조회 3,917
14-08-01 조회 5,005
14-07-29 조회 4,185
14-07-10 조회 4,082
14-07-08 조회 4,728
14-07-08 조회 4,205
14-07-05 조회 3,856
14-05-26 조회 5,355
14-05-26 조회 4,116
14-05-21 조회 4,483
14-05-19 조회 7,431
14-05-17 조회 6,782
14-04-30 조회 7,179
14-04-27 조회 4,601
14-04-26 조회 4,777
14-04-13 조회 4,818
14-04-13 조회 4,082
14-03-25 조회 6,423
14-03-25 조회 4,098
14-03-12 조회 3,906
14-03-12 조회 5,328
14-02-24 조회 4,651
13-12-27 조회 3,949
13-11-18 조회 4,257
13-11-18 조회 6,579
13-10-17 조회 4,569
13-10-03 조회 6,213
13-10-02 조회 4,116
13-09-29 조회 4,649
13-09-29 조회 3,962
13-09-17 조회 3,757
13-09-11 조회 6,021
13-09-09 조회 4,227
13-09-05 조회 9,338
13-08-23 조회 5,623
13-08-22 조회 5,164
13-08-22 조회 4,507
13-08-22 조회 4,972
13-08-17 조회 5,888
13-08-17 조회 4,122
13-07-11 조회 5,426
13-07-11 조회 4,360
13-07-08 조회 3,954
13-07-04 조회 4,161
13-07-04 조회 4,055
13-07-04 조회 3,942
13-07-03 조회 5,859
13-07-01 조회 3,697
13-07-01 조회 3,645
13-07-01 조회 4,501
13-06-21 조회 6,221
13-06-14 조회 4,788
13-06-11 조회 3,644
13-06-06 조회 5,369
13-06-05 조회 4,104
13-05-11 조회 4,836
13-05-10 조회 4,398
13-05-10 조회 4,621
13-05-10 조회 4,010
13-05-08 조회 4,355
13-05-08 조회 3,622
13-05-08 조회 4,039
13-05-08 조회 5,210
13-04-05 조회 6,004
13-03-31 조회 5,617
13-03-24 조회 3,949
13-03-24 조회 6,109
13-03-23 조회 3,627
13-03-21 조회 3,722
13-03-20 조회 3,735
13-03-20 조회 4,217
13-03-20 조회 3,716
13-03-20 조회 3,852
13-03-20 조회 6,030
13-03-20 조회 4,010
13-03-20 조회 4,711
13-03-19 조회 5,698
13-03-14 조회 3,810
13-03-14 조회 4,204
13-03-14 조회 4,492
13-03-08 조회 4,085
13-03-03 조회 4,527
13-02-24 조회 4,939
13-02-21 조회 4,700
13-02-19 조회 4,596
글쓰기