태그에 관한 유용한 자료 모음

Notice

Recent Posts

Recent Comments

Link

« 2025/02 »
일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28

Tags more

Archives

Today

Total

관리 메뉴

웃음 등대

태그에 관한 유용한 자료 모음 본문

☆ 자료 곳간 ☆/학습 정보

태그에 관한 유용한 자료 모음

웃음관리자 2006. 7. 8. 22:19

♣ 꼭 필요한 HTML 소스 용어와 설명 그리고 예제

1. HTML : 웹 페이지에 이 소스는 HTML이라고 선언을 하는 것이다.
/HTML : HTML의 선언을 끝낸다는 뜻을 가지고 있다.

2. BODY : HTML의 몸 부분에 해당이 되므로 여기에 HTML소스를 적어서 페이지를 꾸미게 된다.
/BODY : HTML의 몸 부분이 끝난다는 뜻을 가지고 있다.

3. HEAD : HTML의 머리부분에 해당이 되므로 여기에 페이지 전체에 사용 될
JAVASCRIPT와 STYLE등을 넣는다. (페이지의 부분에 사용이 되는것은 BODY에 넣는다)
/HEAD : HTML의 머리부분이 끝이난다는 뜻을 가지고 있다.

4. TITLE : 웹 페이지의 이름을 나타내는 부분이다.
이 부분은 좌측 상단의 팝업 아이콘 옆에 글자가 들어간다.
/TITLE : 웹 페이지의 이름을 끝낸다는 뜻을 가지고 있다.

위 소스들의 대표적 사용 예
<HTML>
<BODY>
<HEAD>
<TITLE> 웹 페이지의 이름 </TITLE>
JAVASCRIPT나 STYLE등을 삽입
</HEAD>
HTML 소스로 페이지를 꾸미는 부분
</BODY>
</HTML>

♣ 브라우저에 배경색,배경그림 삽입

1. BACKGROUND : BODY부분에 넣으며 브라우저에 배경 그림을 넣는다.

2. BGCOLOR : BODY부분에 넣으며 브라우저에 배경 색을 넣는다.

사용 예
a. 배경그림 넣기 : <BODY BACKGROUND="이미지 파일">
b. 배경색 넣기 : <BODY BGCOLOR="배경색">

** 웹페이지에서 컬러는를 지정하는 방법은 2가지가 있다.

첫번째는 그냥 원하는 색을 적어주면 된다.
예를들어 빨간색을 적을려면 RED, 파란색은 BLUE, 노란색은 YELLOW 이렇게 적어주면 된다.

두번째는 조합으로 색을 넣을수도 있는데
예를들어 검은색이면 #000000, 흰색이면 #FFFFFF이라고 해주면 된다.

이건 요즘에 컬러표라는게 아주 자세하게 나온게 많이 있다.
그럴 하나쯤 있으면 웹 페이지 제작에 많은 도움이 된다.

♣ 중간 배치, 줄 바꾸기, SPACE BAR효과, 브라우저에서 <과 >나타내기

1. CENTER : 브라우저의 가장 중간으로 옮기는 소스이다.
/CENTER : "더이상 중간으로 보낼게 없어요"라는 뜻으로 해석하면 쉽다.

2. BR : 브라우저에서 바로 밑줄로 줄을 바꾸어주는 역활을 한다.
P : 위 BR과 똑같지만 이건 중간에 빈공간이 생긴다.

3. &NBSP; : 브라우저에서 SPACE BAR의 효과를 나타낸다. (꼭 소문자로)

4. < 그냥 <를 하면 브라우저에서 소스로 읽기 때문에 브라우저상에서는
<이 나타나지 않음으로 브라우저에서 <를 나타내는 용어이다
> 위 설명과 반대인 >를 나타낸다.

위 소스들의 대표적 사용 예
a. 소스 : <CENTER> TEXT </CENTER>
출력 : TEXT <← 브라우저의 중간)

