하이

Safeguard 2013. 3. 14. 13:46

★ 페이지의 여백 없애기

<body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0">
* topmargin : 위
* leftmargin 좌측 ( 왼쪽여백 )
* marginheight & marginwidth 는 넷츠케이프용

★ 마우스를 올리면 색깔이 변하는

onMouseOver="this.style.backgroundColor='#FEDDAF'" onMouseOut="this.style.backgroundColor=''"

★ 마우스 제한두기

★ 새창을 띄우면 화면 가운데로 뜨게

<Script Language=javascript>
pw = (screen.availWidth - window.document.body.clientWidth) /2;
ph = (screen.availHeight - window.document.body.clientHeight) /2;
window.moveTo(pw,ph);
</Script>

★ 링크 주위에 사각 점선 없애기

onfocus='this.blur()'

★ 쉐도우 글자(그림자 글자) 만들기

<span style="filter:shadow(color=#CCCCCC); color:#4E4E4E; font-size:15px; font-weight:bold; height:10px"> Cgibank 와우~..^^ </span>

★ 홈페이지 자동이동

<head>와 </head> 사이에.. 아래의 소스를 넣어 주시면 됩니다.

content => 눈치 채셨지염.. 몇초후에 이동할 것인지를 나타냅니다.
url => 이동할 페이지의 주소

★ iframe 활용한 외부문서 호출방법

frameborder="0" 은 창의 테두리 두께를 0
width="360" height="160" 에서는 iframe 창의 크기를 조절
scrolling="auto" 는 스크롤바 자동생성 ( auto 대신 no 로 하면 없음, yes로 하면 항상 있음. )
style='border:1px navy solid;' 이것은 프레임보더 테두리를 1 픽셀로 잡고 색상은 navy !

★ 깔끔하게 수평선을 그어 보자~

<hr width="50%" size="1" color="red" noshade>
size="굵기" <--- 굵기조절
width="길이" <--- 길이조절
align="정렬" <--- 정렬 (left - right - center)
noshade <--- 그림자없게 평면으로 나타낼때

★ 상태바에 간단한 메시지 넣기 아래 쏘스를 <head>와 </head> 사이에 넣어주세요

<body> 부분에 아래처럼 onload="psm()" 쏘스를 넣으시면 됩니다

★ 작은 창이 점점 커지면서 새창 띄우기

이 소스는 윈도우가 새로 열릴때 작은 창이 점점 커지면서 열리는 소스입니다.
스크립트 부분을 <head>와 </head> 사이에 붙여넣으시고 원하는 창 사이즈를 수정해주면 됩니다.

var winx = 400; <-- 가로 400픽셀
var winy = 250; <-- 세로 250픽셀

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

<SCRIPT LANGUAGE='JavaScript'>
<!--
var winx = 400;
var winy = 250;

if(winy >= winx) {
for(i=1;i<=winy;i++)
if(i >= winx)
window.resizeTo(winx,i)
else
window.resizeTo(i,i);
} else {
for(i=1;i<=winx;i++)
if(i >= winy)
window.resizeTo(i,winy)
else
window.resizeTo(i,i);
}
//-->
</SCRIPT>

★ 주소 표시줄과 북마크에 아이콘 넣기

주소 표시줄과 북마크에 아이콘 넣기 먼저 아이콘을 준비합니다.
아이콘 만들 줄 아시는 분은
*.ico확장자로 아이콘을 만드시구요. (*.gif의 이름을 *.ico로 바꾸란 얘기가 아닙니다. 윈도우즈 데스크탑용 아이콘 *.ico를 만들란 야그..ㅠ_ㅠ; 마이크로앤젤로 등으로 제작 가능하구요. 굳이 제작하지 않더라고 대형통신망 공개자료실 등에 가면 구하실 수도 있고, 윈도우즈 안에도 포함돼 있습니다.)

다음엔 준비한 아이콘을 자신의 계정에 올립니다..

마지막으로..적용시킬 HTML문서안에 다음 태그를
<head>와 </head>사이에 삽입하시면 됩니다~

kissgod.ico 엔 아이콘의 경로및 이름을 적어 주시구요.

★ 이미지에 마우스 가져다 대면 흑백으로 색이 변하는 소스

필터효과를 이용한 소스입니다.
아래소스에서 자신이 원하는 이미지 주소만 바꾸어쓰시면 됩니다.

↓아래소스중에 "http://www.imbc.com/NETOP/9901/photoshop/koyote/koyote_03.jpg" 이것만 바꾸어 주세요!

★ 마우스 가져가면 점선 밑줄 생기는 소스..!!

<head>와 </head>사이에 아래의 내용을 넣어 줍니다.

★ 링크 밑줄 없애기

<head>와 </head> 사이에 아래 소스를 넣습니다.

A:link
- 방문한 적이 없는 하이퍼링크

A:visited
- 방문한 적이 있는 하이퍼링크

A:active
- 실행 하이퍼링크 (마우스를 눌렀을 때의 상태)

A:hover
- 마우스가 하이퍼링크로 올라갔을 때

