10 HTML w HTML 4 0 HTML Netscape

  • Slides: 79
Download presentation

10장 동적 HTML w HTML 4. 0 • 최신 HTML 표준 • Netscape Navigator와

10장 동적 HTML w HTML 4. 0 • 최신 HTML 표준 • Netscape Navigator와 Internet Explorer의 서로 다른 동적 HTML에 대한 해법 • 1997년 12월 18일 W 3 C Recommendation http: //www. w 3. org/TR/REC-html 40 -971218 • 1998년 4월 28일 W 3 C Revision http: //www. w 3. org/TR/REC-html 40/ 4

10장 동적 HTML w 태그에 스타일 지정 결과 Internet Explorer에서 읽은 문서 Netscape Navigator에서

10장 동적 HTML w 태그에 스타일 지정 결과 Internet Explorer에서 읽은 문서 Netscape Navigator에서 읽은 문서 22

10장 동적 HTML Internet Explorer의 경계 종류와 모양 36

10장 동적 HTML Internet Explorer의 경계 종류와 모양 36

10장 동적 HTML w 리스트의 불릿 스타일 변경 결과 Netscape Navigator의 경우 Internet Explore의

10장 동적 HTML w 리스트의 불릿 스타일 변경 결과 Netscape Navigator의 경우 Internet Explore의 경우 44

10장 동적 HTML w 레이어 정의의 예 소스코드 <html> <head><title>레이어 정의</title> <style> #place {position:

10장 동적 HTML w 레이어 정의의 예 소스코드 <html> <head><title>레이어 정의</title> <style> #place {position: absolute; left: 40; top: 20; width: 320; background-color: rgb(255, 220); border-color: white; border-width: 1; } </style></head> <body> <div id="place"> <h 3>스위스의 루가노</h 3> <p><img src="images/lugano. jpg" width="160" height="110" ALIGN="left"> 스위스 남부의 조그만 도시로 ………. . </p> </div> </body></html> 50

10장 동적 HTML w 절대적 위치와 상대적 위치 비교 소스코드 <html> <head><title>절대적 위치와 상대적

10장 동적 HTML w 절대적 위치와 상대적 위치 비교 소스코드 <html> <head><title>절대적 위치와 상대적 위치</title> <style> #name 0 { position : absolute; left : 40 px; top: 152 px; } #name 1 { position : absolute; left : 185 px; top: 152 px; } #name 2 { position : relative; left : 178 px; top: -194 px; } </style> </head> <body> <! 절대적 위치 지정 : 문서의 왼쪽 위 점을 기준 (0, 0)으로 > <div id="name 0"><p>스위스 -- </p></div> <div id="name 1"><p>-- 오스트리아 </p></div> <p><img src="images/map. gif" width="250" height="258" alt="유럽지도" border="3"></p> <! 상대적 위치 지정> <div id="name 2"><p>체코 /</p> </div> </body> </html> 52

10장 동적 HTML w 레이어 감추기/보이기 함수 작성 • Netscape Navigator의 경우 function show.

10장 동적 HTML w 레이어 감추기/보이기 함수 작성 • Netscape Navigator의 경우 function show. Layer(layer. ID) { document. layers[layer. ID]. visibility = "show" } function hide. Layer(layer. ID) { document. layers[layer. ID]. visibility = "hide" } • Internet Explorer의 경우 function show. Layer(layer. ID) { document. all[layer. ID]. style. visibility = "visible" } function hide. Layer(layer. ID) { document. all[layer. ID]. style. visibility = "hidden" } 57