b. 소스 : 글자<BR> 자글
출력 : 글자
자글
BR대신 P를 넣었을때 출력 : 글자

자글

c. 소스 : 글자&NBSP;자글
출력 : 글자 자글

d. 소스 : <하하하
출력 : <하하하
<대신 >를 했을때 : >하하하

♣ TEXT 크기, 색, 체 바꾸기

1. FONT : TEXT라는 선언을 한다
/FONT : 끝맺음

2. SIZE : TEXT의 크기

3. COLOR : TEXT의 색

4. FACE : 얼굴이라는 뜻으로 TEXT의 얼굴 즉 글자체이다.

5. B : TEXT를 굵게한다
/B : 끝맺음

6. U : TEXT에 밑줄이 그려진다.
/U : 끝맺음

7. I : TEXT를 이탤릭체로 바꾼다.
/I : 끝맺음

소스의 대표적 사용 예
a. 소스 : <FONT SIZE="5" COLOR="RED" FACE="굴림체"> 글자 </FONT>
출력 : TEXT의 크기가 5이며 색은 RED, 체는 굴림체

b. 소스 : <B>글자</B>
출력 : 글자 (← 글자가 굵다)
* B대신에 U나 I를 넣어주면 사용이 가능하며
FONT라고 선언을 하지 않고 아무데서나 사용할 수 있다.

♣ 움직이는 태그

<marquee direction = up behavior = alternate height = 30>왔다리 갔다리</marquee>
왔다리 갔다리

<marquee width = 300 scrollamount = 200>왔다리 갔다리</marquee>
왔다리 갔다리

<marquee>평범한 marquee</marquee>
평범한 marquee

(<marquee behavior = alternate width = 20>''</marquee>)
( '')

배경색
<marquee bgcolor = 색코드>
사이즈
<marquee width = 숫자 height = 숫자>
움직이는 방향
<marquee direction = 방향(up,down,left,right)">
움직임
<marquee behavior = scroll,slide,alternate"움직임 지정">
움직이는 횟수
<marquee loop = 숫자>
움직이는 거리의 간격
<marquee scrollamount = 숫자>
움직이는 시간의 간격
<marquee scrolldelay = 숫자>
주변의 여백
<marquee hspace = 숫자 vspace = 숫자>

♣ FORM

1. FORM : 폼의 선언이다.
/FORM : 끝맺음

2. ACTION : 폼의 뒷부분에 들어가는데 이건 SUBMIT를 받았을때
이동될 경로를 적는곳 이다.

3. INPUT : 이 영단어(입력)의 뜻과 같은 뜻이다.

