<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>
게시글 목록
| 번호 | 제목 |
|---|---|
| 8265 | |
| 20403 | |
| 20402 | |
| 20401 | |
| 20400 |
웹서버
서버 동시접속자 설정 변경하기
|
| 8259 | |
| 20399 | |
| 20398 | |
| 8255 | |
| 8249 | |
| 8246 | |
| 8242 | |
| 20396 | |
| 8240 | |
| 20395 | |
| 20394 |
MySQL
테이블 복사 쿼리
|
| 31033 | |
| 28385 | |
| 20393 |
PHP
현재 접속중인 사용자 나타내기
|
| 28380 | |
| 20392 |
MySQL
mysql select 후 update 하기
|
| 28377 | |
| 20391 | |
| 20390 |
PHP
한글문자열 자르는 법 입니다.
|
| 20389 | |
| 20388 | |
| 20387 |
PHP
이메일주소 검사하기 입니다.
|
| 20386 | |
| 20385 | |
| 20384 |
node.js
Node js 게시판 프로젝트 소개합니다.
|
| 20383 |
PHP
pc 모바일 체크
1
|
| 20382 |
PHP
계정 사용량(용량) 확인
|
| 8238 | |
| 20380 | |
| 20379 |
MySQL
소수점 반올림 버림
|
| 28376 | |
| 28372 | |
| 20378 | |
| 20377 |
PHP
에러 로그파일 생성하기
|
| 8235 | |
| 20375 | |
| 20374 | |
| 20373 |
PHP
후이즈검색 하기 입니다.
|
| 20372 |
PHP
그래프 그리기 입니다.
|
| 20371 |
JavaScript
자바스크립트로 구현한 number_format() 입니다.
|
| 20370 |
JavaScript
금액 관련 숫자를 한글로 변환하기 입니다.
|
| 28370 | |
| 20369 |
PHP
PHP 날짜 계산 관련 함수
|
| 28366 | |
| 20368 |
jQuery
jQuery 1.x와 2.x 버전 동시에 사용하기
|
| 20367 | |
| 20366 | |
| 20365 |
JavaScript
사업자 등록번호 검사하기 입니다.
|
| 20364 | |
| 20363 |
JavaScript
항상 같은곳에 광고창 만들기 입니다.
|
| 20362 |
JavaScript
부메뉴 나오게 하기 입니다.
|
| 20361 |
JavaScript
특정문자 제거하기 입니다.
|
| 20360 |
JavaScript
휴대폰번호 검사 하기 입니다.
|
| 20359 |
JavaScript
이미지 좌우로 이동 갤러리 입니다.
|
| 8231 | |
| 20358 | |
| 20357 |
JavaScript
쉬운 replaceAll 입니다.
|
| 20356 | |
| 20355 | |
| 20354 | |
| 20353 | |
| 20352 |
JavaScript
콤보스타일 메뉴 입니다.
|
| 20351 |
JavaScript
쿠키를 이용한 레이어 공지창 입니다.
|
| 20350 |
JavaScript
효과있는 텍스트 틱커 입니다.
|
| 20349 | |
| 20348 |
PHP
HTTP 인증 하기 입니다.
|
| 20347 |
JavaScript
외부 문서 불러오기 입니다.
|
| 20346 |
JavaScript
지정한 날짜까지 New 이미지를 띄워주기 입니다.
|
| 20345 | |
| 20344 |
JavaScript
메일 주소 검사하기 체크박스 입니다.
|
| 20343 |
JavaScript
무단링크 금지하기 입니다.
|
| 20342 | |
| 20341 |
MySQL
DB백업 및 복원
|
| 20340 |
JavaScript
페이지가 다른 사이트의 프레임에 갇히는 것을 막기 입니다.
|
| 20339 | |
| 20338 | |
| 20337 |
jQuery
input text 대문자만 받는 Jquery
|
| 20336 | |
| 20335 |
JavaScript
이미지 업로드와 미리보기 입니다.
|
| 20334 |
JavaScript
배경음악 랜덤 재생 하기 입니다.
|
| 20333 |
JavaScript
css 지원 여부 확인해서 다른 페이지로 이동하기 입니다.
|
| 20332 |
JavaScript
하부메뉴가 보였다가 숨겨졌다 하는 토글버튼 입니다.
|
| 20331 |
JavaScript
개별 페이지에 인덱스로 거쳐 들어오게 하기 입니다.
|
| 20330 |
JavaScript
랜덤으로 이미지 출력 되기 입니다.
|
| 20329 |
JavaScript
사용자 해상도 알아내기 입니다.
|
| 20328 |
JavaScript
붙여넣기 금지하기 입니다.
|
| 20327 |
MySQL
대소문자 데이터 조회하기
|
| 20326 |
JavaScript
퇴장시 팝업창 한번한 띄우기 입니다.
|
| 20325 | |
| 20324 | |
| 20323 |
JavaScript
시도, 구군, 동 주소 select
|
| 20322 |
MySQL
커리로 DB 테이블 명세서 출력하기
|
| 20321 |
JavaScript
브라우저 해상도 구분없는 절대 x,y 좌표 값 구하기 입니다
|
| 20320 |
PHP
rss 읽어오기 입니다.
|
| 20319 |
JavaScript
자바스크립트로 Ajax 효과내기 입니다.
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기