#529CFF는 색상.
none는 밑줄 없음(밑줄 있음은 underline)

원하는 내용으로 수정해서 쓰면 됩니다.

★ 달력넣기.

<APPLET CODE="calendar.class" NAME="calendar" WIDTH=165 HEIGHT=150 codebase="http://myhome.hananet.net/~meet2u/class/">
<PARAM NAME="bg_color" VALUE="100125125"> // 배경색
<PARAM NAME="weekend_bg_color" VALUE="12142680"> // 주말(토,일)배경색
<PARAM NAME="highlight_color" VALUE="66655544"> // 선택날짜
<PARAM NAME="unselectable_color" VALUE="16777215"> // 현재달 글자색
<PARAM NAME="neighbor_month_date_color" VALUE="16711680"> //현재달 이외
<PARAM NAME="month_names" VALUE="1월 2월 3월 4월 5월 6월 7월 8월 9월 10월 11월 12월"> // 월
<PARAM NAME="week_names" VALUE="일 월 화 수 목 금 토"> // 요일
<PARAM NAME="min_year" VALUE="1950"> // 최소년도
<PARAM NAME="max_year" VALUE="2050"> // 최대년도
<PARAM NAME="min_date" VALUE="19500101"> // 최소년월일
<PARAM NAME="max_date" VALUE="20500101"> // 최대년월일

★ 글씨에 마우스 커서 가져다 대면 색이 변하는 소스

밑에 소스에 보시면 색을 지정해 주는 "blue" 은 가져다 대기전에 나타나는 색을 지정하며 "red"는 가져다 대면 변하는 색입니다. 끝에 "black" 은 마우스를 땟을때 나타나는 색입니다.
<Font color="blue" onMouseover="this.style.color='red'"onMouseout="this.style.color='black'">
</font>

★ iframe 외곽선 간단한 스타일로 깔끔하게 만들기

아이프레임(iframe)사용하실때 외관선이 깔끔하지 않았죠?
간단히 스타일을 넣어서 얇고 깨끗한 라인을 사용하는 방법입니다.
iframe의 기본 소스 내에 이 스타일을 추가해주세요..

style="border:solid 1 #7B7D7B"

물론 border line 넓이나 Color는 수정하시면 되구요.
프레임 보더 라인도 "0"으로 주세요.. --> frameborder="0"

아래는 전체 소스입니다.

★ 접속시 서서히 이미지 선명해지는 소스

if(c == true) {
b++;
}
if(b==100) {
b--;
}

u.filters.alpha.opacity=0 + b;
setTimeout("fade()",50);
}
//-->
</script>
<body>

</body>

★ 마우스 가져가면 흔들리는 이미지.

위의 소스는 <hdad>와 </head>안에 아래소스를 넣어 주시구요,

그리고 <body>와 </body>사이에 아래소스를 넣으세요.

★ 스타일 필터 이용 이미지 변화 주기

이미지에 변화를 주기전
<img src="이미지 주소" width="250" height="140">

파스텔
<img src="이미지 주소" style="filter=alpha(opacity=100,style=2,finishopacity=0)" width="250" height="140">

물결효과
<img src="이미지 주소" style="filter:wave(strength=8,freq=3,lightstrength=10,phase=25,add=0)" width="250" height="140">

엑스레이 효과
<img src="이미지 주소" style="filter:xray()" width="250" height="140">

위아래가 바뀜
<img src="이미지 주소" style="filter:flipv()" width="250" height="140">

좌우가 바뀜
<img src="이미지 주소" style="filter:fliph()" width="250" height="140">

그림자 효과
<img src="이미지 주소" style="filter:invert()" width="250" height="140">

속성 팁
opacity (불투명도)-기본값은 100 이며 0~100까지 수치조절, 숫자가 작을수록 투명해집니다.
style (모양)-0~3까지 선택, 0은 단일, 1은 선형, 2는 타원형, 3은 직사각형..
finishOpacity-style 1,2,3 의 경우 불투명도에 영향을 줌, 0~100 까지 수치를 조절합니다.

★ 스크롤바 없애는 소스

★ 홈피의 첫 배경화면 바꿔주는 랜덤소스.

<SCRIPT LANGUAGE="JavaScript">
var BgArray = new Array(
"이미지1",
"이미지2",
"이미지3",
"이미지4"
);
var gifimage="";
var picfolder="./";
today=new Date();
jran=today.getTime();
ia=9301;
ic=49297;
im=233280;
jran = (jran*ia+ic) % im;
gifimage = picfolder+BgArray[ ( Math.ceil((jran/(im*1.0))
*BgArray.length) ) - 1];
document.write("<center><img src='"+gifimage+"'></center>");
</script>

★ 마우스 오버시 소리나게 하기(사운드)

<bgsound src="#" ID=music loop=1 AUTOSTART=true>
<a href="#" onMouseOver="document.all.music.src='http://oxtag.com/html/music/wav/just.wav'">마우스를 올려보세요.</a>
<span onMouseOver="document.all.music.src='http://oxtag.com/html/music/wav/just.wav'">마우스를 올려보세요.</span>

