10 장 동적 HTML (Dynamic HTML)

2

1010 장 동적 장 동적 HTMLHTML

10.1 동적 HTML 의 개요10.1.1 동적 HTML 의 특징과 기능 기존의 HTML

• 정적 • 동적인 기능을 추가하기 위해 자바 애플릿 , CGI 등을 사용

• 자바 애플릿– 자바 프로그래밍을 익혀야 하며 , 애플릿이 실행되기까지의 시간도 오래

걸림 .

• CGI– 데이터베이스의 내용을 사용자의 요구에 따라 HTML 문서로 만들어

보여 주는 것 .– 입력을 서버에서 처리하므로 서버에 부담 .– 새로운 HTML 문서를 구성하는 데에 시간이 걸림 .

• 웹 페이지의 구성 요소를 자유롭게 배치할 수 없음 .

3


동적 HTML• 기존 HTML 의 단점을 개선해 동적인 웹 페이지를 만들 수 있도록

하기 위한 것 • 영어로 Dynamic HTML, 또는 약자로 DHTML

• HTML 문서 자체의 기능이므로 브라우저에서 실행되어 서버의 부담이 적고 , 이벤트에 대한 즉각적 반응이 가능

• 웹 페이지의 구성 요소의 위치를 자유롭게 지정 .

• 자바 애플릿이나 CGI 보다 구현이 쉬움 .

• Netscape Navigator 와 Internet Explorer 에서 서로 지원하는 방식이 달라 호환이 잘 되지 않는 것이 단점

4


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/

5


실제 웹 사이트를 통해 살펴 본 동적 HTML 의 기능• SuperFly

Macromedia 사의 동적 HTML 홈페이지 에서 제공하는 예제• 애니메이션

- 날아 다니는 파리• Rollover

- 마우스 포인터를 가까이하면 불이 켜지는 메뉴

• 내용 변환 - 마우스 포인터가 가리키는 메뉴에 따라 바뀌는 설명

Super Fly 애니메이션

6


• 풀다운 (Pulldown) 메뉴 - 카탈로그 (CATALOGUE) 의 메뉴

의류 카탈로그

7


• 드롭다운 (Dropdown) 리스트 - 플래너 (Planner) 에서 날씨 , 할 일 , 성별을 선택

• 배경의 애니메이션 - 움직이는 구름

플래너

8


• 드래그 & 드롭 - 사람 모양의 그림에 옷이나 신발 , 가발을 드래그하여 입히기

드레싱 룸 (Dressing Room)

9