10장 동적 HTML • 두 브라우저에서 모두 동작하게 하려면 function show. Layer(layer. ID) {

10장 동적 HTML • 두 브라우저에서 모두 동작하게 하려면 function show. Layer(layer. ID) { if (n) document. layers[layer. ID]. visibility = "show" else if (e) document. all[layer. ID]. style. visibility = "visible" } function hide. Layer(layer. ID) { if (n) document. layers[layer. ID]. visibility = "hide" else if (e) document. all[layer. ID]. style. visibility = "hidden" } 58

10장 동적 HTML w 클릭하면 나타나는 메뉴 소스코드 <html> <head><title> 클릭하면 나타나는 메뉴 </title>

10장 동적 HTML w 클릭하면 나타나는 메뉴 소스코드 <html> <head><title> 클릭하면 나타나는 메뉴 </title> <style> #title {position: absolute; left: 30; top: 30; } /* 메뉴의 제목에 해당하는 레이어 정의 */ #menu { position: absolute; left: 40; top: 110; visibility: hidden } /* 메뉴에 해당하는 레이어 정의 */ </style> <script> n = (document. layers) ? 1: 0 e = (document. all) ? 1: 0 sw=0 // 메뉴가 열려 있으면 1, 닫혀 있으면 0 59

10장 동적 HTML function show. Layer(layer. ID) { // 레이어 보이기 if (n) document.

10장 동적 HTML function show. Layer(layer. ID) { // 레이어 보이기 if (n) document. layers[layer. ID]. visibility = "show" else if (e) document. all[layer. ID]. style. visibility = "visible" } function hide. Layer(layer. ID) { // 레이어 감추기 if (n) document. layers[layer. ID]. visibility = "hide" else if (e) document. all[layer. ID]. style. visibility = "hidden" } function change. Menu(menu. ID) { // sw 값에 따라 메뉴 레이어 감추기/ 보이기 if (sw) { hide. Layer(menu. ID); sw=0; } else { show. Layer(menu. ID); sw=1 } } </script> </head> 60

10장 동적 HTML <body> <div id="title"> <a href="javascript: change. Menu('menu')"> <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src="title. jpg" border="0"></a>

10장 동적 HTML <body> <div id="title"> <a href="javascript: change. Menu('menu')"> <img src="title. jpg" border="0"></a> </div> <div id="menu"> <img src="subtitle. jpg" width="250" height="250"> </div> </body> </html> 61

10장 동적 HTML 10. 4. 3 레이어의 위치 옮기기 w 위치 옮기기 • 레이어의

10장 동적 HTML 10. 4. 3 레이어의 위치 옮기기 w 위치 옮기기 • 레이어의 위치를 지정하는 'left', 'top' 속성값을 변경 w 레이어의 위치 바꾸기 소스코드 <html> <head><title>레이어의 위치 바꾸기 </title> <script> n = (document. layers) ? 1: 0 e = (document. all) ? 1: 0 function init() { if (n) block = document. bus else if (e) block=bus. style } function move 1() { block. left = 110; block. top = 40 } // 다윈 function move 2() { block. left = 35; block. top = 160 } // 퍼스 function move 3() { block. left = 150; block. top = 150 } // 애들레이드 </script></head> 63

10장 동적 HTML <body onload="init()"> <p><img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src="ausm. jpg"></p> <!-- 인라인스타일로 bus 레이어 정의 -->

10장 동적 HTML <body onload="init()"> <p><img src="ausm. jpg"></p> <!-- 인라인스타일로 bus 레이어 정의 --> <div id="bus" style="position: absolute; top: 150; left: 150; > <p><img src="bus. gif"></p> </div> <form> <p><input type="button" value="다윈으로" onclick="move 1(); "> <input type="button" value="퍼스로" onclick="move 2(); "> <input type="button" value="애들레이드로" onclick="move 3(); "> </p> </form> </body> </html> 64

10장 동적 HTML w 팝아웃 메뉴 소스코드 <html> <head><title> Pop Out Menu </title> <style>

10장 동적 HTML w 팝아웃 메뉴 소스코드 <html> <head><title> Pop Out Menu </title> <style> #tab { position: absolute; left: 0; top: 30; } #menu { position: absolute; left: 0; top: 30; width: 263; visibility: hidden; } </style> <script> n = (document. layers) ? 1: 0 e = (document. all) ? 1: 0 sw=0 66

10장 동적 HTML function hide. Menu() { if (n) { document. menu. visibility="hide"; document.

10장 동적 HTML function hide. Menu() { if (n) { document. menu. visibility="hide"; document. tab. left=0; } else if (e) { menu. style. visibility="hidden"; tab. style. left=0; } } function show. Menu() { if (n) { document. menu. visibility="show"; document. tab. left=263; } else if (e) { menu. style. visibility="visible"; tab. style. left=263; } } 67

10장 동적 HTML function change. Menu() { if (sw) { hide. Menu(); sw=0; }

10장 동적 HTML function change. Menu() { if (sw) { hide. Menu(); sw=0; } else { show. Menu(); sw=1 } } </script></head> <body> <div id="tab"> <p><a href="javascript: change. Menu()"> <img src="tab. jpg" width="14" height="328" border="0"> </a></p></div> <div id="menu"> <p><img src="popmenu. jpg" width="263" height="328"> </p></div> </body> </html> 68

10장 동적 HTML w 왼쪽에서 미끄러져 나오는 메뉴 소스코드 <html> <head><title> Slide Menu </title>

10장 동적 HTML w 왼쪽에서 미끄러져 나오는 메뉴 소스코드 <html> <head><title> Slide Menu </title> <style> #tab { position: absolute; left: 0; top: 30; } #menu { position: absolute; left: -263; top: 30; } </style> <script> n = (document. layers) ? 1: 0 e = (document. all) ? 1: 0 sw=0 function init () { if (e) { menu. style. left=-263; } // 초기값 지정 71 tab. style. left=0; }

10장 동적 HTML function slide. In() { if (n) { document. menu. left+=5; document.

10장 동적 HTML function slide. In() { if (n) { document. menu. left+=5; document. tab. left+=5; if (document. tab. left<263) set. Timeout("slide. In()", 15) } else if (e) { menu. style. left = parse. Int(menu. style. left)+5; tab. style. left = parse. Int(tab. style. left)+5; if (parse. Int(tab. style. left)<263) set. Timeout("slide. In()", 15); } } 72

10장 동적 HTML function slide. Out() { if (n) { document. menu. left-=5; document.

10장 동적 HTML function slide. Out() { if (n) { document. menu. left-=5; document. tab. left-=5; if (document. tab. left>0) set. Timeout("slide. Out()", 15) } else if (e) { menu. style. left = parse. Int(menu. style. left)-5; tab. style. left = parse. Int(tab. style. left)-5; if (parse. Int(tab. style. left)>0) set. Timeout("slide. Out()", 15); } } 73

10장 동적 HTML function change. Menu() { if (sw) { slide. Out(); sw=0; }

10장 동적 HTML function change. Menu() { if (sw) { slide. Out(); sw=0; } else { slide. In(); sw=1 } } </script></head> <body> <div id="tab"> <p><a href="javascript: change. Menu()"> <img src="tab. jpg" width="14" height="328" border="0"></a></p></div> <div id="menu"> <p><img src="popmenu. jpg" width="263" height="328"></p></div> </body> </html> 74

10장 동적 HTML 10. 5 Netscape와 Explorer의 동적 HTML 비교 76

10장 동적 HTML 10. 5 Netscape와 Explorer의 동적 HTML 비교 76