앵커태그 및 스판태그등.. 여러가지 태그에 위 소스를 사용하시면 됨니다.

역시 제가 아직도 모자라는 사람이라서... 부득이 하게 자료는 퍼왔습니다.

저작권은 http://oxtag.com 에 있으며 카멜롯님이 직접 글을 쓰신 것으로서 저에게는 저작권이 없으면 인터넷을 사용하는 사람으로서 저작권 표시 매너를 지킵니다.
펌시에는 저작권 표시 수정해 주세요.

★ 이미지 옆에 글쓰기

게시판 같은 곳에 이미지를 넣으면 이미지 아래로 글자가 적혀지게 되는데 이미지의 여백부분에 글을 적으려면 ?

align="left/center/right" 태그 사용

예) <img src="이미지주소" align="left">글쓰기

위와 같이 적으면 이미지는 왼쪽에 정렬되고 그 오른쪽에 글자가 쓰여짐.
right 를 넣으면 이미지가 오른쪽으로 정렬되고 그 왼쪽에 글자가 적혀지고
center 는 이미지의 중간에 글이 적혀짐

★ 링크 만들기

1.자기 문서끼리 링크 시키기

<a href="문서명">링크될글자 나 이미지 </a>

예) <a href="../index.html>처음화면으로</a>

문서명에는 불러올 문서의 파일명과 함께 경로명도 함께 표시하여야 합니다.

불러올문서가 현재열려있는 문서와 같은 폴더안에 있다면 이런식으로

<a href="index.html">파일명만 적으면 됩니다.

링크될 글자나 이미지에는 말그대로 링크시킬 글자나 이미지를 넣으시면되고,

글자의경우 밑줄이 생기고 이미지의경우 테두리가 생깁니다.

테두리를 나타내지 않으려면 img tag안에 border=0를 적으면 됩니다.

2. 다른서버 문서 상호간 링크하기
다른서버에 있는 문서와 링크하는 것도 위와 다른것이 있다면 문서명 부분에 문서가 있는

다른서버의 주소 URL이 들어 간다는 것 빼고는 없습니다.

예를 들어 와우웹과 링크를 하고 싶다면,

와우웹

3. E-mail 창만들기

저에게 메일을 남겨 주세요 mrlunch@intizen.com

이런 형식의 메일 윈도우 띠우는 것은 아래와 같이 적으시면 됩니다.

<a href="mailto:mrlunch@intizen.com">mrlunch@intizen.com</a>

<a href="mailto:email주소">링크될글자 나 이미지</a>

★ 밑줄없는 링크 만들기

인터넷 항해를 하다 보면 링크는 되어있는데 밑줄이 없는 링크를 보셨을겁니다.
이미지를 사용해서 배경색과 동일하게 처리하는 것도 가능하지만
이런 경우는 이미지를 로딩해야 하기 때문에 로딩 시간이 길어지기 때문에 좋은 방법은 아니죠?.
HEAD와 /HEAD태그사이에 아래와 같이 써넣어 주면 됩니다.

※ 주의사항 : Netscape4.0이상과 IE 3.0이상에서만 지원이 가능합니다.

★ 소스보는법~!

보고 싶은 소스가 있는데 소스 못보게 막아논 홈페이지가 있을때,
인터넷 브라우저의 url 주소를 입력하는 곳에다 아래와 같이 입력하세요.

view-source: 보고싶은 주소

예를 들어 야후의 소스를 보고 싶다면
view-source:http://kr.yahoo.com 이렇게 치세요.

※ 주의사항 : php, asp와 같은 프로그램 문서의 소스는 볼 수 없습니다.
(html 문서는 100% 볼 수 있어요. 유용하게 사용하세요.)

★ 박음질 한것처럼 귀여운 연파랑 스크롤 바

STYLE> BODY { scrollbar-3dlight-color:#00CCFF; scrollbar-arrow-color:#FFFFFF; scrollbar-track-color:#FFFFFF; scrollbar-darkshadow-color:#00CCFF; scrollbar-face-color:#33CCFF; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:#FFFFFF}
스크롤 상자 씨리즈 ->> 봄의 파릇파릇 연두색^^

<html></span>
<pre>
<span style="font-size:9pt;"> </span></pre>
<pre><span style="font-size:9pt;"> </span></pre>
<span style="font-size:9pt;"><textarea name="스크롤 상자" rows="20" cols="50" style="border-width:1; border-color:rgb(115,228,40); border-style:dotted;">
방금전부터 준비하던~

연두색^_^</textarea></span>

★ 누를수 있는 확인상자

<html></span>
<pre>
<span style="font-size:9pt;"> </span></pre>
<span style="font-size:9pt;">    <input type="checkbox" name="확인상자1">-쓰고싶은말
    <input type="checkbox" name="확인상자1">-쓰고싶은말
    <input type="checkbox" name="확인상자1">-쓰고싶은말
    <input type="checkbox" name="확인상자1">-쓰고싶은말</span><p><span style="font-size:9pt;"> </span></p>