• 팩맨 게임 ( http://www1.nisiq.net/~jimmeans/pman/, Netscape 전용 )

• 키보드 입력

동적 HTML 로 만든 팩맨 게임

10


10.1.2 동적 HTML 의 구성 요소 문서 객체모델 (Document Object Model)

• 브라우저와 브라우저가 읽어 들인 웹 페이지의 각 요소들 - 텍스트 , 이미지 , 폼 등 - 에 이름을 붙여 이들을 객체로 정의함으로써 브라우저와 웹 페이지의 요소들을 접근하려는 것

• Netscape 사의 JavaScript 에서 사용되기 시작한 개념 • 브라우저에 해당하는 'window' 객체를 가장 상위 객체로 가지며 , 그

아래에 'frame', 'document', 'history', 'location' 등의 객체가 정의되어 있음 .

• 브라우저가 읽어 들인 웹 페이지가 'document' 객체

11


Style Sheet• 웹 페이지의 외형을 제어하기 위한 언어 • 웹 페이지의 내용에 하나하나 스타일을 지정하지 않고 태그 에 따라

별도의 스타일 정보를 정의하여 종류별로 일괄적인 스타일 적용 • 웹 페이지의 구성 요소의 위치 자유롭게 지정

스크립트 언어 (Script Language)• 어떠한 객체에 대한 특성이나 행동에 대해 기술해 놓은 것 • 객체의 상태를 바꾸는 역할 • Netscape Navigator 는 JavaScript 를 , Internet Explorer 는 JavaScri

pt 와 유사한 JScript 와 VBScript 지원

12


10.2 스타일시트를 이용한 문서의 작성10.2.1 스타일 시트란 ? 스타일 시트

• 문서의 외형을 구체적으로 명시하기 위한 문장의 집합 • 스타일 시트의 기능과 장점• 웹 페이지 구성 요소에 크기 , 색깔 등의 스타일을 일괄적으로 적용 • 글자 간격 , 문단 간격 , 위치 등 HTML 태그로는 제어할 수 없는 부분을

제어 .

• 문서의 구조와 스타일의 분리 • 스타일의 변경과 웹 페이지의 일관성 유지가 용이

13


스타일 시트를 사용해 글자를 겹쳐 놓은 예( http://www.w3.org/Style )

14


Style Sheet 를 사용한 경우와 사용하지 않은 경우의 비교• 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>

15


스타일 시트 사용의 장점• 문서의 내용에서 스타일 정보가 분리 => 내용을 알아보기 쉽다 . • 똑같은 스타일 정보를 반복해 쓸 필요가 없다 . • 스타일 변경시 스타일 정보만을 바꾸어 주면 되므로 변경이 쉽고

빠르다 .

Style Sheet 를 정의하기 위한 문법의 종류• CSS(Cascading Style Sheet)

• 스타일 정보를 속성 (Property) 과 속성값 (Property-value) 으로 지정 • 스타일 언어의 표준

• JSSS(JavaScript Style Sheet)• JavaScript 로 스타일 정보를 제어 • Netscape Navigator 4.0 이상에서 채택

16


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>

17


인라인 스타일 (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>

18


10.2.3 CSS 를 이용한 스타일 정의 방법(1) 스타일 정의의 기본 형식 <STYLE> 태그 안에 다음과 같은 형식으로 스타일 지정

• 선택자 (selector) : 스타일을 지정하고자 하는 HTML 태그 , 또는 CLASS 나 ID 이름

• 선언 (declaration) : 속성 (property) 과 속성값 (property value) 으로 짝지워진 스타일 정보의 리스트

• 속성과 속성값은 콜론 (:) 으로 연결

19


태그에 스타일을 지정 하기 전의 예제 문서

20


태그에 스타일 지정 소스 코드<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>

21


<hr WIDTH="100%"><h2> 여행 정보 </h2><h3>Questions and Answers</h3><p> 간단한 질문과 답을 모아 보았습니다 . </p>

<p>Q: " 유레일 패스 " 란 ? </p><p> 이것은 일정기간 동안 유럽의 모든 기차를 무제한적으로 이용할 수 있는

티켓이며 , 유럽밖의 거주자들만 구입할 수 있습니다 . 비슷한 종류로 일정 기간동안 횟수를 제한하거나 기차를 이용할 수 있는 국가를 몇 개로 제한해 놓은 유로 패스 등도 있으니 여행 기간 , 장소에 따라 신중히 선택을 하는 것이 좋습니다 .</p>

<p>Q: 유럽에서는 정말로 물을 사서 마셔야 하나요 ?</p><p> 네 . 유럽에서는 대부분 물을 사야 합니다 . 식당에서도 물을 그냥 주지는

않지요 . 그리고 , 물을 살 때는 탄산이 들어있지 않은지 확인해 보고 사세요 .</p>

</body></html>

22


태그에 스타일 지정 결과 Internet Explorer 에서 읽은 문서

Netscape Navigator 에서 읽은 문서

23


(2) 스타일을 지정하는 여러 가지 방법 하나의 태그에 여러 가지 속성 지정

• 선언 (declaration) 에 지정하고자 하는 속성들을 각각 세미콜론 (;)으로 구분하여 나열

• 예 : H3 태그에 배경색을 남색으로 , 글씨를 흰색으로 지정H3 { background:navy; color:white }

여러 태그에 동일한 속성 지정• 선택자에 같은 스타일을 지정하고자 하는 HTML 태그 이름을 콤마

(,) 로 구분하여 나열 • 예 : H1, H2 태그를 배경색을 남색으로 , 글씨를 흰색으로 지정

H1, H2 { background:skyblue }

24


속성의 상속 (Inheritance)• 어떠한 태그에 지정된 속성은 그 안에 사용된 태그에도 적용됨 . • 예 : <P> 태그의 글자 색을 회색으로 지정하면 <P> 태그 안에 <EM>

태그를 사용했을 때 <EM> 태그 안의 글자도 회색이 되므로 <P>태그 안에 사용된 <EM> 태그에 대해 회색으로 지정할 필요는 없음 .

문맥에 따른 스타일 지정 (Contextual Element)• 속성을 지정하는 태그가 어떤 태그 안에 사용되는가에 따라 스타일을

다르게 지정 • 선택자에 가장 바깥쪽에 사용되는 태그로부터 안쪽에 사용되는

태그순으로 태그 이름을 공백 (space) 으로 구분하여 나열 • 예 : <P> 태그 안의 <EM> 태그에 대해서만 굵게 하고 , 다른 부분에

사용된 <EM> 태그에는 별도의 스타일을 지정하지 않음 .

P EM { font-weight:bold }

25


다양한 방법으로 스타일 지정하기 소스 코드<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>

26


다양한 방법으로 스타일 지정하기 결과

27


(3) CLASS 속성 또는 ID 속성을 이용한 스타일 지정 CLASS 속성과 ID 속성

• CLASS 속성 : 같은 태그를 사용한 내용을 종류별로 구분하기 위해 사용 • ID 속성 : 어떤 특정한 하나의 태그만을 구별하기 위해 사용 • 같은 CLASS 이름을 갖는 태그는 여러 개 있을 수 있지만 ID 이름은 웹

페이지 내에 단 한번만 사용 • 모든 태그의 속성으로 가능 • 예 : 웹 페이지의 BODY 부분에서 다음과 같이 속성을 넣음 .

<P CLASS=answer> .... </P>

<P ID=intro> .... </P>

• HTML 태그의 속성에 스타일이 정의된 CLASS 나 ID 이름을 지정하면 그에 해당하는 Style 이 적용

28


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) }

29


ID 의 스타일 정의• 문서내에서 어떤 스타일을 단 한번만 적용하고자 할 경우 사용 • ID 의 스타일 정의

• 선택자로 '#' 다음에 ID 이름을 씀 • 예 : ID 속성이 intro 인 태그에 스타일 지정 #intro { font-style:italic }

30


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 인 태그의 스타일 */

31


CLASS 속성과 ID 속성을 이용한 스타일 지정 결과

32


10.2.4 스타일 정의를 위한 속성 (1) 색과 배경 , 폰트 , 텍스트 관련 속성 색과 배경

폰트

33


텍스트

34


(2) 블록레벨 항목 (Block-level Element) 관련 속성 블록레벨 항목

• HTML 문서의 한 부분이 블록을 이루어서 표현되는 항목 • 하나의 문단을 구성하는 <P> 태그의 경우 <P> 와 </P> 로

둘러싸인 영역이 하나의 블록• 박스로 구분하여 취급 • 각 박스는 다음과 같은 요소로 구성

• 여백 (margin) : 부모 항목과 경계 사이의 간격

• 경계 (border) : 블록의 외곽 특성 • 채워넣기 (padding) : 경계와

블록의 내용 사이의 간격 • 내용 (content)

35


블록의 경계 스타일• 브라우저에 따라 같은 속성이라도 다르게 보임 .

Netscape Navigator 의 경계 종류와 모양

36


Internet Explorer 의 경계 종류와 모양

37


박스 관련 속성

38


경계 속성의 지정• ‘CLASS 속성과 ID 속성을 이용한 스타일 지정’의 소스 코드의 <sty

le> 태그에 다음과 같이 경계 속성 추가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, 남색 , 경계 스타일은 실선 */

39


경계 속성의 지정 결과

40


(3) 열거목록 관련 속성 열거목록의 스타일

• 불릿과 번호 스타일• list-style-type 속성

기존의 불릿 모양 (disk, circle, square) 이나 번호 ( 알파벳 , 아라비 아숫자 , 로마자 ) 중에서 원하는 스타일로 지정 .

• list-style-image 속성 GIF 나 JPEG 이미지를 불릿으로 사용 Internet Explorer 에서만 적용

• 불릿과 번호의 위치• list-style-position 속성

LI 항목의 블록 안에 또는 밖에 위치 지정

41


열거목록 관련 속성

42


불릿 스타일을 바꾸지 않은 열거 목록의 예

43


불릿 스타일 변경하기• 열거 목록의 소스코드에 다음의 스타일 정보 추가

<style>

LI { list-style-type: square }

/* 바깥 항목의 속성 지정 - 사각형 */

LI UL LI { list-style-type: disc }

/* 안쪽 항목의 속성 지정 - 속이 채워진 원형 Navigator 에서는 문맥에 따른 속성 지정을 세 단계 이상 적용하지 못하므로 바깥 항목의 스타일이 적용되어 사각형이 됨 */

</style>

44


리스트의 불릿 스타일 변경 결과

Netscape Navigator 의 경우 Internet Explore 의 경우

45


이미지를 열거목록의 불릿으로 사용하기• ‘ 불릿 스타일 변경하기’에서 지정했던 스타일 정보를 다음의 스타일

정보로 바꾼다 .

<style>

LI { list-style-image:url(images/paw.gif) }

/* 바깥 항목의 속성 지정 */

LI UL LI

{ list-style-image:url(images/arrow.gif) }

/* 안쪽 항목의 속성 지정 */

</style>

46


이미지를 열거목록의 불릿으로 사용한 결과

47


10.3 레이어를 이용한 웹 페이지의 구성

10.3.1 레이어 (Layer) 란 ? 레이어란 ?

• 하나의 문서 내에서 여러 곳에 배치가 가능한 웹 페이지의 내용• 레이어를 사용하면 기존의 HTML 태그로는 불가능했던 웹 페이지

구성요소의 자유로운 위치 지정이 가능• 자바스크립트를 이용해 레이어의 이동 , 감추기 , 크기 변화 ,

스타일 속성 수정 , 내용 수정 , 새로운 레이어 생성 등 레이어의 조작 가능

• Navigator 에서는 <LAYER> 라는 태그를 이용해 손쉽게 레이어를 만들 수 있지만 Internet Explorer 에서 사용할 수 없으므로 CSS 를 이용해 레이어를 정의하는 것이 좋다 .

48


10.3.2 레이어 만들기에 필요한 태그 : <DIV>, <SPAN> <DIV> 태그와 <SPAN> 태그의 역할

• HTML 문서의 한 부분을 묶어 인위적으로 구조를 덧붙이는 역할 • CLASS, ID 속성을 이용해 웹 페이지의 원하는 부분을 묶어 스타일 지정

가능 <DIV> 태그

• 블록레벨에 사용하여 문서의 블록을 묶는 역할 • <DIV> 태그로 묶인 부분의 시작과 끝에서는 줄바꿈

<SPAN> 태그• 인라인 (inline) 스타일로 사용

예 : <DIV ID=notice><P> <SPAN CLASS=warning> 경고합니다 . </SPAN> 암호를 입력하세요 .</P></DIV>

49


10.3.3 레이어의 정의 레이어의 정의 방법

• ID attribute 을 이용해 스타일을 정의하고 , 여기에 'position' 속성을 추가하면 레이어로써 정의됨 .

• position 속성• 레이어 위치에 대한 기준을 지정 • 속성값

absolute 문서 전체에 대한 절대적 위치 지정 . Relative 레이어가 서술된 곳을 기준으로 한 상대적 위치 지정 .

• left, top Property 을 이용해 레이어 위치 지정 • width, height Property 을 이용해 레이어의 크기 지정

50


레이어 정의의 예 소스코드<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>

51


레이어 정의의 결과

52


절대적 위치와 상대적 위치 비교 소스코드<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>

53


절대적 위치와 상대적 위치 비교 결과

54


레이어를 사용하지 않은 웹 페이지와 레이어를 사용한 웹 페이지의

비교

55


10.4 동적 웹 페이지의 작성 10.4.1 Netscape 와 Explorer 를 지원하는

동적 HTML 문서의 작성

JavaScript 의 시작 부분에서 브라우저 인식• <HEAD> 부분의 <SCRIPT> 태그 안에 다음과 같이 두 줄을 첨가

n = (document.layers) ? 1:0e = (document.all) ? 1:0

함수를 작성할 때• if 문을 사용하여 각각의 브라우저에 맞는 JavaScript 구문을 사용

if (n) { Netscape Navigator 를 위한 실행 코드 }else if(e) { Internet Explorer 를 위한 실행 코드 }

56


10.4.2 레이어 감추기 / 보이기 'visibility' 속성값을 변경함으로써 화면에 나타나 있던 레이어가

보이지 않게 하거나 , 보이고 있던 레이어를 감출 수 있다 . Netscape Navigator 의 visibility 속성 지정 방법

• 감추기 : ( 레이어 이름 ).visibility = "hide"

• 보이기 : ( 레이어 이름 ).visibility="show"

Internet Explorer 의 visibility 속성 지정 방법• 감추기 : ( 레이어 이름 ).style.visibility = "hidden"

• 보이기 : ( 레이어 이름 ).style.visibility="visible"

57


레이어 감추기 / 보이기 함수 작성 • 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 = "hidde

n" }

58


• 두 브라우저에서 모두 동작하게 하려면 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"

}

