1 / 79

10 장 동적 HTML (Dynamic HTML)

10 장 동적 HTML (Dynamic HTML). 10.1 동적 HTML 의 개요 10.1.1 동적 HTML 의 특징과 기능 기존의 HTML 정적 동적인 기능을 추가하기 위해 자바 애플릿 , CGI 등을 사용 자바 애플릿 자바 프로그래밍을 익혀야 하며 , 애플릿이 실행되기까지의 시간도 오래 걸림 . CGI 데이터베이스의 내용을 사용자의 요구에 따라 HTML 문서로 만들어 보여 주는 것 . 입력을 서버에서 처리하므로 서버에 부담 .

mabli
Download Presentation

10 장 동적 HTML (Dynamic HTML)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. 10장 동적 HTML (Dynamic HTML)

  2. 10.1 동적 HTML의 개요 10.1.1 동적 HTML의 특징과 기능 • 기존의 HTML • 정적 • 동적인 기능을 추가하기 위해 자바 애플릿, CGI 등을 사용 • 자바 애플릿 • 자바 프로그래밍을 익혀야 하며, 애플릿이 실행되기까지의 시간도 오래 걸림. • CGI • 데이터베이스의 내용을 사용자의 요구에 따라 HTML 문서로 만들어 보여 주는 것. • 입력을 서버에서 처리하므로 서버에 부담. • 새로운 HTML 문서를 구성하는 데에 시간이 걸림. • 웹 페이지의 구성 요소를 자유롭게 배치할 수 없음. 2

  3. 동적 HTML • 기존 HTML의 단점을 개선해 동적인 웹 페이지를 만들 수 있도록 하기 위한 것 • 영어로 Dynamic HTML, 또는 약자로 DHTML • HTML문서 자체의 기능이므로 브라우저에서 실행되어 서버의 부담이 적고, 이벤트에 대한 즉각적 반응이 가능 • 웹 페이지의 구성 요소의 위치를 자유롭게 지정. • 자바 애플릿이나 CGI보다 구현이 쉬움. • Netscape Navigator와 Internet Explorer에서 서로 지원하는 방식이 달라 호환이 잘 되지 않는 것이 단점 3

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

  5. 실제 웹 사이트를 통해 살펴 본 동적 HTML의 기능 • SuperFly Macromedia사의 동적 HTML 홈페이지 에서 제공하는 예제 • 애니메이션- 날아 다니는 파리 • Rollover - 마우스 포인터를 가까이하면 불이 켜지는 메뉴 • 내용 변환 - 마우스 포인터가 가리키는 메뉴에 따라 바뀌는 설명 Super Fly 애니메이션 5

  6. 풀다운(Pulldown) 메뉴 - 카탈로그(CATALOGUE)의 메뉴 의류 카탈로그 6

  7. 드롭다운(Dropdown) 리스트 - 플래너(Planner)에서 날씨, 할 일, 성별을 선택 • 배경의 애니메이션 - 움직이는 구름 플래너 7

  8. 드래그 & 드롭 - 사람 모양의 그림에 옷이나 신발, 가발을 드래그하여 입히기 드레싱 룸(Dressing Room) 8

  9. 팩맨 게임 ( http://www1.nisiq.net/~jimmeans/pman/, Netscape 전용 ) • 키보드 입력 동적 HTML로 만든 팩맨 게임 9

  10. 10.1.2 동적 HTML의 구성 요소 • 문서 객체모델 (Document Object Model) • 브라우저와 브라우저가 읽어 들인 웹 페이지의 각 요소들-텍스트, 이미지, 폼 등-에 이름을 붙여 이들을 객체로 정의함으로써 브라우저와 웹 페이지의 요소들을 접근하려는 것 • Netscape사의 JavaScript에서 사용되기 시작한 개념 • 브라우저에 해당하는 'window' 객체를 가장 상위 객체로 가지며, 그 아래에 'frame', 'document', 'history', 'location' 등의 객체가 정의되어 있음. • 브라우저가 읽어 들인 웹 페이지가 'document' 객체 10

  11. Style Sheet • 웹 페이지의 외형을 제어하기 위한 언어 • 웹 페이지의 내용에 하나하나 스타일을 지정하지 않고 태그 에 따라 별도의 스타일 정보를 정의하여 종류별로 일괄적인 스타일 적용 • 웹 페이지의 구성 요소의 위치 자유롭게 지정 • 스크립트 언어 (Script Language) • 어떠한 객체에 대한 특성이나 행동에 대해 기술해 놓은 것 • 객체의 상태를 바꾸는 역할 • Netscape Navigator는 JavaScript를, Internet Explorer는 JavaScript와 유사한 JScript와 VBScript 지원 11

  12. 10.2 스타일시트를 이용한 문서의 작성 10.2.1 스타일 시트란? • 스타일 시트 • 문서의 외형을 구체적으로 명시하기 위한 문장의 집합 • 스타일 시트의 기능과 장점 • 웹 페이지 구성 요소에 크기, 색깔 등의 스타일을 일괄적으로 적용 • 글자 간격, 문단 간격, 위치 등 HTML 태그로는 제어할 수 없는 부분을 제어. • 문서의 구조와 스타일의 분리 • 스타일의 변경과 웹 페이지의 일관성 유지가 용이 12

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

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

  15. 스타일 시트 사용의 장점 • 문서의 내용에서 스타일 정보가 분리 => 내용을 알아보기 쉽다. • 똑같은 스타일 정보를 반복해 쓸 필요가 없다. • 스타일 변경시 스타일 정보만을 바꾸어 주면 되므로 변경이 쉽고 빠르다. • Style Sheet를 정의하기 위한 문법의 종류 • CSS(Cascading Style Sheet) • 스타일 정보를 속성(Property)과 속성값(Property-value)으로 지정 • 스타일 언어의 표준 • JSSS(JavaScript Style Sheet) • JavaScript로 스타일 정보를 제어 • Netscape Navigator 4.0이상에서 채택 15

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

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

  18. 10.2.3 CSS를 이용한 스타일 정의 방법 (1) 스타일 정의의 기본 형식 • <STYLE> 태그 안에 다음과 같은 형식으로 스타일 지정 • 선택자(selector) : 스타일을 지정하고자 하는 HTML 태그, 또는 CLASS나 ID 이름 • 선언(declaration) : 속성(property)과 속성값(property value)으로 짝지워진 스타일 정보의 리스트 • 속성과 속성값은 콜론(:)으로 연결 18

  19. 태그에 스타일을 지정 하기 전의 예제 문서 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> 20

  21. <hr WIDTH="100%"> <h2>여행 정보</h2> <h3>Questions and Answers</h3> <p>간단한 질문과 답을 모아 보았습니다. </p> <p>Q: &quot;유레일 패스&quot;란? </p> <p>이것은 일정기간 동안 유럽의 모든 기차를 무제한적으로 이용할 수 있는 티켓이며, 유럽밖의 거주자들만 구입할 수 있습니다. 비슷한 종류로 일정 기간동안 횟수를 제한하거나 기차를 이용할 수 있는 국가를 몇 개로 제한해 놓은 유로 패스 등도 있으니 여행 기간, 장소에 따라 신중히 선택을 하는 것이 좋습니다.</p> <p>Q: 유럽에서는 정말로 물을 사서 마셔야 하나요?</p> <p>네. 유럽에서는 대부분 물을 사야 합니다. 식당에서도 물을 그냥 주지는 않지요. 그리고, 물을 살 때는 탄산이 들어있지 않은지 확인해 보고 사세요.</p> </body></html> 21

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

  23. (2) 스타일을 지정하는 여러 가지 방법 • 하나의 태그에 여러 가지 속성 지정 • 선언(declaration)에 지정하고자 하는 속성들을 각각 세미콜론(;)으로 구분하여 나열 • 예 : H3 태그에 배경색을 남색으로, 글씨를 흰색으로 지정 H3 { background:navy; color:white } • 여러 태그에 동일한 속성 지정 • 선택자에 같은 스타일을 지정하고자 하는 HTML 태그 이름을 콤마(,)로 구분하여 나열 • 예 : H1, H2 태그를 배경색을 남색으로, 글씨를 흰색으로 지정 H1, H2 { background:skyblue } 23

  24. 속성의 상속 (Inheritance) • 어떠한 태그에 지정된 속성은 그 안에 사용된 태그에도 적용됨. • 예 : <P>태그의 글자 색을 회색으로 지정하면 <P>태그 안에 <EM>태그를 사용했을 때 <EM>태그 안의 글자도 회색이 되므로 <P>태그 안에 사용된 <EM>태그에 대해 회색으로 지정할 필요는 없음. • 문맥에 따른 스타일 지정 (Contextual Element) • 속성을 지정하는 태그가 어떤 태그 안에 사용되는가에 따라 스타일을 다르게 지정 • 선택자에 가장 바깥쪽에 사용되는 태그로부터 안쪽에 사용되는 태그순으로 태그 이름을 공백(space)으로 구분하여 나열 • 예 : <P>태그 안의 <EM>태그에 대해서만 굵게 하고, 다른 부분에 사용된 <EM>태그에는 별도의 스타일을 지정하지 않음. P EM { font-weight:bold } 24

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

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

  27. (3) CLASS 속성 또는 ID 속성을 이용한 스타일 지정 • CLASS 속성과 ID 속성 • CLASS 속성 : 같은 태그를 사용한 내용을 종류별로 구분하기 위해 사용 • ID 속성 : 어떤 특정한 하나의 태그만을 구별하기 위해 사용 • 같은 CLASS 이름을 갖는 태그는 여러 개 있을 수 있지만 ID 이름은 웹 페이지 내에 단 한번만 사용 • 모든 태그의 속성으로 가능 • 예 : 웹 페이지의 BODY 부분에서 다음과 같이 속성을 넣음. <P CLASS=answer> .... </P> <P ID=intro> .... </P> • HTML 태그의 속성에 스타일이 정의된 CLASS나 ID 이름을 지정하면 그에 해당하는 Style이 적용 27

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

  29. ID의 스타일 정의 • 문서내에서 어떤 스타일을 단 한번만 적용하고자 할 경우 사용 • ID의 스타일 정의 • 선택자로 '#' 다음에 ID 이름을 씀 • 예 : ID 속성이 intro인 태그에 스타일 지정 #intro { font-style:italic } 29

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

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

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

  33. 텍스트 33

  34. (2) 블록레벨 항목(Block-level Element) 관련 속성 • 블록레벨 항목 • HTML 문서의 한 부분이 블록을 이루어서 표현되는 항목 • 하나의 문단을 구성하는 <P> 태그의 경우 <P>와 </P>로 둘러싸인 영역이 하나의 블록 • 박스로 구분하여 취급 • 각 박스는 다음과 같은 요소로 구성 • 여백(margin) : 부모 항목과 경계 사이의 간격 • 경계(border) : 블록의 외곽 특성 • 채워넣기(padding) : 경계와 블록의 내용 사이의 간격 • 내용(content) 34

  35. 블록의 경계 스타일 • 브라우저에 따라 같은 속성이라도 다르게 보임. Netscape Navigator의 경계 종류와 모양 35

  36. Internet Explorer의 경계 종류와 모양 36

  37. 박스 관련 속성 37

  38. 경계 속성의 지정 • ‘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. 경계 속성의 지정 결과 39

  40. (3) 열거목록 관련 속성 • 열거목록의 스타일 • 불릿과 번호 스타일 • list-style-type 속성 기존의 불릿 모양(disk, circle, square)이나 번호(알파벳, 아라비 아숫자, 로마자) 중에서 원하는 스타일로 지정. • list-style-image 속성GIF나 JPEG 이미지를 불릿으로 사용Internet Explorer에서만 적용 • 불릿과 번호의 위치 • list-style-position 속성LI 항목의 블록 안에 또는 밖에 위치 지정 40

  41. 열거목록 관련 속성 41

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

  43. 불릿 스타일 변경하기 • 열거 목록의 소스코드에 다음의 스타일 정보 추가 <style> LI { list-style-type: square } /* 바깥 항목의 속성 지정 - 사각형 */ LI UL LI { list-style-type: disc } /* 안쪽 항목의 속성 지정 - 속이 채워진 원형 Navigator에서는 문맥에 따른 속성 지정을 세 단계 이상 적용하지 못하므로 바깥 항목의 스타일이 적용되어 사각형이 됨 */ </style> 43

  44. 리스트의 불릿 스타일 변경 결과 Netscape Navigator의 경우 Internet Explore의 경우 44

  45. 이미지를 열거목록의 불릿으로 사용하기 • ‘불릿 스타일 변경하기’에서 지정했던 스타일 정보를 다음의 스타일 정보로 바꾼다. <style> LI { list-style-image:url(images/paw.gif) } /* 바깥 항목의 속성 지정 */ LI UL LI { list-style-image:url(images/arrow.gif) } /* 안쪽 항목의 속성 지정 */ </style> 45

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

  47. 10.3 레이어를 이용한 웹 페이지의 구성 10.3.1 레이어(Layer)란? • 레이어란? • 하나의 문서 내에서 여러 곳에 배치가 가능한 웹 페이지의 내용 • 레이어를 사용하면 기존의 HTML 태그로는 불가능했던 웹 페이지 구성요소의 자유로운 위치 지정이 가능 • 자바스크립트를 이용해 레이어의 이동, 감추기, 크기 변화, 스타일 속성 수정, 내용 수정, 새로운 레이어 생성 등 레이어의 조작 가능 • Navigator에서는 <LAYER>라는 태그를 이용해 손쉽게 레이어를 만들 수 있지만 Internet Explorer에서 사용할 수 없으므로 CSS를 이용해 레이어를 정의하는 것이 좋다. 47

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

  49. 10.3.3 레이어의 정의 • 레이어의 정의 방법 • ID attribute을 이용해 스타일을 정의하고, 여기에 'position' 속성을 추가하면 레이어로써 정의됨. • position 속성 • 레이어 위치에 대한 기준을 지정 • 속성값absolute 문서 전체에 대한 절대적 위치 지정. Relative레이어가 서술된 곳을 기준으로 한 상대적 위치 지정. • left, top Property을 이용해 레이어 위치 지정 • width, height Property을 이용해 레이어의 크기 지정 49

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

More Related