10 자바스크립트와 레이어로 만드는 DHTML 레이어와 DHTML로 동적인 문서 만들기!
이 장에서 다룰 내용 DHTML의 개요 1 레이어의 개념과 특성 2 레이어를 활용한 DHTML 3
01_DHTML의 개요 문서 객체 모델 스크립트 언어 스타일시트 레이어 웹 페이지 구성 요소를 처리하기 위하여 내장 객체와 브라우저에 표현 스크립트 언어 스크립트는 명령어만 사용해서 편리하지만 복잡한 응용 프로그램을 만들기 어려움 스타일시트 웹 페이지의 통일감과 일관성을 유지하고 제작시간과 문서의 용량이 줄어듬 레이어 문자, 그림, 테이블을 원하는 위치에 겹치게 함
02_레이어 객체 선언Document객체 레이어 객체 선언 레이어 객체는 <div>와 <span> 태그를 사용 레이어 사용 좌표 레이어 사용 형식 <style> #레이어 이름 {position:absolute;............ : } </style> <div id="레이어 이름"> 텍스트 또는 이미지 </div>
02_레이어 객체 선언Document객체 레이어 객체 속성과 메소드 하위 객체 레이어 사용 형식 레이어의 속성과 메소드 document.all.레이어이름.style.속성; document.all[인덱스번호].style.속성 또는 메소드; document.all[레이어이름].style.속성 또는 메소드; 레이어이름.style.속성 또는 메소드;
02_레이어 객체 선언Document객체 레이어의 속성과 메소드
[기본예제 10-1] 레이어 객체 연습 ① 01 <HTML><HEAD><TITLE>레이어 연습 </TITLE> 02 <STYLE> 03 #myLay1 {position:absolute; left:80; top:100; 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>
[기본예제 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() { 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>
[기본예제 10-3] 레이어 객체 연습 ③ 01 <HTML><HEAD><TITLE>레이어 연습</TITLE> 02 <SCRIPT LANGUAGE="javascript"> 03 function R() { 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>
setTimeout(“mLayer( )”, 100); [응용예제 10-4] 레이어 객체 연습 ④ 01 <HTML><HEAD><TITLE>레이어 연습</TITLE> 02 <SCRIPT LANGUAGE="javascript"> 03 var right=true; 04 var T; 05 function mLayer() { 06 var loc=parseInt(document.all["myLay"].style.left); 07 if(right == true){ 08 if(loc<200) { 09 document.all["myLay"].style.left=loc+10; 10 T=[ ① ] 11 } else { 12 clearTimeout(T); 13 right=false; 14 T=setTimeout("mLayer()",100); 15 } setTimeout(“mLayer( )”, 100);
[응용예제 10-4] 레이어 객체 연습 ④ 16 } else { 17 if(loc>100) { 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);
03_레이어를 활용한 DHTML 레이어와 스타일시트 활용 레이어는 고유한 기름으로 구별 레이어 사용 형식 absolute : 레이어의 문서 전체에 대한 절대적 위치 지정 relative : 레이어의 현재 위치를 기준으로 지정 <STYLE> #ID 이름 {position : 속성값(absolute, relative); 위치 속성(left, top) : 속성값(pt, px, in, cm) 크기 속성(width, height) : 속성값(pt, px, in, cm) } </STYLE>
[기본예제 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-6] 레이어 객체 응용 연습 ② 01 <HTML><HEAD><TITLE>레이어 연습 </TITLE> 02 <STYLE> 03 #layer1 {[ ① ] color:red; 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;
03_레이어를 활용한 DHTML 레이어를 활용한 웹 페이지 작성 자바스크립트를 이용하여 레이어 보기와 감추기와 위치 이동이 가능 레이어 감추고 보이기 형식 (레이어 이름).style.visibility="visible" (레이어 이름).style.visibility="hidden"
[기본예제 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(){ 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>
[응용예제 10-8] 레이어 객체 응용 연습 ④ 01 <HTML><HEAD><TITLE>레이어 연습</TITLE> 02 <SCRIPT LANGUAGE="javascript"> 03 function mImage(){ 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);
[응용예제 10-8] 레이어 객체 응용 연습 ④ 26 k=setTimeout("mRight()",250); 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)
[응용예제 10-8] 레이어 객체 응용 연습 ④ 51 j=setTimeout("mDown()",250); 52 } else { 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()”
[응용예제 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>
예제모음_27의 예제설명 및 결과화면 예제설명 실행결과 Select 객체를 이용하여 색상 파레트를 보여주는 페이지를 만들어보자. 부록의 색상표를 참조하여 작성한다. 색의 이름을 나타내는 글자색은 눈에 보이도록 수정한다. 형식은 결과 화면과 같이 작성한다. 실행결과
예제모음_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>
예제모음_28의 예제설명 및 결과화면 예제설명 결과화면 스타일시트와 이벤트를 이용하여 상단 메뉴에 마우스를 올리면 아래 레이어에 설명문이 출력되는 페이지를 만들어보자. 배경 이미지 : fifa.jpg 색상은 사용자 임의로 지정한다. 결과화면
예제모음_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> 13 <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>
예제모음_29의 예제설명 및 결과화면 예제설명 결과화면 스타일과 마우스 이벤트를 활용하여, 마우스가 올라가거나 내려가면 색상이 변하는 페이지를 만들어보자. 배경색과 테이블은 사용자 임의로 지정한다. 결과화면
예제모음_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") 07 return 08 while(source.tagName!="TD") 09 source=source.parentElement 10 if (source.style.backgroundColor!=highlightcolor&&source.id!="ignore") 11 source.style.backgroundColor=highlightcolor 12 } 13 function changeback(originalcolor){ 14 if (event.fromElement.contains(event.toElement)|| 15 source.contains(event.toElement)||source.id=="ignore") 16 return 17 if (event.toElement!=source) 18 source.style.backgroundColor=originalcolor 19 } // 자바스크립트 끝--> </SCRIPT></HEAD>
예제모음_29 테이블 색 변환하기 20 <BODY bgColor="#cccccc"> 21 <DIV ALIGN="center"> 22 <H3> 원하는 메뉴 위에 마우스를 올려 놓아보셔요.!</H3> 23 <table onMouseover="changeto('#333333')" onMouseout="changeback('#999999')" WIDTH=60% BORDER=0><!-테이블 정의-> 24 <col SPAN=2> 25 <tr><td><font SIZE=3 COLOR="#ccffcc"><b>무료 교육 </b></font></td> 26 <td><font SIZE=3 COLOR="#ccffcc"><b>유료 교육</b></td></tr> 27 <tr><td><font SIZE=2 COLOR="#ffffcc">프로그래밍 언어론 </font></td> 28 <td><font SIZE=2 COLOR="#ffffcc">클라이언트/서버 시스템</font></td></tr> 29 <tr><td><font SIZE=2 COLOR="ffffcc">전자계산기 </font></td> 30 <td><font SIZE=2 COLOR="ffffcc">운영체제</font></td></tr> 31 </TABLE></DIV></BODY></HTML>
예제모음_30의 예제설명 및 결과화면 예제설명 결과화면 배열을 이용하여 일정 시간 간격으로 화면의 색상이 변하는 프로그램을 작성해보자. 배경색과 테이블은 결과 화면을 참조하여 작성한다. 결과화면
예제모음_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 화면 색 자동 조정하기 21 function fadeIn(where) { 22 if (where >= 1) { 23 document.bgColor="#" + Color[where] +"0000"; 24 where -= 1; 25 setTimeout("fadeIn("+where+")", 15); 26 } 27 else { 28 setTimeout( ‘fadeOut(1)’, 15); 29 } 30 } 31 function fadeOut(where) { 32 if (where <=16) { 33 document.bgColor="#" + Color[where] +"0000"; 34 where += 1; 35 setTimeout("fadeOut("+where+")", 15) 36 } 37 else { 38 setTimeout("fadeIn(16)", 15); 39 } 40 }// 자바스크립트 끝 --></SCRIPT></HEAD> 41 <BODY onLoad="fadeIn(16)"> 42 <H3><FONT COLOR="white"> 화면을 보세요. 저절로 색이 바뀝니다!!</FONT></H3> 43 </BODY></HTML>
요약 DHTML 개요 DHTML 구성 D O M 스타일시트 레 이 어 자바스크립트 HTML로 작성된 문서의 정적인 형식을 극복하기 위한 동적인 CGI나 자바 프로그램이 어려워서 이를 해결하기 위해 제공 DHTML 구성 DOM, 자바스크립트, 스타일시트, 레이어 D O M 웹 페이지 작성이 가능하도록 웹 문서를 객체화 자바스크립트 스크립트 언어를 통하여 객체에 접근하여 내용을 변경 스타일시트 문서의 외형을 지원 레 이 어 화면 안에 다시 작은 화면을 만들어서 작업하는 기능
IT CookBook for Beginner, 10장 끝 www.themegallery.com Thank You ! IT CookBook for Beginner, 10장 끝