59


클릭하면 나타나는 메뉴 소스코드<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

60


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>

61


<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">

</div>

</body>

</html>

62


클릭하면 나타나는 메뉴 결과

63


10.4.3 레이어의 위치 옮기기 위치 옮기기

• 레이어의 위치를 지정하는 'left', 'top' 속성값을 변경 레이어의 위치 바꾸기 소스코드

<html> <head><title> 레이어의 위치 바꾸기 </title><script>n = (document.layers) ? 1:0e = (document.all) ? 1:0function 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>

64


<body onload="init()"><p><img src="ausm.jpg"></p>

<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>

65


레이어의 위치 바꾸기 결과

66


팝아웃 메뉴 소스코드<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

67


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; }}

68


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>

69


팝아웃 메뉴 결과

70


10.4.4 애니메이션 효과 내기 레이어의 속성을 연속해 변경함으로써 애니메이션을 만들 수

있다 . JavaScript 의 setTimeOut() 함수

• 형식 : setTimeOut(" 실행할 JavaScript 구문 ", " 시간 ")

• 두번째 파라미터에 지정한 시간 ( 단위 :1000 분의 1 초 ) 이 지나면첫번째 파라미터의 JavaScript 구문을 실행

71


왼쪽에서 미끄러져 나오는 메뉴 소스코드<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:0e = (document.all) ? 1:0sw=0function init () { if (e) { menu.style.left=-263; tab.style.left=0; }} // 초기값 지정

