<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>
<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개
12년 전
좋은 정보 감사합니다.^^*
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 5930 | 12년 전 | 4639 | ||
| 5929 | 12년 전 | 7838 | ||
| 5928 | 12년 전 | 783 | ||
| 5927 | 12년 전 | 1412 | ||
| 5926 | 12년 전 | 1829 | ||
| 5925 |
김준수사랑
|
12년 전 | 1245 | |
| 5924 |
 darllim |
13년 전 | 2757 | |
| 5923 | 13년 전 | 958 | ||
| 5922 | 13년 전 | 1162 | ||
| 5921 | 13년 전 | 655 | ||
| 5920 | 13년 전 | 1180 | ||
| 5919 |
 슬픈외로움 |
13년 전 | 1372 | |
| 5918 | 13년 전 | 12588 | ||
| 5917 |
프로프리랜서
|
13년 전 | 1099 | |
| 5916 |
프로프리랜서
|
13년 전 | 4621 | |
| 5915 |
프로프리랜서
|
13년 전 | 1601 | |
| 5914 |
프로프리랜서
|
13년 전 | 649 | |
| 5913 |
프로프리랜서
|
13년 전 | 931 | |
| 5912 |
프로프리랜서
|
13년 전 | 3744 | |
| 5911 |
프로프리랜서
|
13년 전 | 923 | |
| 5910 |
 돼지코구뇽 |
13년 전 | 4581 | |
| 5909 |
수야3019
|
13년 전 | 666 | |
| 5908 | 13년 전 | 833 | ||
| 5907 | 13년 전 | 1230 | ||
| 5906 | 13년 전 | 8754 | ||
| 5905 |
프로프리랜서
|
13년 전 | 1469 | |
| 5904 | 13년 전 | 2494 | ||
| 5903 | 13년 전 | 1651 | ||
| 5902 | 13년 전 | 1924 | ||
| 5901 | 13년 전 | 2010 | ||
| 5900 |
프로프리랜서
|
13년 전 | 1086 | |
| 5899 |
프로프리랜서
|
13년 전 | 1276 | |
| 5898 | 13년 전 | 17670 | ||
| 5897 | 13년 전 | 2332 | ||
| 5896 | 13년 전 | 4353 | ||
| 5895 | 13년 전 | 1689 | ||
| 5894 | 13년 전 | 2096 | ||
| 5893 |
프로프리랜서
|
13년 전 | 2155 | |
| 5892 | 13년 전 | 16039 | ||
| 5891 |
bitmaster
|
13년 전 | 1076 | |
| 5890 |
프로프리랜서
|
13년 전 | 943 | |
| 5889 |
 AKASIA |
13년 전 | 722 | |
| 5888 | 13년 전 | 1615 | ||
| 5887 |
 ppogul |
13년 전 | 3198 | |
| 5886 | 13년 전 | 3448 | ||
| 5885 | 13년 전 | 2109 | ||
| 5884 | 13년 전 | 5651 | ||
| 5883 | 13년 전 | 2819 | ||
| 5882 | 13년 전 | 6027 | ||
| 5881 | 13년 전 | 1635 | ||
| 5880 | 13년 전 | 20713 | ||
| 5879 | 13년 전 | 899 | ||
| 5878 |
나의라임토마토
|
13년 전 | 1403 | |
| 5877 | 13년 전 | 16764 | ||
| 5876 |
maniAc
|
13년 전 | 2799 | |
| 5875 | 13년 전 | 1031 | ||
| 5874 | 13년 전 | 3732 | ||
| 5873 |
lainfox
|
13년 전 | 1182 | |
| 5872 | 13년 전 | 1344 | ||
| 5871 | 13년 전 | 793 | ||
| 5870 | 13년 전 | 2528 | ||
| 5869 |
AMDbest
|
13년 전 | 1511 | |
| 5868 |
한번잘해보자
|
13년 전 | 657 | |
| 5867 |
 byfun |
13년 전 | 911 | |
| 5866 | 13년 전 | 7487 | ||
| 5865 | 13년 전 | 2404 | ||
| 5864 | 13년 전 | 935 | ||
| 5863 | 13년 전 | 1308 | ||
| 5862 | 13년 전 | 2875 | ||
| 5861 | 13년 전 | 1026 | ||
| 5860 | 13년 전 | 19329 | ||
| 5859 | 13년 전 | 2937 | ||
| 5858 | 13년 전 | 2651 | ||
| 5857 | 13년 전 | 4822 | ||
| 5856 |
ppogul |
13년 전 | 1949 | |
| 5855 | 13년 전 | 816 | ||
| 5854 | 13년 전 | 1006 | ||
| 5853 | 13년 전 | 16102 | ||
| 5852 | 13년 전 | 823 | ||
| 5851 | 13년 전 | 2222 | ||
| 5850 | 13년 전 | 1772 | ||
| 5849 |
AMDbest
|
13년 전 | 1302 | |
| 5848 |
 직화오리팡야 |
13년 전 | 1161 | |
| 5847 |
SeanLee
|
13년 전 | 1304 | |
| 5846 | 13년 전 | 23463 | ||
| 5845 | 13년 전 | 2648 | ||
| 5844 | 13년 전 | 28802 | ||
| 5843 |
 카카오툴즈 |
13년 전 | 2204 | |
| 5842 | 13년 전 | 22514 | ||
| 5841 | 13년 전 | 5742 | ||
| 5840 |
Quincy
|
13년 전 | 931 | |
| 5839 | 13년 전 | 959 | ||
| 5838 | 13년 전 | 2817 | ||
| 5837 | 13년 전 | 1093 | ||
| 5836 | 13년 전 | 2313 | ||
| 5835 | 13년 전 | 1517 | ||
| 5834 | 13년 전 | 1501 | ||
| 5833 | 13년 전 | 6672 | ||
| 5832 | 13년 전 | 5210 | ||
| 5831 | 13년 전 | 1068 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기