동적 HTML (Dynamic HTML)
Download
Report
Transcript 동적 HTML (Dynamic HTML)
10장 동적 HTML
(Dynamic HTML)
10장 동적 HTML
10.1 동적 HTML의 개요
10.1.1 동적 HTML의 특징과 기능
기존의 HTML
• 정적
• 동적인 기능을 추가하기 위해 자바 애플릿, CGI 등을 사용
• 자바 애플릿
– 자바 프로그래밍을 익혀야 하며, 애플릿이 실행되기까지의 시간도
오래 걸림.
• CGI
– 데이터베이스의 내용을 사용자의 요구에 따라 HTML 문서로 만들
어 보여 주는 것.
– 입력을 서버에서 처리하므로 서버에 부담.
– 새로운 HTML 문서를 구성하는 데에 시간이 걸림.
• 웹 페이지의 구성 요소를 자유롭게 배치할 수 없음.
2
10장 동적 HTML
동적 HTML
• 기존 HTML의 단점을 개선해 동적인 웹 페이지를 만들 수 있도록 하
기 위한 것
• 영어로 Dynamic HTML, 또는 약자로 DHTML
• HTML문서 자체의 기능이므로 브라우저에서 실행되어 서버의 부담
이 적고, 이벤트에 대한 즉각적 반응이 가능
• 웹 페이지의 구성 요소의 위치를 자유롭게 지정.
• 자바 애플릿이나 CGI보다 구현이 쉬움.
• Netscape Navigator와 Internet Explorer에서 서로 지원하는 방식이 달
라 호환이 잘 되지 않는 것이 단점
3
10장 동적 HTML
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
10장 동적 HTML
실제 웹 사이트를 통해 살펴 본 동적 HTML의 기능
• SuperFly
Macromedia사의 동적 HTML 홈페이지 에서 제공하는 예제
• 애니메이션
- 날아 다니는 파리
• Rollover
- 마우스 포인터를 가까이하면
불이 켜지는 메뉴
• 내용 변환
- 마우스 포인터가 가리키는
메뉴에 따라 바뀌는 설명
Super Fly 애니메이션
5
10장 동적 HTML
• 풀다운(Pulldown) 메뉴 - 카탈로그(CATALOGUE)의 메뉴
의류 카탈로그
6
10장 동적 HTML
• 드롭다운(Dropdown) 리스트 - 플래너(Planner)에서 날씨, 할 일,
성별을 선택
• 배경의 애니메이션 - 움직이는 구름
플래너
7
10장 동적 HTML
• 드래그 & 드롭 - 사람 모양의 그림에 옷이나 신발, 가발을 드래그
하여 입히기
드레싱 룸(Dressing Room)
8
10장 동적 HTML
• 팩맨 게임 ( http://www1.nisiq.net/~jimmeans/pman/, Netscape 전용 )
• 키보드 입력
동적 HTML로 만든 팩맨 게임
9
10장 동적 HTML
10.1.2 동적 HTML의 구성 요소
문서 객체모델 (Document Object Model)
• 브라우저와 브라우저가 읽어 들인 웹 페이지의 각 요소들-텍스트, 이
미지, 폼 등-에 이름을 붙여 이들을 객체로 정의함으로써 브라우저와
웹 페이지의 요소들을 접근하려는 것
• Netscape사의 JavaScript에서 사용되기 시작한 개념
• 브라우저에 해당하는 'window' 객체를 가장 상위 객체로 가지며, 그 아
래에 'frame', 'document', 'history', 'location' 등의 객체가 정의되어 있
음.
• 브라우저가 읽어 들인 웹 페이지가 'document' 객체
10
10장 동적 HTML
Style Sheet
• 웹 페이지의 외형을 제어하기 위한 언어
• 웹 페이지의 내용에 하나하나 스타일을 지정하지 않고 태그 에 따라 별
도의 스타일 정보를 정의하여 종류별로 일괄적인 스타일 적용
• 웹 페이지의 구성 요소의 위치 자유롭게 지정
스크립트 언어 (Script Language)
• 어떠한 객체에 대한 특성이나 행동에 대해 기술해 놓은 것
• 객체의 상태를 바꾸는 역할
• Netscape Navigator는 JavaScript를, Internet Explorer는 JavaScript
와 유사한 JScript와 VBScript 지원
11
10장 동적 HTML
10.2 스타일시트를 이용한 문서의 작성
10.2.1 스타일 시트란?
스타일 시트
•
•
•
•
문서의 외형을 구체적으로 명시하기 위한 문장의 집합
스타일 시트의 기능과 장점
웹 페이지 구성 요소에 크기, 색깔 등의 스타일을 일괄적으로 적용
글자 간격, 문단 간격, 위치 등 HTML 태그로는 제어할 수 없는 부분을
제어.
• 문서의 구조와 스타일의 분리
• 스타일의 변경과 웹 페이지의 일관성 유지가 용이
12
10장 동적 HTML
스타일 시트를 사용해 글자를 겹쳐 놓은 예
( http://www.w3.org/Style )
13
10장 동적 HTML
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>
14
10장 동적 HTML
스타일 시트 사용의 장점
• 문서의 내용에서 스타일 정보가 분리 => 내용을 알아보기 쉽다.
• 똑같은 스타일 정보를 반복해 쓸 필요가 없다.
• 스타일 변경시 스타일 정보만을 바꾸어 주면 되므로 변경이 쉽고 빠르
다.
Style Sheet를 정의하기 위한 문법의 종류
• CSS(Cascading Style Sheet)
• 스타일 정보를 속성(Property)과 속성값(Property-value)으로 지정
• 스타일 언어의 표준
• JSSS(JavaScript Style Sheet)
• JavaScript로 스타일 정보를 제어
• Netscape Navigator 4.0이상에서 채택
15
10장 동적 HTML
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
10장 동적 HTML
인라인 스타일(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장 동적 HTML
10.2.3 CSS를 이용한 스타일 정의 방법
(1) 스타일 정의의 기본 형식
<STYLE> 태그 안에 다음과 같은 형식으로 스타일 지정
• 선택자(selector) : 스타일을 지정하고자 하는 HTML 태그, 또는
CLASS나 ID 이름
• 선언(declaration) : 속성(property)과 속성값(property value)으로 짝
지워진 스타일 정보의 리스트
• 속성과 속성값은 콜론(:)으로 연결
18
10장 동적 HTML
태그에 스타일을 지정 하기 전의 예제 문서
19
10장 동적 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
10장 동적 HTML
<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
10장 동적 HTML
Internet Explorer에서 읽은 문서
태그에 스타일 지정 결과
Netscape Navigator에서 읽은 문서
22
10장 동적 HTML
(2) 스타일을 지정하는 여러 가지 방법
하나의 태그에 여러 가지 속성 지정
• 선언(declaration)에 지정하고자 하는 속성들을 각각 세미콜론(;)으로
구분하여 나열
• 예 : H3 태그에 배경색을 남색으로, 글씨를 흰색으로 지정
H3 { background:navy; color:white }
여러 태그에 동일한 속성 지정
• 선택자에 같은 스타일을 지정하고자 하는 HTML 태그 이름을 콤마(,)
로 구분하여 나열
• 예 : H1, H2 태그를 배경색을 남색으로, 글씨를 흰색으로 지정
H1, H2 { background:skyblue }
23
10장 동적 HTML
속성의 상속 (Inheritance)
• 어떠한 태그에 지정된 속성은 그 안에 사용된 태그에도 적용됨.
• 예 : <P>태그의 글자 색을 회색으로 지정하면 <P>태그 안에 <EM>태
그를 사용했을 때 <EM>태그 안의 글자도 회색이 되므로 <P>태그 안
에 사용된 <EM>태그에 대해 회색으로 지정할 필요는 없음.
문맥에 따른 스타일 지정 (Contextual Element)
• 속성을 지정하는 태그가 어떤 태그 안에 사용되는가에 따라 스타일을
다르게 지정
• 선택자에 가장 바깥쪽에 사용되는 태그로부터 안쪽에 사용되는 태그
순으로 태그 이름을 공백(space)으로 구분하여 나열
• 예 : <P>태그 안의 <EM>태그에 대해서만 굵게 하고, 다른 부분에 사
용된 <EM>태그에는 별도의 스타일을 지정하지 않음.
P EM { font-weight:bold }
24
10장 동적 HTML
다양한 방법으로 스타일 지정하기 소스 코드
<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
10장 동적 HTML
다양한 방법으로 스타일 지정하기 결과
26
10장 동적 HTML
(3) CLASS 속성 또는 ID 속성을 이용한 스타일 지정
CLASS 속성과 ID 속성
• CLASS 속성 : 같은 태그를 사용한 내용을 종류별로 구분하기 위해 사
용
• ID 속성 : 어떤 특정한 하나의 태그만을 구별하기 위해 사용
• 같은 CLASS 이름을 갖는 태그는 여러 개 있을 수 있지만 ID 이름은 웹
페이지 내에 단 한번만 사용
• 모든 태그의 속성으로 가능
• 예 : 웹 페이지의 BODY 부분에서 다음과 같이 속성을 넣음.
<P CLASS=answer> .... </P>
<P ID=intro> .... </P>
• HTML 태그의 속성에 스타일이 정의된 CLASS나 ID 이름을 지정하면
그에 해당하는 Style이 적용
27
10장 동적 HTML
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
10장 동적 HTML
ID의 스타일 정의
• 문서내에서 어떤 스타일을 단 한번만 적용하고자 할 경우 사용
• ID의 스타일 정의
• 선택자로 '#' 다음에 ID 이름을 씀
• 예 : ID 속성이 intro인 태그에 스타일 지정
#intro { font-style:italic }
29
10장 동적 HTML
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
10장 동적 HTML
CLASS속성과 ID속성을 이용한 스타일 지정 결과
31
10장 동적 HTML
10.2.4 스타일 정의를 위한 속성
(1) 색과 배경, 폰트, 텍스트 관련 속성
색과 배경
폰트
32
10장 동적 HTML
텍스트
33
10장 동적 HTML
(2) 블록레벨 항목(Block-level Element) 관련 속성
블록레벨 항목
• HTML 문서의 한 부분이 블록을 이루어서 표현되는 항목
• 하나의 문단을 구성하는 <P> 태그의 경우 <P>와 </P>로 둘러싸인 영
역이 하나의 블록
• 박스로 구분하여 취급
• 각 박스는 다음과 같은 요소로 구성
• 여백(margin) : 부모 항목과
경계 사이의 간격
• 경계(border) : 블록의 외곽 특성
• 채워넣기(padding) : 경계와
블록의 내용 사이의 간격
• 내용(content)
34
10장 동적 HTML
블록의 경계 스타일
• 브라우저에 따라 같은 속성이라도 다르게 보임.
Netscape Navigator의 경계 종류와 모양
35
10장 동적 HTML
Internet Explorer의 경계 종류와 모양
36
10장 동적 HTML
박스 관련 속성
37
10장 동적 HTML
경계 속성의 지정
• ‘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
10장 동적 HTML
경계 속성의 지정 결과
39
10장 동적 HTML
(3) 열거목록 관련 속성
열거목록의 스타일
• 불릿과 번호 스타일
• list-style-type 속성
기존의 불릿 모양(disk, circle, square)이나 번호(알파벳, 아라비
아숫자, 로마자) 중에서 원하는 스타일로 지정.
• list-style-image 속성
GIF나 JPEG 이미지를 불릿으로 사용
Internet Explorer에서만 적용
• 불릿과 번호의 위치
• list-style-position 속성
LI 항목의 블록 안에 또는 밖에 위치 지정
40
10장 동적 HTML
열거목록 관련 속성
41
10장 동적 HTML
불릿 스타일을 바꾸지 않은 열거 목록의 예
42
10장 동적 HTML
불릿 스타일 변경하기
• 열거 목록의 소스코드에 다음의 스타일 정보 추가
<style>
LI { list-style-type: square }
/* 바깥 항목의 속성 지정 - 사각형 */
LI UL LI { list-style-type: disc }
/* 안쪽 항목의 속성 지정 - 속이 채워진 원형
Navigator에서는 문맥에 따른 속성 지정을
세 단계 이상 적용하지 못하므로
바깥 항목의 스타일이 적용되어 사각형이 됨 */
</style>
43
10장 동적 HTML
리스트의 불릿 스타일 변경 결과
Netscape Navigator의 경우
Internet Explore의 경우
44
10장 동적 HTML
이미지를 열거목록의 불릿으로 사용하기
• ‘불릿 스타일 변경하기’에서 지정했던 스타일 정보를 다음의 스타일
정보로 바꾼다.
<style>
LI { list-style-image:url(images/paw.gif) }
/* 바깥 항목의 속성 지정 */
LI UL LI
{ list-style-image:url(images/arrow.gif) }
/* 안쪽 항목의 속성 지정 */
</style>
45
10장 동적 HTML
이미지를 열거목록의 불릿으로 사용한 결과
46
10장 동적 HTML
10.3 레이어를 이용한 웹 페이지의 구성
10.3.1 레이어(Layer)란?
레이어란?
• 하나의 문서 내에서 여러 곳에 배치가 가능한 웹 페이지의 내용
• 레이어를 사용하면 기존의 HTML 태그로는 불가능했던 웹 페이지 구
성요소의 자유로운 위치 지정이 가능
• 자바스크립트를 이용해 레이어의 이동, 감추기, 크기 변화, 스타일 속
성 수정, 내용 수정, 새로운 레이어 생성 등 레이어의 조작 가능
• Navigator에서는 <LAYER>라는 태그를 이용해 손쉽게 레이어를 만들
수 있지만 Internet Explorer에서 사용할 수 없으므로 CSS를 이용해
레이어를 정의하는 것이 좋다.
47
10장 동적 HTML
10.3.2 레이어 만들기에 필요한 태그 : <DIV>, <SPAN>
<DIV> 태그와 <SPAN> 태그의 역할
• HTML 문서의 한 부분을 묶어 인위적으로 구조를 덧붙이는 역할
• CLASS, ID 속성을 이용해 웹 페이지의 원하는 부분을 묶어 스타일 지
정 가능
<DIV> 태그
• 블록레벨에 사용하여 문서의 블록을 묶는 역할
• <DIV>태그로 묶인 부분의 시작과 끝에서는 줄바꿈
<SPAN>태그
• 인라인(inline)스타일로 사용
예:
<DIV ID=notice>
<P> <SPAN CLASS=warning>경고합니다. </SPAN>
암호를 입력하세요.
</P>
</DIV>
48
10장 동적 HTML
10.3.3 레이어의 정의
레이어의 정의 방법
• ID attribute을 이용해 스타일을 정의하고, 여기에 'position' 속성을 추
가하면 레이어로써 정의됨.
• position 속성
• 레이어 위치에 대한 기준을 지정
• 속성값
absolute
문서 전체에 대한 절대적 위치 지정.
Relative
레이어가 서술된 곳을 기준으로 한 상대적 위치 지정.
• left, top Property을 이용해 레이어 위치 지정
• width, height Property을 이용해 레이어의 크기 지정
49
10장 동적 HTML
레이어 정의의 예 소스코드
<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
10장 동적 HTML
레이어 정의의 결과
51
10장 동적 HTML
절대적 위치와 상대적 위치 비교 소스코드
<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
10장 동적 HTML
절대적 위치와 상대적 위치 비교 결과
53
10장 동적 HTML
레이어를 사용하지 않은 웹 페이지와
레이어를 사용한 웹 페이지의 비교
54
10장 동적 HTML
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장 동적 HTML
10.4.2 레이어 감추기/보이기
'visibility' 속성값을 변경함으로써 화면에 나타나 있던 레이어가 보
이지 않게 하거나, 보이고 있던 레이어를 감출 수 있다.
Netscape Navigator의 visibility 속성 지정 방법
• 감추기 : (레이어 이름).visibility = "hide"
• 보이기 : (레이어 이름).visibility="show"
Internet Explorer의 visibility 속성 지정 방법
• 감추기 : (레이어 이름).style.visibility = "hidden"
• 보이기 : (레이어 이름).style.visibility="visible"
56
10장 동적 HTML
레이어 감추기/보이기 함수 작성
• 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
10장 동적 HTML
• 두 브라우저에서 모두 동작하게 하려면
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
10장 동적 HTML
클릭하면 나타나는 메뉴 소스코드
<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 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
10장 동적 HTML
<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>
61
10장 동적 HTML
클릭하면 나타나는 메뉴 결과
62
10장 동적 HTML
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
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="move1();">
<input type="button" value="퍼스로" onclick="move2();">
<input type="button" value="애들레이드로" onclick="move3();">
</p>
</form>
</body>
</html>
64
10장 동적 HTML
레이어의 위치 바꾸기 결과
65
10장 동적 HTML
팝아웃 메뉴 소스코드
<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 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
10장 동적 HTML
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
10장 동적 HTML
팝아웃 메뉴 결과
69
10장 동적 HTML
10.4.4 애니메이션 효과 내기
레이어의 속성을 연속해 변경함으로써 애니메이션을 만들 수 있다.
JavaScript의 setTimeOut() 함수
• 형식 : setTimeOut("실행할 JavaScript 구문", "시간")
• 두번째 파라미터에 지정한 시간(단위:1000분의 1초)이 지나면
첫번째 파라미터의 JavaScript 구문을 실행
70
10장 동적 HTML
왼쪽에서 미끄러져 나오는 메뉴 소스코드
<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 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
10장 동적 HTML
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
10장 동적 HTML
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
10장 동적 HTML
왼쪽에서 미끄러져 나오는 메뉴 결과
75
10장 동적 HTML
10.5 Netscape와 Explorer의 동적 HTML 비교
76
10장 동적 HTML
Netscape Navigator의 동적 HTML
• 자바스크립트를 기반으로 한 스타일의 지정이나 문서의 레이어 등에
큰 역점
• 스타일시트로 CSS와 함께 JSSS를 사용
• <LAYER> 태그 사용
• 다이나믹 폰트 (Dynamic Font)
• 지정된 글자체를 그대로 사용하여 좀더 보기 좋고 새로운 글씨체
를 사용하여 Web Page 구성가능
• 별도의 글자체 파일을 준비하고 웹 페이지에 글자체 연결
<STYLE TYPE = "text/css">
<! - @fontdef url( "글자체 파일의 URL" )
-- >
</STYLE>
77
10장 동적 HTML
다이나믹 폰트를 사용한 문서의 예
78
10장 동적 HTML
Microsoft사의 동적 HTML
• 문서의 전반에 걸친 다이나믹 HTML에 대해 비중
• 문서가 로딩된 이후에도 HTML의 각 구성 요소들을 다이나믹하게 바
꿀 수 있음.
• 다이나믹 콘텐츠 - 웹 페이지가 로딩된 후에도 문서의 구성 요소들을
동적으로 바꿀 수 있음.
• 데이터 바인딩 - 웹 페이지가 데이터베이스 자료를 읽어올 수 있도록
해줌.
• 멀티미디어 콘트롤 - 이미지 에디터를 사용해 이미지를 변형한 것 같
은 효과
79