4. TYPE : INPUT을 어떤 형태로 사용할건지 선택하는 부분이다.
▶BUTTON : 보통의 버튼 사용시는 [안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-ONCLICK를 이용
▶SUBMIT : 위 FORM의 ACTION으로 너겨주는 버튼
▶RESET : 폼의 모든 내용을 초기화
▶RADIO : 동그란 박스에 까만 점이 있는 것.
▶CHECKBOX : 네모난 박스에 마우스로 클릭하면 V표가 나타나는 것.
▶TEXT : 글을 적는 박스를 만든다.
▶HIDDEN : 브라우저상에는 보여지지 않는 글박스를 만든다.
▶FILE : 파일을 찾을 수 있게 해준다.
▶PASSWORD : 비밀번호를 입력하는 폼이다.

5. VALUE : INPUT에 내용을 넣을 수 있다.

6. SIZE : INPUT의 크기를 저정한다.

예제
a. BUTTON에 HaHaHa라는 글을 넣을때 (<FORM> </FORM>은 생략)
<INPUT TYPE="BUTTON" VALUE="HaHaHa">

b. HaHaHa라는 BUTTON을 누르면 "하하하"라는 경고 박스를 띄울때
<INPUT TYPE="BUTTON" VALUE="HaHaHa" [안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-ONCLICK="ALERT('하하하')">

** ALERT라는 단어는 적을때 꼭 소문자로 해야한다.

** 폼은 STYLE로 여러가지를 바꿀수가 있다.
예를들어 글자체, 색, 크기, INPUT의 색까지 바꿀수 있다.

♣ TEXTAREA

1. TEXTAREA : 텍스트 영역이다.
/TEXTAREA : 끝맺음

2. COLS : 가로 크기

3. ROWS : 세로 크기

예제
가로 세로 크기가 30인 textarea만들기
<textarea cols="30" rows="30">내용

♣ 프레임 셋 (FRAMESET)

** 프레임 셋은 간단히 말해서 브라우저 나누기다.
이건 이해하기에 따라서 쉽고 어렵고로 갈라진다.

물론 처음엔 어려울수도 있다. 하지만 예제 소스를 복사하여
사용하다보면 자연스레 이해가 될것이다.

1. FRAMESET : 프레임 셋 선언이다.
/FRAMESET : 끝맺음

2. COLS : 프레임(브라우저)을 세로로 나눈다

3. ROWS : 프레임(브라우저)을 가로로 나눈다
** 프레임의 크기를 정해주는 방법은 2가지가 있다.

한가지는 %로 주는 방법이 있다.
사용법은 브라우저를 100%로 보고 나누어주면 된다.
만약 왼쪽을 25%로 오른쪽을 75%로 나누고 싶으면
COLS="25%,75%" 이렇게 해주면 된다.
물론 오른쪽을 또 위아래로 나누고 싶으면 오른쪽 프레임을
100%로 보고 나누어주면 된다.
그러나 단점은 브라우저를 최소화하면 작아진 브라우저의 크기대로 프레임이
줄어든다는 단점이 있다.

또 한가지 방법은 숫자와 *로 주눈 방법이 있다.
사용법은 프레임을 왼쪽, 오른쪽으로 나눌때 왼쪽 프레임 크기,*해주면 된다.
그러니 COLS="70,*"이렇게 해주면 된다.
그러면 왼쪽에는 70크기의 프레임이 있고 오른쪽에는 그 나머지가 있다는 거다.
이 프레임 나누는 방법은 단점이 없는거 같고 장점이 있다.
장점은 브라우저를 최소화 하면 숫자로 지정된 프레임의 크기는 그대로 있다는거다.
즉 최소화 하게되면 *로 지정해준 부분만 브라누저 크기에 따라서 작아진다는거다.

4. BORDER : 프레임을 나누면 중간에 선이 하나 생기는데 이 선의 두께를 지정한다.

5. FRAME : 프레임이라고 선언한다. 끝맺음은 없다.

6. SRC : 프레임의 경로를 적어주는 곳이다.

7. NAME : 프레임 이름이다 중요한 부분으로 링크시 타겟에 사용된다.

사용 예 (복사하여 사용해도 무방)
a. 브라우저를 왼쪽, 오른쪽으로 나눈다. (% 사용)
<HTML>
<HEAD>
<TITLE> FRAMESET EX.1 </TITLE>
</HEAD>
<FRAMESET COLS="25%,75%" BORDER="0">
<FRAME SRC="왼쪽 프레임" NAME=" ">
<FRAME SRC="오른쪽 프레임" NAME=" ">
</FRAMESET>
</HTML>

b. 브라우저를 위, 아래로 나눈다. (숫자 사용)
<HTML>
<HEAD>
<TITLE> FRAMESET EX.2 </TITLE>
</HEAD>
<FRAMESET ROWS="100,*" BORDER="0">
<FRAME SRC="왼쪽 프레임" NAME=" ">
<FRAME SRC="오른쪽 프레임" NAME=" ">
</FRAMESET>
</HTML>

c. 브라우저를 왼쪽, 오른쪽으로 나누는데
오른쪽 부분에 다시 프레임을 위, 아래로 나눈다. (% 사용)
<HTML>
<HEAD>
<TITLE> FRAMESET EX.3 </TITLE>
</HEAD>
<FRAMESET COLS="25%,75%" BORDER="0">
<FRAME SRC="왼쪽 프레임" NAME=" ">
<FRAMESET ROWS="10%,90%" BORDER="0">
<FRAME SRC="위쪽 프레임" NAME=" ">
<FRAME SRC="아래쪽 프레임" NAME=" ">
</FRAMESET>
</HTML>

d. 브라우저를 위, 아래로 나누는데
아래쪽 부분에 다시 왼쪽, 오른쪽으로 나눈다. (숫자 사용)
<HTML>
<HEAD>
<TITLE> FRAMESET EX.4 </TITLE>
</HEAD>
<FRAMESET ROWS="110,*" BORDER="0">
<FRAME SRC="위쪽 프레임" NAME=" ">
<FRAMESET COLS="50,*" BORDER="0">
<FRAME SRC="왼쪽 프레임" NAME=" ">
<FRAME SRC="오른쪽 프레임" NAME=" ">
</FRAMESET>
</HTML>

▶ 위에 NAME이라는게 보일것이다.
그건 프레임을 나누었을경우 링크할때 꼭 필요한 부분이다.

a에 예를들어 왼쪽(NAME="LEFT") 프레임에서 링크를 눌렀는데
오른쪽(NAME="RIGHT") 프레임으로 그 링크가 열리게 할때 NAME을 사용한다.
사용하는 방법은 링크할때 TARGET="RIGHT"해주면 된다.
물론 NAME는 마음대로 지정해줘도 상관없다.

▶ 프레임을 나눴는데 어쩌다가 프레임을 무시하고 링크를 열고 싶을때는
타겟을 _TOP으로 해주면 프레임을 무시하고 링크가 열린다.

▶ 프레임을 사용할려면 나눈 프레임 만큼의 HTM(HTML)파일이 필요하다.
예를들어 a부분을 설명하면 프레임 소스가 들어가는 파일,
왼쪽 부분의 파일 그리고 오른쪽 부분의 파일 이렇게 3개가 사용된다.

▶ 주의사항 : FRAMESET소스가 있는 파일에서는 절대로 BODY가 들어가면 안된다.
이유는 모르지만 들어가게되면 프레임이 나누어지지 않는다.

** 조금만 응용하면 프레임을 자유자재로 나눌수가 있을것이다.
단 프레임은 가로, 세로만 나누어지지만 대각선으로는 절대로 나누어지지 않는다.

♣ HR 선긋기

1. HR : 가로로 선을 그어준다

2. COLOR : 선에 색을 넣어준다.

3. SIZE : 선의 세로 크기를 정한다.

4. WIDTH : 선의 가로 크기를 정한다.

예제
a. 파란색의 선에 가로 크기가 50 세로 크기가 10인 선
<HR COLOR="BLUE" WIDTH="50" SIZE="10">

♣ 플래시 & 동영상 삽입 (EMBED)

1. EMBED : 플래시 삽입이라고 선언한다.
/EMBED : 끝맺음

2. SRC : 플래시(동영상) 경로

3. WIDTH : 플래시(동영상) 가로 크기

4. HEIGHT : 플래시(동영상) 세로 크기

예제
a. 가로, 세로 200인 MOVIE.SWF파일을 열때
(파일은 같은 디렉토리 안에 있다고 함)
<EMBED SRC="http://xxxxxxxx.xxxxxx.xxxxxxMOVIE.SWF" WIDTH="200" HEIGHT="200"></EMBED>

** EMBED로 실행되는 것들은 플래시 외 여러가지가 있다.

예를들어서 MID(WAV)이다.
이걸 EMBED로 실행시키면 EMBED가 위치한 부분에
플레이 버튼과 일시정지 버튼이 생겨난다.

♣ 표(TABLE) 그리기

1. TABLE : 표를 그린다는 선언을 한다.
/TABLE : 끝맺음

2. BORDER : 표의 테두리 두께이다.

3. BORDERCOLOR : 테두리의 색을 지정한다.

4. CELLSPACING : 테두리의 그림자를 설정한다.

5. CELLPADDING : 테두리와 글자의 간격을 설정한다.
** 자주 사용되는 소스가 아니므로 잘 모름.. ^^;;

6. TR : (쉽게 말해서) 테이블을 그릴때 가로로 긋는다고 생각하기 바람..
/TR : 끝맺음

7. TD : (쉽게 말해서) 테이블을 그릴때 세로로 긋는다고 생각하기 바람..
/TD : 끝맺음

8. WIDTH : 테이블의 가로크기

9. HEIGHT : 테이블의 세로크기

10. BGCOLOR : 배경 색 지정

11. BACKGROUND : 배경 그림 지정

사용 예제
a. 가로, 세로크기가 100이며 테두리 두께는 2 태두리 색은 파랑색으로 정사각형 그리기
<TABLE BORDER="2" BORDERCOLOR="BLUE">
<TR>
<TD WIDTH="100" HEIGHT="100">1</TD>
</TR>
</TABLE>

b. 가로, 세로크기가 50이며 테두리 두께는 2 그림자 없는 창문 모양 그리기
<TABLE BORDER="2" CELLSPACING="0">
<TR>
<TD WIDTH="50" HEIGHT="50">1</TD>
<TD WIDTH="50" HEIGHT="50">2</TD>
</TR>
<TR>
<TD WIDTH="50" HEIGHT="50">3</TD>
<TD WIDTH="50" HEIGHT="50">4</TD>
</TR>
</TABLE>

♣ 하이퍼 링크 (Hyper Link)

A : 쉽게 링크 선언이라고 보면 된다.
/A : 끝맺음

HREF : 링크시 이동될 주소를 적는 곳

TITLE : 위의 이미지 삽입에서 ALT와 같은 효과를 나타낸다.
절대로 <TITLE> </TITLE>와는 같은게 아니다.

TARGET : 열리는 위치를 선택한다.
기본적으로 이 2가지가 널리 사용된다.
_TOP : 지금의 브라우저로 열림
_BLANK : 새로운 윈도우 사용

사용 예
소스 : <A HREF="HTTP://HOMSTAR.INFOMASTER.CO.KR" TITLE="HYPER LINK" TARGET="_BLANK">
눌러지는 부분 </A>
출력 : 눌러지는 부분 (← 밑줄이 그인 파란색글에 마우스를 올리면 HYPER LINK라는
도움말이 뜨고 눌렀을때는 새창으로 HOMSTAR.INFOMASTER.CO.KR이 열린다.)

** 링크시 그어지는 밑즐이 보기 지저분할때가 있는데
스타일시트를 이용하여 그 밑줄을 지우는 방법이 있다.
이게 링크 밑줄 지우는 소스이다.
소스 :
<style>

</style>

▶ 글자 크기를 바꾸어서 링크를 하거나 이미지로 링크 하는 방법
a. 소스 : <링크 소스><FONT SIZE="3" COLOR="GREEN" FACE="굴림체">눌러지는 부분
</FONT></A>
출력 : 글자 크기 3이며 색은 초록색 체는 굴림체로 링크가 되었다.

b. 소스 : <링스소스><IMG SRC="XXX.GIF(JPG)></A>
출력 : XXX.GIF라는 이미지로 링크가 되었다.

** 이미지 링크를 하면 두꺼운 파란색 테두리가 생기는데
IMG SRC부분에 BORDER="0"으로 해주면 테두리가 지워진다

♣ IMAGE 삽입

IMG : 이미지라고 선언을 해준다.
이건 /를 이용해 끝맺음을 해주지 않아도 된다.

SRC : 이미지의 경로(주소)를 적는곳이다.

WIDTH : 이미지의 가로크기를 지정한다.

HEIGHT : 이미지의 세로크기를 지정한다.
** WIDTH와 HEIGHT는 꼭 필요 없지만 이미지가 너무 크거나 작을시에
이 용어를 사용해서 늘리거나 줄일 수 있다.
그러나 이걸 사용하여 너무 늘리거나 줄이면 그 만큼의 이미지
로딩시간이 길어진다.

ALT : 이미지위에 마우스르 올리면 풍선형 글틀이 나와서
적은 TEXT를 나타내 준다. (FONT 선언 안됨)

BORDER : 이미의 테두리이다.
그냥 이미지에서 BORDER="1"을 해주면 이미지에 아주 얇은
검은색 테두리가 그어진다.

대표적인 사용 예
소스 : <IMG SRC="XXX.GIF(JPG)" WIDTH="50" HEIGHT="50" ALT="IMAGE" BORDER="1">
출력 : 이미지 파일을 가로,세로크기 50에 IMAGE라는 풍선형 도움말
그리고 검은색 얇은 테두리
** 이미자 삽입은 그냥 <IMG SRC="XXX.GIF(JPG)">이렇게 해도 상관 없음

♣ 오른쪽 마우스 사용금지

♣ 자바스크립트 소스 감추기

자바스크립트나 스타일시트를 파일로

자바스크립트나 스타일시트를 각 파일마다 일일히 입력하기 귀찮으시죠? ^^
자바스크립트나 스타일시트 소스만 입력한후 자바스크립트인 경우 확장자를
js로 스타일 시트인 경우 css로 저장하신후 다음과 같은 방법으로 링크시키면 됩니다.
<script language="JavaScript" src="jworld.js"></script>
<link rel = StyleSheet HREF='jworld.css' type='text/css' title='jworld CSS'>
이것을 사용하면 정말 간편합니다.
똑같은 소스를 일일히 붙여 넣는것 보단 좋습니다 ^^ 용량면에서도 ^^

♣ 이미지에 마우스 올리면 창 띄우기

♣ 가위 바위 보 게임 소스

<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM>
<SCRIPT LANGUAGE="JavaScript">
// 전역변수
var Players_Choice;
var Computers_Choice;

//이미지 미리 읽어들이기
var imageArray = new Array(3);
for (var i=0 ; i<3 ; i++)
imageArray[i] = new Image();
imageArray[0].src="http://my.netian.com/~jeri5/javascript_rock.gif";
imageArray[1].src="http://my.netian.com/~jeri5/javascript_scissors.gif";
imageArray[2].src="http://my.netian.com/~jeri5/javascript_paper.gif";

function playGame(Choice) {

//사용자의 선택
Players_Choice=Choice;

// 사용자의 선택 이미지 변경
document.user_image.src = imageArray[Players_Choice-1].src;

//컴퓨터 선택 변경
intervalID1 = setInterval('SwitchImage();',100);
setTimeout('results(intervalID1);',700);
}

function SwitchImage(){
Computers_Choice=(Math.round(Math.random()*2)+1);
document.comp_image.src = imageArray[Computers_Choice-1].src;
}

function results(intervalID1) {

//먼저, 애니메이션 중지
clearInterval(intervalID1);

//사용자 승리
if ( (Players_Choice == 1 && Computers_Choice == 2) ||
(Players_Choice == 2 && Computers_Choice == 3) ||
(Players_Choice == 3 && Computers_Choice == 1)){
win.value++;
alert ('이겼습니다!!'); }

// 무승부
else if ( Players_Choice == Computers_Choice ){
tie.value++;
alert ('비겼습니다!!'); }

// 사용자 패배
else {
loss.value++;
alert ('패하셨습니다!!'); }
}

function clear_score() {

// 스코어 리셋
loss.value=0
win.value=0
tie.value=0
}
// End -->
</script>
</form>

<h4>가위, 바위, 보 게임</h4>
<p><font size="2">아래 이미지 중 가위, 바위, 보에 대한 이미지를 선택하세요!<br>
바위는 가위를 이기고, 가위는 보를 이기고, 보는 바위를 이깁니다!</font></p>

<font size="2"><a href="javascripｔ:;" [안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-onClick=playGame(1);><img border=0

src="http://my.netian.com/~jeri5/javascript_rock.gif" alt="Rock"></a>
<a href="javascripｔ:;" [안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-onClick=playGame(2);><img border=0

src="http://my.netian.com/~jeri5/javascript_scissors.gif" alt="Scissors"></a>
<a href="javascripｔ:;" [안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-onClick=playGame(3);><img border=0

src="http://my.netian.com/~jeri5/javascript_paper.gif" alt="Paper"></a><br>
바위 || 가위 || 보
</font><p><font size="2"><img border=0 NAME="user_image" src="http://my.netian.com/~jeri5/javascript_rock.gif" >
<img border=0 NAME="comp_image" src="http://my.netian.com/~jeri5/javascript_paper.gif" ><br>
당신의 손 || 컴퓨터의 손 </font></p>

<p>
<font size="2"><INPUT TYPE="text" SIZE=2 MAXLENGTH=3 NAME="win" WIN.VALUE="0"> 승
<INPUT TYPE="text" SIZE=2 MAXLENGTH=3 NAME="loss" LOSS.VALUE="0"> 패
<INPUT TYPE="text" SIZE=2 MAXLENGTH=3 NAME="tie" TIE.VALUE="0"> 무
</font></p>
<p> <font size="2"><input type=button value="Clear Score" [안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-onClick="clear_score()"></font></p>
</font>

</BODY>
</HTML>

♣ 주소창 입력으로 소스 보기

소스보는 방법

주소 입력창에 다음과 같은 글을 입력해보세요 ^^
view-source:http://sun.interpia98.net/~rlawnsgh
자바스크립트로 되어 있는 경우 Shift+F10키나 키보드의 오른쪽 Ctrl왼쪽버튼
음. 그런다구 너무 베껴쓰진 맙시다 ^^

♣ 윈도우 브라우저 흔들기 소스

<head>

<script language="JavaScript">

</script>
</head>
<body bgcolor="#f5f5f5"
text="#009999"
link="#0066cc"
vlink="#0066cc"
alink="#0099ff"
[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-onClick="shake(5)">
<p align="center">
<font face="굴림">
브라우저 화면 흔들기
</font>
<P align="center">
<form>
<input type=button value="지진경고">
</form>

</font>
</body>

♣ 병아리 내려오는 소스

♣ 아나로그 시계 소스

<SCRIPT LANGUAGE="JavaScript">


</script>
<style>
..num {color:white;width:30px;text-align:center; }
</style>
</HEAD>

<body bgcolor=#000000 [안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-onLoad="javascripｔ:startClock();">

<div id="c0" style="width:200px; height:200px; position:absolute; left:36px; top:36px; z-index:2;">
<table>
<tr>
<td bgcolor=000000 width=120 height=120>
</td>
</tr>
</table>
</div>
<div id="c1" class="num" style="font-size:11px; width:200px; height:200px; position:absolute; left:20px; top:-20px; z-index:5;"><b>1</b></div>
<div id="c2" class="num" style="font-size:11px; width:200px; height:200px; position:absolute; left:20px; top:-20px; z-index:5;"><b>2</b></div>
<div id="c3" class="num" style="font-size:11px; width:200px; height:200px; position:absolute; left:20px; top:-20px; z-index:5;"><b>3</b></div>
<div id="c4" class="num" style="font-size:11px; width:200px; height:200px; position:absolute; left:20px; top:-20px; z-index:5;"><b>4</b></div>
<div id="c5" class="num" style="font-size:11px; width:200px; height:200px; position:absolute; left:20px; top:-20px; z-index:5;"><b>5</b></div>
<div id="c6" class="num" style="font-size:11px; width:200px; height:200px; position:absolute; left:20px; top:-20px; z-index:5;"><b>6</b></div>
<div id="c7" class="num" style="font-size:11px; width:200px; height:200px; position:absolute; left:20px; top:-20px; z-index:5;"><b>7</b></div>
<div id="c8" class="num" style="font-size:11px; width:200px; height:200px; position:absolute; left:20px; top:-20px; z-index:5;"><b>8</b></div>
<div id="c9" class="num" style="font-size:11px; width:200px; height:200px; position:absolute; left:20px; top:-20px; z-index:5;"><b>9</b></div>
<div id="c10" class="num" style="font-size:11px; width:200px; height:200px; position:absolute; left:20px; top:-20px; z-index:5;"><b>10</b></div>
<div id="c11" class="num" style="font-size:11px; width:200px; height:200px; position:absolute; left:20px; top:-20px; z-index:5;"><b>11</b></div>
<div id="c12" class="num" style="font-size:11px; width:200px; height:200px; position:absolute; left:20px; top:-20px; z-index:5;"><b>12</b></div>

<div id="ob0" class="num" style="width:200px; height:200px; position:absolute; left:-20px; top:-20px; z-index:1;">
<p> </p>
</div>
<div id="ob1" class="num" style="width:200px; height:200px; position:absolute; left:-20px; top:-20px; z-index:8;">
<font size="+3" color="#0000ff"><b>.</b></font></div>
<div id="ob2" class="num" style="width:200px; height:200px; position:absolute; left:-20px; top:-20px; z-index:8;">
<font size="+3" color="#0000ff"><b>.</b></font></div>
<div id="ob3" class="num" style="width:200px; height:200px; position:absolute; left:-20px; top:-20px; z-index:8;">
<font size="+3" color="#0000ff"><b>.</b></font></div>
<div id="ob4" class="num" style="width:200px; height:200px; position:absolute; left:-20px; top:-20px; z-index:8;">
<font size="+3" color="#0000ff"><b>.</b></font></div>
<div id="ob5" class="num" style="width:200px; height:200px; position:absolute; left:-20px; top:-20px; z-index:8;">
<font size="+3" color="#0000ff"><b>.</b></font></div>
<div id="ob6" class="num" style="width:200px; height:200px; position:absolute; left:-20px; top:-20px; z-index:7;">
<font size="+3" color="#00ffff"><b>.</b></font></div>
<div id="ob7" class="num" style="width:200px; height:200px; position:absolute; left:-20px; top:-20px; z-index:7;">
<font size="+3" color="#00ffff"><b>.</b></font></div>
<div id="ob8" class="num" style="width:200px; height:200px; position:absolute; left:-20px; top:-20px; z-index:7;">
<font size="+3" color="#00ffff"><b>.</b></font></div>
<div id="ob9" class="num" style="width:200px; height:200px; position:absolute; left:-20px; top:-20px; z-index:7;">
<font size="+3" color="#00ffff"><b>.</b></font></div>
<div id="ob10" class="num" style="width:200px; height:200px; position:absolute; left:-20px; top:-20px; z-index:6;">
<font size="+3" color="#ffff00"><b>.</b></font></div>
<div id="ob11" class="num" style="width:200px; height:200px; position:absolute; left:-20px; top:-20px; z-index:6;">
<font size="+3" color="#ffff00"><b>.</b></font></div>
<div id="ob12" class="num" style="width:200px; height:200px; position:absolute; left:-20px; top:-20px; z-index:6;">
<font size="+3" color="#ffff00"><b>.</b></font></div>
<center></body></html>

♣ 상태방에 뜨는 한 줄 메세지

'☆ 자료 곳간 ☆ > 학습 정보' 카테고리의 다른 글

이쁜 글씨체나 태그 활용법 (0)	2006.11.04
표 만들기 강좌 (0)	2006.09.16
글자에 관련된 테크닉 모음 (0)	2006.08.11
포토샵 초보자 강좌 (0)	2006.08.11
컴퓨터 도사 되기 100가지 조언 (0)	2006.08.11

'☆ 자료 곳간 ☆/학습 정보' Related Articles

웃음 등대

태그에 관한 유용한 자료 모음 본문

태그에 관한 유용한 자료 모음

'☆ 자료 곳간 ☆ > 학습 정보' 카테고리의 다른 글

티스토리툴바