Download presentation
Presentation is loading. Please wait.
1
10 자바스크립트와 레이어로 만드는 DHTML 레이어와 DHTML로 동적인 문서 만들기!
2
이 장에서 다룰 내용 DHTML의 개요 1 레이어의 개념과 특성 2 레이어를 활용한 DHTML 3
3
01_DHTML의 개요 문서 객체 모델 스크립트 언어 스타일시트 레이어
웹 페이지 구성 요소를 처리하기 위하여 내장 객체와 브라우저에 표현 스크립트 언어 스크립트는 명령어만 사용해서 편리하지만 복잡한 응용 프로그램을 만들기 어려움 스타일시트 웹 페이지의 통일감과 일관성을 유지하고 제작시간과 문서의 용량이 줄어듬 레이어 문자, 그림, 테이블을 원하는 위치에 겹치게 함
4
02_레이어 객체 선언Document객체 레이어 객체 선언
레이어 객체는 <div>와 <span> 태그를 사용 레이어 사용 좌표 레이어 사용 형식 <style> #레이어 이름 {position:absolute; : } </style> <div id="레이어 이름"> 텍스트 또는 이미지 </div>
5
02_레이어 객체 선언Document객체 레이어 객체 속성과 메소드 하위 객체 레이어 사용 형식 레이어의 속성과 메소드
document.all.레이어이름.style.속성; document.all[인덱스번호].style.속성 또는 메소드; document.all[레이어이름].style.속성 또는 메소드; 레이어이름.style.속성 또는 메소드;
6
02_레이어 객체 선언Document객체 레이어의 속성과 메소드
7
[기본예제 10-1] 레이어 객체 연습 ① 01 <HTML><HEAD><TITLE>레이어 연습 </TITLE> 02 <STYLE> 03 #myLay1 {position:absolute; left:80; top:100; background-color:#8b0000;width:150;height:150} 05 #myLay2 {position:absolute; left:120; top:120; background-color:#dcdcdc;width:150;height:150} 07 #myLay3 {position:absolute; left:180; top:150; background-color:#dc143c;width:150;height:150} 09 </style> 10 <BODY LEFTMARGIN=30><H3> 배경색이 변화하는 레이어</H3> 11 <DIV id=myLay1>Hello!!</DIV> 12 <DIV id=myLay2>Nice to meet You!!</DIV> 13 <DIV id=myLay3>GoodBye !!</DIV> 14 </BODY></HTML>
![[기본예제 10-1] 레이어 객체 연습 ① 01 <HTML><HEAD><TITLE>레이어 연습 </TITLE> 02 <STYLE> 03 #myLay1 {position:absolute; left:80; top:100;](http://slidesplayer.org/slide/14862753/90/images/7/%5B%EA%B8%B0%EB%B3%B8%EC%98%88%EC%A0%9C+10-1%5D+%EB%A0%88%EC%9D%B4%EC%96%B4+%EA%B0%9D%EC%B2%B4+%EC%97%B0%EC%8A%B5+%E2%91%A0+01+%3CHTML%3E%3CHEAD%3E%3CTITLE%3E%EB%A0%88%EC%9D%B4%EC%96%B4+%EC%97%B0%EC%8A%B5+%3C%2FTITLE%3E+02+%3CSTYLE%3E+03+%23myLay1+%7Bposition%3Aabsolute%3B+left%3A80%3B+top%3A100%3B.jpg "04 background-color:#8b0000;width:150;height:150} 05 #myLay2 {position:absolute; left:120; top:120; 06 background-color:#dcdcdc;width:150;height:150} 07 #myLay3 {position:absolute; left:180; top:150; 08 background-color:#dc143c;width:150;height:150} 09 </style> 10 <BODY LEFTMARGIN=30><H3> 배경색이 변화하는 레이어</H3> 11 <DIV id=myLay1>Hello!!</DIV> 12 <DIV id=myLay2>Nice to meet You!!</DIV> 13 <DIV id=myLay3>GoodBye !!</DIV> 14 </BODY></HTML>")
8
[기본예제 10-2] 레이어 객체 연습 ② 01 <HTML><HEAD><TITLE>레이어 연습 </TITLE> 02 <STYLE> 03 #myLay {position:absolute; left:70; top:100; background-color:blue; width:150;height:150} 04 </STYLE> 05 <SCRIPT LANGUAGE="JavaScript"> 06 <!-- 07 function Lshow() { document.all.myLay.style.visibility="visible" 09 } 10 function Lhide() { myLay.style.visibility="hidden" 12 }//--></SCRIPT> </HEAD> 13 <BODY leftmargin=30> 14 <INPUT type=button value=레이어보기 onClick="Lshow()"> 15 <INPUT type=button value=레이어숨기기 onClick="Lhide()"> 16 <DIV id=myLay></DIV> 17 </BODY></HTML>
![[기본예제 10-2] 레이어 객체 연습 ② 01 <HTML><HEAD><TITLE>레이어 연습 </TITLE> 02 <STYLE>](http://slidesplayer.org/slide/14862753/90/images/8/%5B%EA%B8%B0%EB%B3%B8%EC%98%88%EC%A0%9C+10-2%5D+%EB%A0%88%EC%9D%B4%EC%96%B4+%EA%B0%9D%EC%B2%B4+%EC%97%B0%EC%8A%B5+%E2%91%A1+01+%3CHTML%3E%3CHEAD%3E%3CTITLE%3E%EB%A0%88%EC%9D%B4%EC%96%B4+%EC%97%B0%EC%8A%B5+%3C%2FTITLE%3E+02+%3CSTYLE%3E.jpg "03 #myLay {position:absolute; left:70; top:100; background-color:blue; width:150;height:150} 04 </STYLE> 05 <SCRIPT LANGUAGE= JavaScript > 06 <!-- 07 function Lshow() { 08 document.all.myLay.style.visibility= visible 09 } 10 function Lhide() { 11 myLay.style.visibility= hidden 12 }//--></SCRIPT> </HEAD> 13 <BODY leftmargin=30> 14 <INPUT type=button value=레이어보기 onClick= Lshow() > 15 <INPUT type=button value=레이어숨기기 onClick= Lhide() > 16 <DIV id=myLay></DIV> 17 </BODY></HTML>")
9
[기본예제 10-3] 레이어 객체 연습 ③ 01 <HTML><HEAD><TITLE>레이어 연습</TITLE> 02 <SCRIPT LANGUAGE="javascript"> 03 function R() { var loc=parseInt(document.all["myLay"].style.left); document.all["myLay"].style.left=loc+150; 06 } 07 function L() { var loc=parseInt(document.all["myLay"].style.left); document.all["myLay"].style.left=loc-150; 10 } 11 </SCRIPT></HEAD> 12 <BODY><FORM> 13 <INPUT type=button value="오른쪽으로이동" onClick="R()"> 14 <INPUT type=button value="왼쪽으로이동" onClick="L()"><br> 15 </FORM> 16 <DIV id="myLay" style="position:absolute;top:100px;left:100px; background-color: #ff1493;"> 기본 레이어 영역 </DIV> 17 </BODY></HTML>
![[기본예제 10-3] 레이어 객체 연습 ③ 01 <HTML><HEAD><TITLE>레이어 연습</TITLE> 02 <SCRIPT LANGUAGE= javascript > 03 function R() {](http://slidesplayer.org/slide/14862753/90/images/9/%5B%EA%B8%B0%EB%B3%B8%EC%98%88%EC%A0%9C+10-3%5D+%EB%A0%88%EC%9D%B4%EC%96%B4+%EA%B0%9D%EC%B2%B4+%EC%97%B0%EC%8A%B5+%E2%91%A2+01+%3CHTML%3E%3CHEAD%3E%3CTITLE%3E%EB%A0%88%EC%9D%B4%EC%96%B4+%EC%97%B0%EC%8A%B5%3C%2FTITLE%3E+02+%3CSCRIPT+LANGUAGE%3D+javascript+%3E+03+function+R%28%29+%7B.jpg "04 var loc=parseInt(document.all[ myLay ].style.left); 05 document.all[ myLay ].style.left=loc+150; 06 } 07 function L() { 08 var loc=parseInt(document.all[ myLay ].style.left); 09 document.all[ myLay ].style.left=loc-150; 10 } 11 </SCRIPT></HEAD> 12 <BODY><FORM> 13 <INPUT type=button value= 오른쪽으로이동 onClick= R() > 14 <INPUT type=button value= 왼쪽으로이동 onClick= L() ><br> 15 </FORM> 16 <DIV id= myLay style= position:absolute;top:100px;left:100px; background-color: #ff1493; > 기본 레이어 영역 </DIV> 17 </BODY></HTML>")
10
setTimeout(“mLayer( )”, 100);
[응용예제 10-4] 레이어 객체 연습 ④ 01 <HTML><HEAD><TITLE>레이어 연습</TITLE> 02 <SCRIPT LANGUAGE="javascript"> 03 var right=true; 04 var T; 05 function mLayer() { var loc=parseInt(document.all["myLay"].style.left); if(right == true){ if(loc<200) { document.all["myLay"].style.left=loc+10; T=[ ① ] } else { clearTimeout(T); right=false; T=setTimeout("mLayer()",100); } setTimeout(“mLayer( )”, 100);
11
[응용예제 10-4] 레이어 객체 연습 ④ 16 } else { 17 if(loc>100) {
document.all["myLay"].style.left=loc-10; T=setTimeout("mLayer()",100); } else { [ ② ] right=true; T=setTimeout("mLayer()",100); } 25 } 26 } 27 </SCRIPT></HEAD> 28 <BODY onLoad="mLayer()"> 29 <DIV id=myLay STYLE="position:absolute; top:100px; left:100px; width:100px; height:100px; background-color:#ff6493">자동으로 움직 이는 레이어</div> 30 </BODY></HTML> clearTimeout(T);
![[응용예제 10-4] 레이어 객체 연습 ④ 16 } else { 17 if(loc>100) {](http://slidesplayer.org/slide/14862753/90/images/11/%5B%EC%9D%91%EC%9A%A9%EC%98%88%EC%A0%9C+10-4%5D+%EB%A0%88%EC%9D%B4%EC%96%B4+%EA%B0%9D%EC%B2%B4+%EC%97%B0%EC%8A%B5+%E2%91%A3+16+%7D+else+%7B+17+if%28loc%3E100%29+%7B.jpg "18 document.all[ myLay ].style.left=loc-10; 19 T=setTimeout( mLayer() ,100); 20 } else { 21 [ ② ] 22 right=true; 23 T=setTimeout( mLayer() ,100); 24 } 25 } 26 } 27 </SCRIPT></HEAD> 28 <BODY onLoad= mLayer() > 29 <DIV id=myLay STYLE= position:absolute; top:100px; left:100px; width:100px; height:100px; background-color:#ff6493 >자동으로 움직 이는 레이어</div> 30 </BODY></HTML> clearTimeout(T);")
12
03_레이어를 활용한 DHTML 레이어와 스타일시트 활용 레이어는 고유한 기름으로 구별 레이어 사용 형식
absolute : 레이어의 문서 전체에 대한 절대적 위치 지정 relative : 레이어의 현재 위치를 기준으로 지정 <STYLE> #ID 이름 {position : 속성값(absolute, relative); 위치 속성(left, top) : 속성값(pt, px, in, cm) 크기 속성(width, height) : 속성값(pt, px, in, cm) } </STYLE>
13
[기본예제 10-5] 레이어 객체 응용 연습 ① 01 <HTML><HEAD><TITLE> 절대적 위치와 상대적 위치 </TITLE> 02 <STYLE type="text/css"> 03 #position1 04 {position:absolute;background:yellow;left:100;top:100;width:150;height:150;} 05 #position2 06 {position:relative;background:lightgreen;left:50;top:150;width:150;height:150;} 07 #position3 08 {position:absolute;background:pink;left:200;top:50;width:150;height:150;} 09 #position4 10 {position:relative;background:skyblue;left:150;top:100;width:150;height:150;} 11 </STYLE></HEAD> 12 <BODY><DIV id="position1">absolute 1</div><div id="position2">relative 1 </DIV> 13 <DIV id="position3">absolute 2</div><div id="position4">relative 2</DIV> 14 </BODY></HTML>
![[기본예제 10-5] 레이어 객체 응용 연습 ① 01 <HTML><HEAD><TITLE> 절대적 위치와 상대적 위치 </TITLE> 02 <STYLE type= text/css >](http://slidesplayer.org/slide/14862753/90/images/13/%5B%EA%B8%B0%EB%B3%B8%EC%98%88%EC%A0%9C+10-5%5D+%EB%A0%88%EC%9D%B4%EC%96%B4+%EA%B0%9D%EC%B2%B4+%EC%9D%91%EC%9A%A9+%EC%97%B0%EC%8A%B5+%E2%91%A0+01+%3CHTML%3E%3CHEAD%3E%3CTITLE%3E+%EC%A0%88%EB%8C%80%EC%A0%81+%EC%9C%84%EC%B9%98%EC%99%80+%EC%83%81%EB%8C%80%EC%A0%81+%EC%9C%84%EC%B9%98+%3C%2FTITLE%3E+02+%3CSTYLE+type%3D+text%2Fcss+%3E.jpg "03 #position1. 04 {position:absolute;background:yellow;left:100;top:100;width:150;height:150;} 05 #position2. 06 {position:relative;background:lightgreen;left:50;top:150;width:150;height:150;} 07 #position3. 08 {position:absolute;background:pink;left:200;top:50;width:150;height:150;} 09 #position4. 10 {position:relative;background:skyblue;left:150;top:100;width:150;height:150;} 11 </STYLE></HEAD> 12 <BODY><DIV id= position1 >absolute 1</div><div id= position2 >relative 1 </DIV> 13 <DIV id= position3 >absolute 2</div><div id= position4 >relative 2</DIV> 14 </BODY></HTML>")
14
[응용예제 10-6] 레이어 객체 응용 연습 ② 01 <HTML><HEAD><TITLE>레이어 연습 </TITLE> 02 <STYLE> 03 #layer1 {[ ① ] color:red; left:300;top:150;font-weight:bold;background:pink;} 05 #layer2 {[ ① ] left:150;top:220;color:blue; font-weight:bold; background:pink;} 08 #layer3 {[ ② ] left:550;top:-180;color:red;font-weight:bold;} 10 </STYLE></HEAD> 11 <BODY> 12 <DIV ID="layer1"><p>레이어1 위치</p></DIV> 13 <DIV ID="layer2"><p>레이어2 위치</p></DIV> <img src="map.jpg" border="1"><br> 15 <DIV ID="layer3"><p>레이어3 위치</p></DIV> 16 </BODY></HTML> position:absolute; position:absolute; position:relative;
![[응용예제 10-6] 레이어 객체 응용 연습 ② 01 <HTML><HEAD><TITLE>레이어 연습 </TITLE> 02 <STYLE> 03 #layer1 {[ ① ] color:red;](http://slidesplayer.org/slide/14862753/90/images/14/%5B%EC%9D%91%EC%9A%A9%EC%98%88%EC%A0%9C+10-6%5D+%EB%A0%88%EC%9D%B4%EC%96%B4+%EA%B0%9D%EC%B2%B4+%EC%9D%91%EC%9A%A9+%EC%97%B0%EC%8A%B5+%E2%91%A1+01+%3CHTML%3E%3CHEAD%3E%3CTITLE%3E%EB%A0%88%EC%9D%B4%EC%96%B4+%EC%97%B0%EC%8A%B5+%3C%2FTITLE%3E+02+%3CSTYLE%3E+03+%23layer1+%7B%5B+%E2%91%A0+%5D+color%3Ared%3B.jpg "04 left:300;top:150;font-weight:bold;background:pink;} 05 #layer2 {[ ① ] 06 left:150;top:220;color:blue; font-weight:bold; 07 background:pink;} 08 #layer3 {[ ② ] 09 left:550;top:-180;color:red;font-weight:bold;} 10 </STYLE></HEAD> 11 <BODY> 12 <DIV ID= layer1 ><p>레이어1 위치</p></DIV> 13 <DIV ID= layer2 ><p>레이어2 위치</p></DIV> 14 <img src= map.jpg border= 1 ><br> 15 <DIV ID= layer3 ><p>레이어3 위치</p></DIV> 16 </BODY></HTML> position:absolute; position:absolute; position:relative;")
15
03_레이어를 활용한 DHTML 레이어를 활용한 웹 페이지 작성
자바스크립트를 이용하여 레이어 보기와 감추기와 위치 이동이 가능 레이어 감추고 보이기 형식 (레이어 이름).style.visibility="visible" (레이어 이름).style.visibility="hidden"
16
[기본예제 10-7] 레이어 객체 응용 연습 ③ 01 <HTML><HEAD><TITLE>레이어 연습 </TITLE><STYLE> 02 #layer0 {position:absolute;left:30;top:20;} 03 #layer1 {position:absolute;left:30;top:150;visibility:hidden;} 04 </STYLE> 05 <SCRIPT LANGUAGE="JavaScript"> 06 sw=0 07 function hmap(){ layer1.style.visibility="hidden"; 09 } 10 function smap(){ layer1.style.visibility="visible"; 12 } 13 function cmap(){ if(sw) {hmap();sw=0;} else {smap();sw=1;} 16 } 17 </SCRIPT></HEAD><BODY> 18 <DIV id="layer0"><A HREF="JavaScript:cmap()"> 지도야 나와라~~ </a></DIV> 19 <DIV id="layer1"><IMG SRC="map.jpg" </DIV> 20 </BODY></HTML>
![[기본예제 10-7] 레이어 객체 응용 연습 ③ 01 <HTML><HEAD><TITLE>레이어 연습 </TITLE><STYLE> 02 #layer0 {position:absolute;left:30;top:20;}](http://slidesplayer.org/slide/14862753/90/images/16/%5B%EA%B8%B0%EB%B3%B8%EC%98%88%EC%A0%9C+10-7%5D+%EB%A0%88%EC%9D%B4%EC%96%B4+%EA%B0%9D%EC%B2%B4+%EC%9D%91%EC%9A%A9+%EC%97%B0%EC%8A%B5+%E2%91%A2+01+%3CHTML%3E%3CHEAD%3E%3CTITLE%3E%EB%A0%88%EC%9D%B4%EC%96%B4+%EC%97%B0%EC%8A%B5+%3C%2FTITLE%3E%3CSTYLE%3E+02+%23layer0+%7Bposition%3Aabsolute%3Bleft%3A30%3Btop%3A20%3B%7D.jpg "03 #layer1 {position:absolute;left:30;top:150;visibility:hidden;} 04 </STYLE> 05 <SCRIPT LANGUAGE= JavaScript > 06 sw=0. 07 function hmap(){ 08 layer1.style.visibility= hidden ; 09 } 10 function smap(){ 11 layer1.style.visibility= visible ; 12 } 13 function cmap(){ 14 if(sw) {hmap();sw=0;} 15 else {smap();sw=1;} 16 } 17 </SCRIPT></HEAD><BODY> 18 <DIV id= layer0 ><A HREF= JavaScript:cmap() > 지도야 나와라~~ </a></DIV> 19 <DIV id= layer1 ><IMG SRC= map.jpg </DIV> 20 </BODY></HTML>")
17
[응용예제 10-8] 레이어 객체 응용 연습 ④ 01 <HTML><HEAD><TITLE>레이어 연습</TITLE> 02 <SCRIPT LANGUAGE="javascript"> 03 function mImage(){ mRight(); [ ① ] 06 } 07 var right=true; 08 var k; 09 function mRight() { var loc1=parseInt(document.all["myLay1"].style.left); var loc2=parseInt(document.all["myLay2"].style.left); if(right == true){ if(loc1<300) { document.all["myLay1"].style.left=loc1+10; document.all["myLay2"].style.left=loc1+10; k=setTimeout("mRight()",250); } else { [ ② ] right=false; k=setTimeout("mRight()",250); } } else { if(loc1>100) { document.all["myLay1"].style.left=loc1-10; document.all["myLay2"].style.left=loc1-10; mDown(); clearTimeout(k);
![[응용예제 10-8] 레이어 객체 응용 연습 ④ 01 <HTML><HEAD><TITLE>레이어 연습</TITLE> 02 <SCRIPT LANGUAGE= javascript > 03 function mImage(){](http://slidesplayer.org/slide/14862753/90/images/17/%5B%EC%9D%91%EC%9A%A9%EC%98%88%EC%A0%9C+10-8%5D+%EB%A0%88%EC%9D%B4%EC%96%B4+%EA%B0%9D%EC%B2%B4+%EC%9D%91%EC%9A%A9+%EC%97%B0%EC%8A%B5+%E2%91%A3+01+%3CHTML%3E%3CHEAD%3E%3CTITLE%3E%EB%A0%88%EC%9D%B4%EC%96%B4+%EC%97%B0%EC%8A%B5%3C%2FTITLE%3E+02+%3CSCRIPT+LANGUAGE%3D+javascript+%3E+03+function+mImage%28%29%7B.jpg "04 mRight(); 05 [ ① ] 06 } 07 var right=true; 08 var k; 09 function mRight() { 10 var loc1=parseInt(document.all[ myLay1 ].style.left); 11 var loc2=parseInt(document.all[ myLay2 ].style.left); 12 if(right == true){ 13 if(loc1<300) { 14 document.all[ myLay1 ].style.left=loc1+10; 15 document.all[ myLay2 ].style.left=loc1+10; 16 k=setTimeout( mRight() ,250); 17 } else { 18 [ ② ] 19 right=false; 20 k=setTimeout( mRight() ,250); 21 } 22 } else { 23 if(loc1>100) { 24 document.all[ myLay1 ].style.left=loc1-10; 25 document.all[ myLay2 ].style.left=loc1-10; mDown(); clearTimeout(k);")
18
[응용예제 10-8] 레이어 객체 응용 연습 ④ 26 k=setTimeout("mRight()",250);
} else { clearTimeout(k); right=true; k=setTimeout("mRight()",250); } } 33 } 34 var j; 35 var down=true; 36 function mDown() { var loc3=parseInt(document.all["myLay3"].style.top); var loc4=parseInt(document.all["myLay4"].style.top); var loc5=parseInt(document.all["myLay5"].style.top); var loc6=parseInt(document.all["myLay6"].style.top); var loc7=parseInt(document.all["myLay7"].style.top); var loc8=parseInt(document.all["myLay8"].style.top); if(down == true){ [ ③ ] { document.all["myLay3"].style.top=loc3+5; document.all["myLay4"].style.top=loc4+5; document.all["myLay5"].style.top=loc5+5; document.all["myLay6"].style.top=loc6+5; document.all["myLay7"].style.top=loc7+5; document.all["myLay8"].style.top=loc8+5; if(loc3 < 200)
![[응용예제 10-8] 레이어 객체 응용 연습 ④ 26 k=setTimeout( mRight() ,250);](http://slidesplayer.org/slide/14862753/90/images/18/%5B%EC%9D%91%EC%9A%A9%EC%98%88%EC%A0%9C+10-8%5D+%EB%A0%88%EC%9D%B4%EC%96%B4+%EA%B0%9D%EC%B2%B4+%EC%9D%91%EC%9A%A9+%EC%97%B0%EC%8A%B5+%E2%91%A3+26+k%3DsetTimeout%28+mRight%28%29+%2C250%29%3B.jpg "27 } else { 28 clearTimeout(k); 29 right=true; 30 k=setTimeout( mRight() ,250); 31 } 32 } 33 } 34 var j; 35 var down=true; 36 function mDown() { 37 var loc3=parseInt(document.all[ myLay3 ].style.top); 38 var loc4=parseInt(document.all[ myLay4 ].style.top); 39 var loc5=parseInt(document.all[ myLay5 ].style.top); 40 var loc6=parseInt(document.all[ myLay6 ].style.top); 41 var loc7=parseInt(document.all[ myLay7 ].style.top); 42 var loc8=parseInt(document.all[ myLay8 ].style.top); 43 if(down == true){ 44 [ ③ ] { 45 document.all[ myLay3 ].style.top=loc3+5; 46 document.all[ myLay4 ].style.top=loc4+5; 47 document.all[ myLay5 ].style.top=loc5+5; 48 document.all[ myLay6 ].style.top=loc6+5; 49 document.all[ myLay7 ].style.top=loc7+5; 50 document.all[ myLay8 ].style.top=loc8+5; if(loc3 < 200)")
19
[응용예제 10-8] 레이어 객체 응용 연습 ④ 51 j=setTimeout("mDown()",250); 52 } else {
clearTimeout(j); down=false; j=setTimeout("mDown()",250); } 57 } else { 58 [ ④ ] { document.all["myLay3"].style.top=loc3-10; document.all["myLay4"].style.top=loc4-10; document.all["myLay5"].style.top=loc5-10; document.all["myLay6"].style.top=loc6-10; document.all["myLay7"].style.top=loc7-10; document.all["myLay8"].style.top=loc8-10; j=setTimeout("mDown()",250); } else { [ ⑤ ] down=true; j=setTimeout("mDown()",250); } } 72 } 73 </SCRIPT> </HEAD> 74 <BODY [ ⑥ ]> 75 <div id=myLay1 STYLE="position: absolute ; top: 100px ; left: 100px;“> if(loc3 < 100) clearTimeout(j); onLoad=“mlmage()”
![[응용예제 10-8] 레이어 객체 응용 연습 ④ 51 j=setTimeout( mDown() ,250); 52 } else {](http://slidesplayer.org/slide/14862753/90/images/19/%5B%EC%9D%91%EC%9A%A9%EC%98%88%EC%A0%9C+10-8%5D+%EB%A0%88%EC%9D%B4%EC%96%B4+%EA%B0%9D%EC%B2%B4+%EC%9D%91%EC%9A%A9+%EC%97%B0%EC%8A%B5+%E2%91%A3+51+j%3DsetTimeout%28+mDown%28%29+%2C250%29%3B+52+%7D+else+%7B.jpg "53 clearTimeout(j); 54 down=false; 55 j=setTimeout( mDown() ,250); 56 } 57 } else { 58 [ ④ ] { 59 document.all[ myLay3 ].style.top=loc3-10; 60 document.all[ myLay4 ].style.top=loc4-10; 61 document.all[ myLay5 ].style.top=loc5-10; 62 document.all[ myLay6 ].style.top=loc6-10; 63 document.all[ myLay7 ].style.top=loc7-10; 64 document.all[ myLay8 ].style.top=loc8-10; 65 j=setTimeout( mDown() ,250); 66 } else { 67 [ ⑤ ] 68 down=true; 69 j=setTimeout( mDown() ,250); 70 } 71 } 72 } 73 </SCRIPT> </HEAD> 74 <BODY [ ⑥ ]> 75 <div id=myLay1 STYLE= position: absolute ; top: 100px ; left: 100px; > if(loc3 < 100) clearTimeout(j); onLoad= mlmage()")
20
[응용예제 10-8] 레이어 객체 응용 연습 ④ 76 <img src="disney1.gif"> </div> <!--절대적 위치로서 윗부분 100, 왼쪽 100--> 77 <div id=myLay2 STYLE="position: absolute ; top: 400px ; left: 100px;"> 78 <img src="disney2.gif"> </div> 79 <div id=myLay3 STYLE="position: absolute ; top: 240px ; left: 100px;"> 80 <img src="disney3.gif"> </div> 81 <div id=myLay4 STYLE="position: absolute ; top: 250px ; left: 150px;"> 82 <img src="disney4.gif"> </div> 83 <div id=myLay5 STYLE="position: absolute ; top: 260px ; left: 200px;"> 84 <img src="disney1.gif"> </div> 85 <div id=myLay6 STYLE="position: absolute ; top: 270px ; left: 250px;"> 86 <img src="disney2.gif"></div> 87 <div id=myLay7 STYLE="position: absolute ; top: 280px ; left: 300px;"> 88 <img src="disney3.gif"></div> 89 <div id=myLay8 STYLE="position: absolute ; top: 290px ; left: 350px;"> 90 <img src="disney4.gif"></div> 91 </BODY></HTML>
![[응용예제 10-8] 레이어 객체 응용 연습 ④ 76 <img src= disney1.gif > </div> <!--절대적 위치로서 윗부분 100, 왼쪽 100-->](http://slidesplayer.org/slide/14862753/90/images/20/%5B%EC%9D%91%EC%9A%A9%EC%98%88%EC%A0%9C+10-8%5D+%EB%A0%88%EC%9D%B4%EC%96%B4+%EA%B0%9D%EC%B2%B4+%EC%9D%91%EC%9A%A9+%EC%97%B0%EC%8A%B5+%E2%91%A3+76+%3Cimg+src%3D+disney1.gif+%3E+%3C%2Fdiv%3E+%3C%21--%EC%A0%88%EB%8C%80%EC%A0%81+%EC%9C%84%EC%B9%98%EB%A1%9C%EC%84%9C+%EC%9C%97%EB%B6%80%EB%B6%84+100%2C+%EC%99%BC%EC%AA%BD+100--%3E.jpg "77 <div id=myLay2 STYLE= position: absolute ; top: 400px ; left: 100px; > 78 <img src= disney2.gif > </div> 79 <div id=myLay3 STYLE= position: absolute ; top: 240px ; left: 100px; > 80 <img src= disney3.gif > </div> 81 <div id=myLay4 STYLE= position: absolute ; top: 250px ; left: 150px; > 82 <img src= disney4.gif > </div> 83 <div id=myLay5 STYLE= position: absolute ; top: 260px ; left: 200px; > 84 <img src= disney1.gif > </div> 85 <div id=myLay6 STYLE= position: absolute ; top: 270px ; left: 250px; > 86 <img src= disney2.gif ></div> 87 <div id=myLay7 STYLE= position: absolute ; top: 280px ; left: 300px; > 88 <img src= disney3.gif ></div> 89 <div id=myLay8 STYLE= position: absolute ; top: 290px ; left: 350px; > 90 <img src= disney4.gif ></div> 91 </BODY></HTML>")
21
예제모음_27의 예제설명 및 결과화면 예제설명 실행결과
Select 객체를 이용하여 색상 파레트를 보여주는 페이지를 만들어보자. 부록의 색상표를 참조하여 작성한다. 색의 이름을 나타내는 글자색은 눈에 보이도록 수정한다. 형식은 결과 화면과 같이 작성한다. 실행결과
22
예제모음_27 색상 파레트 만들기 01 <html><head><title>예제모음27</title></head> 02 <body><h3>색상 파레트</h3> 03 <select style> 04 <option>select color 05 <option style="background-color:000000;color:white" value="#000000">black 06 <option style="background-color:708090;color:white" value="#708090">slategray 07 <option style="background-color:fdf5e6" value="#fdf5e6">oldlace 08 <option style="background-color:f0e68c" value="#f0e68c">khaki 09 <option style="background-color:b0c4de" value="#b0c4de">lightsteelblue 10 <option style="background-color:00ffff" value="#00ffff">aqua 11 <option style="background-color:7b68ee;color:white" value="#7b68ee">mediumslateblue 12 <option style="background-color:191970;color:white" value="#191970">midnightblue 13 <option style="background-color:db7093" value="#db7093">palevioletred 14 <option style="background-color:ff4500" value="#ff4500">ornagered 15 <option style="background-color:ffa500" value="#ffa500">orange 16 <option style="background-color:ffff00" value="#ffff00">yellow 17 <option style="background-color:7fff00" value="#7fff00">chartreuse 18 <option style="background-color:00fa9a" value="#00fa9a">mediumspringgreen 19 <option style="background-color:20b2aa" value="#20b2aa">lightseagreen 20 <option style="background-color:66cdaa" value="#66cdaa">mediumaquamarine 21 <option style="background-color:228b22;color:white" value="#228b22">forestgree 22 </select> 23 </body></html>
23
예제모음_28의 예제설명 및 결과화면 예제설명 결과화면
스타일시트와 이벤트를 이용하여 상단 메뉴에 마우스를 올리면 아래 레이어에 설명문이 출력되는 페이지를 만들어보자. 배경 이미지 : fifa.jpg 색상은 사용자 임의로 지정한다. 결과화면
24
예제모음_28 매뉴얼 만들기 01 <HTML><HEAD><TITLE>예제모음28</TITLE> 02 <STYLE type="text/css"> 03 div#menu{position:absolute; left:250; top:60; font-family: 굴림; font-size:18pt } 04 a{color: dd00ff; text-decoration:none} 05 div#exp1{position:absolute; left:50; top:250; width:400px; height:100; padding: 10px; visibility: hidden; z-index:0; font-family:굴림; font-size:11pt; color:78533A } 06 </STYLE></HEAD> 07 <BODY bgcolor=#bcc300> 08 <div id=menu> 09 <a href=# onMouseOver="exp1.style.visibility='visible'" onMouseOut="exp1.style.visibility='hidden' "> 10 축구의 기원</a><br><br></div> 11 <div id=table style="position:absolute; left:50; top:50;z-index:-1"> 12 <table width=400 border=0 cellpadding=0 cellspacing=0> <tr><td><img src="fifa.jpg" width=200 height=162></td></tr></table></div> 14 <div id=exp1><u>축구의 기원</u><br>FIFA(Federation International Football Association)의 유래입니다. 여러지역 혹은 여러나라 축구협회들의 국제적인 동맹 혹은 연방이라는 의미를 보여 줍니다.<br></div> 15 </BODY></HTML>
25
예제모음_29의 예제설명 및 결과화면 예제설명 결과화면
스타일과 마우스 이벤트를 활용하여, 마우스가 올라가거나 내려가면 색상이 변하는 페이지를 만들어보자. 배경색과 테이블은 사용자 임의로 지정한다. 결과화면
26
예제모음_29 테이블 색 변환하기 01 <HTML><HEAD><TITLE>예제모음29</TITLE> 02 <SCRIPT LANGUAGE="JavaScript"> 03 <!-- 04 function changeto(highlightcolor){ 05 source=event.srcElement 06 if (source.tagName=="TR"||source.tagName=="TABLE") return while(source.tagName!="TD") source=source.parentElement if (source.style.backgroundColor!=highlightcolor&&source.id!="ignore") source.style.backgroundColor=highlightcolor 12 } 13 function changeback(originalcolor){ if (event.fromElement.contains(event.toElement)|| source.contains(event.toElement)||source.id=="ignore") return if (event.toElement!=source) source.style.backgroundColor=originalcolor 19 } // 자바스크립트 끝--> </SCRIPT></HEAD>
27
예제모음_29 테이블 색 변환하기 20 <BODY bgColor="#cccccc">
21 <DIV ALIGN="center"> 22 <H3> 원하는 메뉴 위에 마우스를 올려 놓아보셔요.!</H3> 23 <table onMouseover="changeto('#333333')" onMouseout="changeback('#999999')" WIDTH=60% BORDER=0><!-테이블 정의-> <col SPAN=2> <tr><td><font SIZE=3 COLOR="#ccffcc"><b>무료 교육 </b></font></td> <td><font SIZE=3 COLOR="#ccffcc"><b>유료 교육</b></td></tr> <tr><td><font SIZE=2 COLOR="#ffffcc">프로그래밍 언어론 </font></td> <td><font SIZE=2 COLOR="#ffffcc">클라이언트/서버 시스템</font></td></tr> <tr><td><font SIZE=2 COLOR="ffffcc">전자계산기 </font></td> <td><font SIZE=2 COLOR="ffffcc">운영체제</font></td></tr> 31 </TABLE></DIV></BODY></HTML>
28
예제모음_30의 예제설명 및 결과화면 예제설명 결과화면
배열을 이용하여 일정 시간 간격으로 화면의 색상이 변하는 프로그램을 작성해보자. 배경색과 테이블은 결과 화면을 참조하여 작성한다. 결과화면
29
예제모음_30 화면 색 자동 조정하기 01 <HTML><HEAD><TITLE>예제모음30</TITLE> 02 <SCRIPT LANGUAGE="JavaScript"> 03 <!-- 04 var Color= new Array(9); 05 Color[1] = "ff"; 06 Color[2] = "ee"; 07 Color[3] = "dd"; 08 Color[4] = "cc"; 09 Color[5] = "bb"; 10 Color[6] = "aa"; 11 Color[7] = "99"; 12 Color[8] = "88"; 13 Color[9] = "77"; 14 Color[10] = "66"; 15 Color[11] = "55"; 16 Color[12] = "44"; 17 Color[13] = "33"; 18 Color[14] = "22"; 19 Color[15] = "11"; 20 Color[16] = "00";
30
예제모음_30 화면 색 자동 조정하기 21 function fadeIn(where) {
if (where >= 1) { document.bgColor="#" + Color[where] +"0000"; where -= 1; setTimeout("fadeIn("+where+")", 15); } else { setTimeout( ‘fadeOut(1)’, 15); } 30 } 31 function fadeOut(where) { if (where <=16) { document.bgColor="#" + Color[where] +"0000"; where += 1; setTimeout("fadeOut("+where+")", 15) } else { setTimeout("fadeIn(16)", 15); } 40 }// 자바스크립트 끝 --></SCRIPT></HEAD> 41 <BODY onLoad="fadeIn(16)"> 42 <H3><FONT COLOR="white"> 화면을 보세요. 저절로 색이 바뀝니다!!</FONT></H3> 43 </BODY></HTML>
31
요약 DHTML 개요 DHTML 구성 D O M 스타일시트 레 이 어 자바스크립트
HTML로 작성된 문서의 정적인 형식을 극복하기 위한 동적인 CGI나 자바 프로그램이 어려워서 이를 해결하기 위해 제공 DHTML 구성 DOM, 자바스크립트, 스타일시트, 레이어 D O M 웹 페이지 작성이 가능하도록 웹 문서를 객체화 자바스크립트 스크립트 언어를 통하여 객체에 접근하여 내용을 변경 스타일시트 문서의 외형을 지원 레 이 어 화면 안에 다시 작은 화면을 만들어서 작업하는 기능
32
IT CookBook for Beginner, 10장 끝
Thank You ! IT CookBook for Beginner, 10장 끝
Similar presentations
