10장 동적 HTML (Dynamic HTML)
10.1 동적 HTML의 개요 10.1.1 동적 HTML의 특징과 기능 기존의 HTML 정적 동적인 기능을 추가하기 위해 자바 애플릿, CGI 등을 사용 자바 애플릿 자바 프로그래밍을 익혀야 하며, 애플릿이 실행되기까지의 시간도 오래 걸림. CGI 데이터베이스의 내용을 사용자의 요구에 따라 HTML 문서로 만들어 보여 주는 것. 입력을 서버에서 처리하므로 서버에 부담. 새로운 HTML 문서를 구성하는 데에 시간이 걸림. 웹 페이지의 구성 요소를 자유롭게 배치할 수 없음. 2
동적 HTML 기존 HTML의 단점을 개선해 동적인 웹 페이지를 만들 수 있도록 하기 위한 것 영어로 Dynamic HTML, 또는 약자로 DHTML HTML문서 자체의 기능이므로 브라우저에서 실행되어 서버의 부담이 적고, 이벤트에 대한 즉각적 반응이 가능 웹 페이지의 구성 요소의 위치를 자유롭게 지정. 자바 애플릿이나 CGI보다 구현이 쉬움. Netscape Navigator와 Internet Explorer에서 서로 지원하는 방식이 달라 호환이 잘 되지 않는 것이 단점 3
HTML 4.0 최신 HTML 표준 Netscape Navigator와 Internet Explorer의 서로 다른 동적 HTML에 대한 해법 1997년 12월 18일 W3C Recommendation http://www.w3.org/TR/REC-html40-971218 1998년 4월 28일 W3C Revision http://www.w3.org/TR/REC-html40/ 4
실제 웹 사이트를 통해 살펴 본 동적 HTML의 기능 SuperFly Macromedia사의 동적 HTML 홈페이지 에서 제공하는 예제 애니메이션 - 날아 다니는 파리 Rollover - 마우스 포인터를 가까이하면 불이 켜지는 메뉴 내용 변환 - 마우스 포인터가 가리키는 메뉴에 따라 바뀌는 설명 Super Fly 애니메이션 5
풀다운(Pulldown) 메뉴 - 카탈로그(CATALOGUE)의 메뉴 의류 카탈로그 6
플래너 드롭다운(Dropdown) 리스트 - 플래너(Planner)에서 날씨, 할 일, 성별을 선택 배경의 애니메이션 - 움직이는 구름 플래너 7
드래그 & 드롭 - 사람 모양의 그림에 옷이나 신발, 가발을 드래그하여 입히기 드레싱 룸(Dressing Room) 8
팩맨 게임 ( http://www1.nisiq.net/~jimmeans/pman/, Netscape 전용 ) 키보드 입력 동적 HTML로 만든 팩맨 게임 9
10.1.2 동적 HTML의 구성 요소 문서 객체모델 (Document Object Model) 브라우저와 브라우저가 읽어 들인 웹 페이지의 각 요소들-텍스트, 이미지, 폼 등-에 이름을 붙여 이들을 객체로 정의함으로써 브라우저와 웹 페이지의 요소들을 접근하려는 것 Netscape사의 JavaScript에서 사용되기 시작한 개념 브라우저에 해당하는 'window' 객체를 가장 상위 객체로 가지며, 그 아래에 'frame', 'document', 'history', 'location' 등의 객체가 정의되어 있음. 브라우저가 읽어 들인 웹 페이지가 'document' 객체 10
스크립트 언어 (Script Language) Style Sheet 웹 페이지의 외형을 제어하기 위한 언어 웹 페이지의 내용에 하나하나 스타일을 지정하지 않고 태그 에 따라 별도의 스타일 정보를 정의하여 종류별로 일괄적인 스타일 적용 웹 페이지의 구성 요소의 위치 자유롭게 지정 스크립트 언어 (Script Language) 어떠한 객체에 대한 특성이나 행동에 대해 기술해 놓은 것 객체의 상태를 바꾸는 역할 Netscape Navigator는 JavaScript를, Internet Explorer는 JavaScript와 유사한 JScript와 VBScript 지원 11
10.2 스타일시트를 이용한 문서의 작성 10.2.1 스타일 시트란? 스타일 시트 문서의 외형을 구체적으로 명시하기 위한 문장의 집합 스타일 시트의 기능과 장점 웹 페이지 구성 요소에 크기, 색깔 등의 스타일을 일괄적으로 적용 글자 간격, 문단 간격, 위치 등 HTML 태그로는 제어할 수 없는 부분을 제어. 문서의 구조와 스타일의 분리 스타일의 변경과 웹 페이지의 일관성 유지가 용이 12
( http://www.w3.org/Style ) 스타일 시트를 사용해 글자를 겹쳐 놓은 예 ( http://www.w3.org/Style ) 13
Style Sheet를 사용한 경우와 사용하지 않은 경우의 비교 <P><FONT COLOR="Navy">어서오세요! 환영합니다~ </FONT></P> <P><FONT COLOR="Navy">이 페이지에는??? </FONT></P> <P><FONT COLOR="Navy">유럽의 여행 정보와 인상 깊은 여행지 몇 곳을 모아 보았습니다</FONT></P> Style Sheet를 이용해 별도의 스타일을 지정하면 웹 페이지의 BODY 부분에는 다음과 같이 본문 내용만 넣을 수 있다. <P> 어서오세요! 환영합니다~ </P> <P> 이 페이지에는???</P> <P> 유럽의 여행 정보와 인상 깊은 여행지 몇 곳을 모아 보았습니다.</P> 14
Style Sheet를 정의하기 위한 문법의 종류 스타일 시트 사용의 장점 문서의 내용에서 스타일 정보가 분리 => 내용을 알아보기 쉽다. 똑같은 스타일 정보를 반복해 쓸 필요가 없다. 스타일 변경시 스타일 정보만을 바꾸어 주면 되므로 변경이 쉽고 빠르다. Style Sheet를 정의하기 위한 문법의 종류 CSS(Cascading Style Sheet) 스타일 정보를 속성(Property)과 속성값(Property-value)으로 지정 스타일 언어의 표준 JSSS(JavaScript Style Sheet) JavaScript로 스타일 정보를 제어 Netscape Navigator 4.0이상에서 채택 15
10.2.2 스타일 시트의 삽입 웹 페이지의 <HEAD>태그 내에 정의 <HEAD>태그 내에 <STYLE>이라는 태그를 이용해 스타일 정보 기술 <STYLE> 태그 웹 페이지에 스타일 정보를 포함시키는 역할 TYPE 속성에 Style Sheet의 MIME type을 명시할 수 있음. CSS의 경우는 "text/css” JSSS의 경우는 "text/JavaScript" <HEAD> 태그 내에서만 사용 가능 형식 <HEAD> <STYLE TYPE="MIME type"> 이 부분에 Style 정보가 들어간다. </STYLE> </HEAD> 16
인라인 스타일(Inline Style)로 정의 웹 페이지의 BODY 부분에 사용된 태그 내에 속성으로 정의 형식 <(HTML 태그) STYLE="Style 정보">Hello</(HTML 태그)> 별도의 Style Sheet 문서 삽입 Style Sheet를 별도의 문서에 정의해 놓고 <HEAD> 태그 내에 <LINK> 태그의 HREF 속성에 Style Sheet 문서의 URL을 지정 Style Sheet 문서의 URL로부터 스타일 정보를 읽어 웹 페이지에 적용 <HEAD> <LINK REL=“STYLESHEET” TYPE="MIME type” HREF = "스타일 시트의 URL"> </HEAD> 17
10.2.3 CSS를 이용한 스타일 정의 방법 (1) 스타일 정의의 기본 형식 <STYLE> 태그 안에 다음과 같은 형식으로 스타일 지정 선택자(selector) : 스타일을 지정하고자 하는 HTML 태그, 또는 CLASS나 ID 이름 선언(declaration) : 속성(property)과 속성값(property value)으로 짝지워진 스타일 정보의 리스트 속성과 속성값은 콜론(:)으로 연결 18
태그에 스타일을 지정 하기 전의 예제 문서 19
태그에 스타일 지정 소스 코드 <html> 태그에 스타일 지정 소스 코드 <html> <head><title>유럽 여행 이야기</title> <style> H1 { background:skyblue } /* 배경 : 하늘색 */ H2 { background:skyblue } /* 배경 : 하늘색 */ H3 { background:navy } /* 배경 : 남색 */ </style> </head> <body> <h1>유럽 여행 이야기</h1> <p>어서오세요! 환영합니다~ </p> <p>이 페이지에는??? </p> <p>유럽의 <em>여행 정보 </em> 와 <em> 인상 깊은 여행지 </em> 몇 곳을 모아 보았습니다. </p> 20
<h2>여행 정보</h2> <h3>Questions and Answers</h3> <hr WIDTH="100%"> <h2>여행 정보</h2> <h3>Questions and Answers</h3> <p>간단한 질문과 답을 모아 보았습니다. </p> <p>Q: "유레일 패스"란? </p> <p>이것은 일정기간 동안 유럽의 모든 기차를 무제한적으로 이용할 수 있는 티켓이며, 유럽밖의 거주자들만 구입할 수 있습니다. 비슷한 종류로 일정 기간동안 횟수를 제한하거나 기차를 이용할 수 있는 국가를 몇 개로 제한해 놓은 유로 패스 등도 있으니 여행 기간, 장소에 따라 신중히 선택을 하는 것이 좋습니다.</p> <p>Q: 유럽에서는 정말로 물을 사서 마셔야 하나요?</p> <p>네. 유럽에서는 대부분 물을 사야 합니다. 식당에서도 물을 그냥 주지는 않지요. 그리고, 물을 살 때는 탄산이 들어있지 않은지 확인해 보고 사세요.</p> </body></html> 21
태그에 스타일 지정 결과 Internet Explorer에서 읽은 문서 Netscape Navigator에서 읽은 문서 22
(2) 스타일을 지정하는 여러 가지 방법 하나의 태그에 여러 가지 속성 지정 여러 태그에 동일한 속성 지정 선언(declaration)에 지정하고자 하는 속성들을 각각 세미콜론(;)으로 구분하여 나열 예 : H3 태그에 배경색을 남색으로, 글씨를 흰색으로 지정 H3 { background:navy; color:white } 여러 태그에 동일한 속성 지정 선택자에 같은 스타일을 지정하고자 하는 HTML 태그 이름을 콤마(,)로 구분하여 나열 예 : H1, H2 태그를 배경색을 남색으로, 글씨를 흰색으로 지정 H1, H2 { background:skyblue } 23
문맥에 따른 스타일 지정 (Contextual Element) 속성의 상속 (Inheritance) 어떠한 태그에 지정된 속성은 그 안에 사용된 태그에도 적용됨. 예 : <P>태그의 글자 색을 회색으로 지정하면 <P>태그 안에 <EM>태그를 사용했을 때 <EM>태그 안의 글자도 회색이 되므로 <P>태그 안에 사용된 <EM>태그에 대해 회색으로 지정할 필요는 없음. 문맥에 따른 스타일 지정 (Contextual Element) 속성을 지정하는 태그가 어떤 태그 안에 사용되는가에 따라 스타일을 다르게 지정 선택자에 가장 바깥쪽에 사용되는 태그로부터 안쪽에 사용되는 태그순으로 태그 이름을 공백(space)으로 구분하여 나열 예 : <P>태그 안의 <EM>태그에 대해서만 굵게 하고, 다른 부분에 사용된 <EM>태그에는 별도의 스타일을 지정하지 않음. P EM { font-weight:bold } 24
다양한 방법으로 스타일 지정하기 소스 코드 <html> <head><title>유럽 여행 이야기-복합적인 스타일 지정</title> <style> H1, H2 { background:url(images/bg_sky.jpg) } /* H1,H2의 배경으로 image 사용 */ H3 { background:Navy; color:white } /* H3의 배경을 남색, 글자색을 흰색으로 */ BODY { color:Navy; } /* BODY 태그의 색을 남색으로 지정 속성이 상속되므로 모든 글자색이 남색 */ P EM { font-weight:bold } /* P 태그 안의 EM 태그의 글자를 굵게 */ </style> </head> <body> 문서의 본문 내용은 ‘태그에 스타일 지정하기’와 같습니다. </body> </html> 25
다양한 방법으로 스타일 지정하기 결과 26
(3) CLASS 속성 또는 ID 속성을 이용한 스타일 지정 CLASS 속성과 ID 속성 모든 태그의 속성으로 가능 예 : 웹 페이지의 BODY 부분에서 다음과 같이 속성을 넣음. <P CLASS=answer> .... </P> <P ID=intro> .... </P> HTML 태그의 속성에 스타일이 정의된 CLASS나 ID 이름을 지정하면 그에 해당하는 Style이 적용 27
CLASS의 스타일 정의 같은 태그에 내용에 따라 서로 다른 스타일을 적용하고자 할 때 사용 웹 페이지 내에서 여러번 사용되어야 하므로 인라인 스타일로 정의하지 않고 항상 <HEAD>태그 내의 <STYLE>태그에서 정의 특정 태그에만 적용되는 CLASS 스타일 정의 선택자로 스타일을 적용하고자 하는 태그 다음에 마침표(.)와 CLASS이름을 씀. 예 : P.question { font-size:15pt; background:rgb(215,200,240) } 모든 태그에 적용되는 CLASS 스타일 정의 선택자로 마침표(.) 다음에 CLASS 이름을 씀. 예 : .answer { font-size:13pt; background:rgb(225,225,255) } 28
ID의 스타일 정의 문서내에서 어떤 스타일을 단 한번만 적용하고자 할 경우 사용 선택자로 '#' 다음에 ID 이름을 씀 예 : ID 속성이 intro인 태그에 스타일 지정 #intro { font-style:italic } 29
CLASS속성과 ID속성을 이용한 스타일 지정 ‘다양한 방법으로 스타일 지정하기’의 소스코드에서 <style> 태그 내에 다음과 같이 CLASS와 ID에 대한 스타일 정의를 추가 P.question { font-size:15pt; background:rgb(215,200,240) } /* class속성이 question인 <P>태그 스타일*/ .answer { font-size:13pt; background:rgb(225,225,255) } /* class 속성이 answer인 태그의 스타일 */ #intro { font-style:italic } /* id 속성이 intro인 태그의 스타일 */ 30
CLASS속성과 ID속성을 이용한 스타일 지정 결과 31
10.2.4 스타일 정의를 위한 속성 (1) 색과 배경, 폰트, 텍스트 관련 속성 색과 배경 폰트 32
텍스트 33
(2) 블록레벨 항목(Block-level Element) 관련 속성 블록레벨 항목 HTML 문서의 한 부분이 블록을 이루어서 표현되는 항목 하나의 문단을 구성하는 <P> 태그의 경우 <P>와 </P>로 둘러싸인 영역이 하나의 블록 박스로 구분하여 취급 각 박스는 다음과 같은 요소로 구성 여백(margin) : 부모 항목과 경계 사이의 간격 경계(border) : 블록의 외곽 특성 채워넣기(padding) : 경계와 블록의 내용 사이의 간격 내용(content) 34
Netscape Navigator의 경계 종류와 모양 블록의 경계 스타일 브라우저에 따라 같은 속성이라도 다르게 보임. Netscape Navigator의 경계 종류와 모양 35
Internet Explorer의 경계 종류와 모양 36
박스 관련 속성 37
경계 속성의 지정 ‘CLASS속성과 ID속성을 이용한 스타일 지정’의 소스 코드의 <style> 태그에 다음과 같이 경계 속성 추가 H1 { border-width:6pt; border-color:rgb(0,0,200); border-style:double } /* H1 태그의 블록 경계 속성 지정 : 두께는 6pt, 진한 파란색, 경계 스타일은 두 줄*/ H2 { border-width:1pt; border-color:Navy; border-style:solid } /* H2 태그의 블록 경계 속성 지정 : 두께는 1pt, 남색, 경계 스타일은 실선*/ 38
경계 속성의 지정 결과 39
(3) 열거목록 관련 속성 열거목록의 스타일 불릿과 번호 스타일 list-style-type 속성 기존의 불릿 모양(disk, circle, square)이나 번호(알파벳, 아라비 아숫자, 로마자) 중에서 원하는 스타일로 지정. list-style-image 속성 GIF나 JPEG 이미지를 불릿으로 사용 Internet Explorer에서만 적용 불릿과 번호의 위치 list-style-position 속성 LI 항목의 블록 안에 또는 밖에 위치 지정 40
열거목록 관련 속성 41
불릿 스타일을 바꾸지 않은 열거 목록의 예 42
불릿 스타일 변경하기 열거 목록의 소스코드에 다음의 스타일 정보 추가 <style> LI { list-style-type: square } /* 바깥 항목의 속성 지정 - 사각형 */ LI UL LI { list-style-type: disc } /* 안쪽 항목의 속성 지정 - 속이 채워진 원형 Navigator에서는 문맥에 따른 속성 지정을 세 단계 이상 적용하지 못하므로 바깥 항목의 스타일이 적용되어 사각형이 됨 */ </style> 43
Netscape Navigator의 경우 Internet Explore의 경우 리스트의 불릿 스타일 변경 결과 Netscape Navigator의 경우 Internet Explore의 경우 44
이미지를 열거목록의 불릿으로 사용하기 ‘불릿 스타일 변경하기’에서 지정했던 스타일 정보를 다음의 스타일 정보로 바꾼다. <style> LI { list-style-image:url(images/paw.gif) } /* 바깥 항목의 속성 지정 */ LI UL LI { list-style-image:url(images/arrow.gif) } /* 안쪽 항목의 속성 지정 */ </style> 45
이미지를 열거목록의 불릿으로 사용한 결과 46
10.3 레이어를 이용한 웹 페이지의 구성 10.3.1 레이어(Layer)란? 레이어란? 하나의 문서 내에서 여러 곳에 배치가 가능한 웹 페이지의 내용 레이어를 사용하면 기존의 HTML 태그로는 불가능했던 웹 페이지 구성요소의 자유로운 위치 지정이 가능 자바스크립트를 이용해 레이어의 이동, 감추기, 크기 변화, 스타일 속성 수정, 내용 수정, 새로운 레이어 생성 등 레이어의 조작 가능 Navigator에서는 <LAYER>라는 태그를 이용해 손쉽게 레이어를 만들 수 있지만 Internet Explorer에서 사용할 수 없으므로 CSS를 이용해 레이어를 정의하는 것이 좋다. 47
10.3.2 레이어 만들기에 필요한 태그 : <DIV>, <SPAN> HTML 문서의 한 부분을 묶어 인위적으로 구조를 덧붙이는 역할 CLASS, ID 속성을 이용해 웹 페이지의 원하는 부분을 묶어 스타일 지정 가능 <DIV> 태그 블록레벨에 사용하여 문서의 블록을 묶는 역할 <DIV>태그로 묶인 부분의 시작과 끝에서는 줄바꿈 <SPAN>태그 인라인(inline)스타일로 사용 예 : <DIV ID=notice> <P> <SPAN CLASS=warning>경고합니다. </SPAN> 암호를 입력하세요. </P> </DIV> 48
10.3.3 레이어의 정의 레이어의 정의 방법 ID attribute을 이용해 스타일을 정의하고, 여기에 'position' 속성을 추가하면 레이어로써 정의됨. position 속성 레이어 위치에 대한 기준을 지정 속성값 absolute 문서 전체에 대한 절대적 위치 지정. Relative 레이어가 서술된 곳을 기준으로 한 상대적 위치 지정. left, top Property을 이용해 레이어 위치 지정 width, height Property을 이용해 레이어의 크기 지정 49
레이어 정의의 예 소스코드 <html> <head><title>레이어 정의</title> <style> #place {position: absolute; left:40; top:20; width:320; background-color:rgb(255,220,220); border-color:white; border-width:1;} </style></head> <body> <div id="place"> <h3>스위스의 루가노</h3> <p><img src="images/lugano.jpg" width="160" height="110" ALIGN="left"> 스위스 남부의 조그만 도시로 ………..</p> </div> </body></html> 50
레이어 정의의 결과 51
절대적 위치와 상대적 위치 비교 소스코드 <html> <head><title>절대적 위치와 상대적 위치</title> <style> #name0 { position : absolute; left :40px; top: 152px; } #name1 { position : absolute; left :185px; top: 152px; } #name2 { position : relative; left : 178px; top: -194px; } </style> </head> <body> <! 절대적 위치 지정 : 문서의 왼쪽 위 점을 기준 (0,0)으로 > <div id="name0"><p>스위스 -- </p></div> <div id="name1"><p>-- 오스트리아 </p></div> <p><img src="images/map.gif" width="250" height="258" alt="유럽지도" border="3"></p> <! 상대적 위치 지정> <div id="name2"><p>체코<br> /</p> </div> </body> </html> 52
절대적 위치와 상대적 위치 비교 결과 53
레이어를 사용하지 않은 웹 페이지와 레이어를 사용한 웹 페이지의 비교 레이어를 사용하지 않은 웹 페이지와 레이어를 사용한 웹 페이지의 비교 54
10.4 동적 웹 페이지의 작성 10.4.1 Netscape와 Explorer를 지원하는 동적 HTML 문서의 작성 JavaScript의 시작 부분에서 브라우저 인식 <HEAD> 부분의 <SCRIPT> 태그 안에 다음과 같이 두 줄을 첨가 n = (document.layers) ? 1:0 e = (document.all) ? 1:0 함수를 작성할 때 if문을 사용하여 각각의 브라우저에 맞는 JavaScript 구문을 사용 if (n) { Netscape Navigator를 위한 실행 코드 } else if(e) { Internet Explorer를 위한 실행 코드 } 55
10.4.2 레이어 감추기/보이기 'visibility' 속성값을 변경함으로써 화면에 나타나 있던 레이어가 보이지 않게 하거나, 보이고 있던 레이어를 감출 수 있다. Netscape Navigator의 visibility 속성 지정 방법 감추기 : (레이어 이름).visibility = "hide" 보이기 : (레이어 이름).visibility="show" Internet Explorer의 visibility 속성 지정 방법 감추기 : (레이어 이름).style.visibility = "hidden" 보이기 : (레이어 이름).style.visibility="visible" 56
레이어 감추기/보이기 함수 작성 Netscape Navigator의 경우 function showLayer(layerID) { document.layers[layerID].visibility = "show" } function hideLayer(layerID) { document.layers[layerID].visibility = "hide" } Internet Explorer의 경우 function showLayer(layerID) { document.all[layerID].style.visibility = "visible" } function hideLayer(layerID) { document.all[layerID].style.visibility = "hidden" } 57
function showLayer(layerID) { 두 브라우저에서 모두 동작하게 하려면 function showLayer(layerID) { if (n) document.layers[layerID].visibility = "show" else if (e) document.all[layerID].style.visibility = "visible" } function hideLayer(layerID) { if (n) document.layers[layerID].visibility = "hide" else if (e) document.all[layerID].style.visibility = "hidden" 58
클릭하면 나타나는 메뉴 소스코드 <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
function showLayer(layerID) { // 레이어 보이기 if (n) document.layers[layerID].visibility = "show" else if (e) document.all[layerID].style.visibility = "visible" } function hideLayer(layerID) { // 레이어 감추기 if (n) document.layers[layerID].visibility = "hide" else if (e) document.all[layerID].style.visibility = "hidden" function changeMenu(menuID) { // sw 값에 따라 메뉴 레이어 감추기/ 보이기 if (sw) { hideLayer(menuID); sw=0; } else { showLayer(menuID); sw=1 } </script> </head> 60
<a href="javascript:changeMenu('menu')"> <body> <div id="title"> <a href="javascript:changeMenu('menu')"> <img src="title.jpg" border="0"></a> </div> <div id="menu"> <img src="subtitle.jpg" width="250" height="250"> </body> </html> 61
클릭하면 나타나는 메뉴 결과 62
10.4.3 레이어의 위치 옮기기 위치 옮기기 레이어의 위치 바꾸기 소스코드 레이어의 위치를 지정하는 'left', 'top' 속성값을 변경 레이어의 위치 바꾸기 소스코드 <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 move1() { block.left = 110; block.top = 40 } // 다윈 function move2() { block.left = 35; block.top = 160 } // 퍼스 function move3() { block.left = 150; block.top = 150 } // 애들레이드 </script></head> 63
<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="move1();"> <input type="button" value="퍼스로" onclick="move2();"> <input type="button" value="애들레이드로" onclick="move3();"> </p> </form> </body> </html> 64
레이어의 위치 바꾸기 결과 65
팝아웃 메뉴 소스코드 <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
if (n) { document.menu.visibility="hide"; document.tab.left=0; } function hideMenu() { if (n) { document.menu.visibility="hide"; document.tab.left=0; } else if (e) { menu.style.visibility="hidden"; tab.style.left=0; } } function showMenu() { if (n) { document.menu.visibility="show"; document.tab.left=263; } else if (e) { menu.style.visibility="visible"; tab.style.left=263; } 67
function changeMenu() { if (sw) { hideMenu(); sw=0; } else { showMenu(); sw=1 } } </script></head> <body> <div id="tab"> <p><a href="javascript:changeMenu()"> <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
팝아웃 메뉴 결과 69
10.4.4 애니메이션 효과 내기 레이어의 속성을 연속해 변경함으로써 애니메이션을 만들 수 있다. JavaScript의 setTimeOut() 함수 형식 : setTimeOut("실행할 JavaScript 구문", "시간") 두번째 파라미터에 지정한 시간(단위:1000분의 1초)이 지나면 첫번째 파라미터의 JavaScript 구문을 실행 70
왼쪽에서 미끄러져 나오는 메뉴 소스코드 <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; tab.style.left=0; } } // 초기값 지정 71
if (document.tab.left<263) setTimeout("slideIn()",15) } function slideIn() { if (n) { document.menu.left+=5; document.tab.left+=5; if (document.tab.left<263) setTimeout("slideIn()",15) } else if (e) { menu.style.left = parseInt(menu.style.left)+5; tab.style.left = parseInt(tab.style.left)+5; if (parseInt(tab.style.left)<263) setTimeout("slideIn()",15); 72
if (document.tab.left>0) setTimeout("slideOut()",15) } function slideOut() { if (n) { document.menu.left-=5; document.tab.left-=5; if (document.tab.left>0) setTimeout("slideOut()",15) } else if (e) { menu.style.left = parseInt(menu.style.left)-5; tab.style.left = parseInt(tab.style.left)-5; if (parseInt(tab.style.left)>0) setTimeout("slideOut()",15); 73
function changeMenu() { if (sw) { slideOut(); sw=0; } else { slideIn(); sw=1 } } </script></head> <body> <div id="tab"> <p><a href="javascript:changeMenu()"> <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
왼쪽에서 미끄러져 나오는 메뉴 결과 75
10.5 Netscape와 Explorer의 동적 HTML 비교 76
Netscape Navigator의 동적 HTML 자바스크립트를 기반으로 한 스타일의 지정이나 문서의 레이어 등에 큰 역점 스타일시트로 CSS와 함께 JSSS를 사용 <LAYER> 태그 사용 다이나믹 폰트 (Dynamic Font) 지정된 글자체를 그대로 사용하여 좀더 보기 좋고 새로운 글씨체를 사용하여 Web Page 구성가능 별도의 글자체 파일을 준비하고 웹 페이지에 글자체 연결 <STYLE TYPE = "text/css"> <! - - @fontdef url( "글자체 파일의 URL" ) -- > </STYLE> 77
다이나믹 폰트를 사용한 문서의 예 78
Microsoft사의 동적 HTML 문서의 전반에 걸친 다이나믹 HTML에 대해 비중 다이나믹 콘텐츠 - 웹 페이지가 로딩된 후에도 문서의 구성 요소들을 동적으로 바꿀 수 있음. 데이터 바인딩 - 웹 페이지가 데이터베이스 자료를 읽어올 수 있도록 해줌. 멀티미디어 콘트롤 - 이미지 에디터를 사용해 이미지를 변형한 것 같은 효과 79