72


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);

}

}

73


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);

}

}

74


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>

75


왼쪽에서 미끄러져 나오는 메뉴 결과

76


10.5 Netscape 와 Explorer 의 동적 HTML 비교

77


Netscape Navigator 의 동적 HTML• 자바스크립트를 기반으로 한 스타일의 지정이나 문서의 레이어

등에 큰 역점 • 스타일시트로 CSS 와 함께 JSSS 를 사용 • <LAYER> 태그 사용 • 다이나믹 폰트 (Dynamic Font)

• 지정된 글자체를 그대로 사용하여 좀더 보기 좋고 새로운 글씨체를 사용하여 Web Page 구성가능

• 별도의 글자체 파일을 준비하고 웹 페이지에 글자체 연결<STYLE TYPE = "text/css"><! - -@fontdef url( " 글자체 파일의 URL" )-- ></STYLE>

78


다이나믹 폰트를 사용한 문서의 예

79


Microsoft 사의 동적 HTML• 문서의 전반에 걸친 다이나믹 HTML 에 대해 비중 • 문서가 로딩된 이후에도 HTML 의 각 구성 요소들을 다이나믹하게

바꿀 수 있음 .

• 다이나믹 콘텐츠 - 웹 페이지가 로딩된 후에도 문서의 구성 요소들을 동적으로 바꿀 수 있음 .

• 데이터 바인딩 - 웹 페이지가 데이터베이스 자료를 읽어올 수 있도록 해줌 .

• 멀티미디어 콘트롤 - 이미지 에디터를 사용해 이미지를 변형한 것 같은 효과

10 장 동적 HTML (Dynamic HTML)

Documents

Transcript of 10 장 동적 HTML (Dynamic HTML)