10 장 동적 HTML (Dynamic HTML)

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

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

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

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

<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

속성의 상속 (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 속성 • 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 이름을 씀 • 예 : 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의 경계 종류와 모양 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의 경우 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> • <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

10 장 동적 HTML (Dynamic HTML)