제 12 장 xhtml 1. xhtml 이란 ? 2. xhtml 과 html 의 차이점 3. xhtml 문서의...

21
제 12 제 XHTML 1 제 12 제 XHTML 1. XHTML 제제 ? 2. XHTML 제 HTML 제 제제제 3. XHTML 제제제 제제제제제 제제 4. XHTML 제제 제제제제제 5. XHTML 1.0 제제제제 6. XHTML 제제 제제 7. XHTML 제제 제제제제 제제제

Upload: george-foster

Post on 03-Jan-2016

81 views

Category:

Documents


5 download

DESCRIPTION

제 12 장 XHTML 1. XHTML 이란 ? 2. XHTML 과 HTML 의 차이점 3. XHTML 문서의 구성요소와 문법 4. XHTML 로의 업그레이드 5. XHTML 1.0 구성요소 6. XHTML 표준 속성 7. XHTML 에서 사용되는 이벤트. 1. XHTML 이란 HTML 이 XML 로 가기 위한 다리 역할  XHTML XML 의 장점 - 컨텐츠 정보와 스타일 정보를 분리시킬 수 있다 . XHTML - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: 제  12  장 XHTML 1. XHTML 이란 ? 2. XHTML 과  HTML 의 차이점 3. XHTML  문서의 구성요소와 문법 4. XHTML 로의 업그레이드

제 12 장 XHTML 1

제 12 장

XHTML

1. XHTML 이란 ?

2. XHTML 과 HTML 의 차이점

3. XHTML 문서의 구성요소와 문법

4. XHTML 로의 업그레이드

5. XHTML 1.0 구성요소

6. XHTML 표준 속성

7. XHTML 에서 사용되는 이벤트

Page 2: 제  12  장 XHTML 1. XHTML 이란 ? 2. XHTML 과  HTML 의 차이점 3. XHTML  문서의 구성요소와 문법 4. XHTML 로의 업그레이드

제 12 장 XHTML 2

1. XHTML 이란

• HTML 이 XML 로 가기 위한 다리 역할 XHTML

• XML 의 장점 - 컨텐츠 정보와 스타일 정보를 분리시킬 수 있다 .

• XHTML

- XHTML(eXtended HTML) 은 기존의 HTML 명령어들을 그대로 유지하

면서 XML 형식에 맞도록 필요한 요소들을 가미한 언어체계이다 .

- XHTML 은 HTML 4.0 의 기능을 수용하며 , 기존의 브라우저에서 사용할

수 있으며 , XML 응용으로 개발되었다 .

- XML 의 한 응용으로써 HTML 의 기능을 가지는 마크업 언어

- XML + HTML = XHTML

• XHTML 의 특징 - XHTML 문서는 XML 에 따른다 .

Page 3: 제  12  장 XHTML 1. XHTML 이란 ? 2. XHTML 과  HTML 의 차이점 3. XHTML  문서의 구성요소와 문법 4. XHTML 로의 업그레이드

제 12 장 XHTML 3

- 미디어 타입은 text/html 을 사용하며 , 기존의 HTML 브라우저를 사용할 수 있다 .

- 적절한 스타일 시트를 이용하여 text/xml 또는 application/xml 로 이용 가능 - HTML DOM 또는 XML DOM 을 지원하는 응용 프로그램에서 사용될 수 있다 .

- XGTML 1.0 을 준수하는 문서들은 다양한 XHTML 환경에서 사용되어질 수 있다 .

2. XHTML 과 HTML 의 차이점

• XHTML 은 태그 내에 태그를 포함할 때 중첩을 금한다 .

<b><u> 중첩을 금합니다 .</u></b>

Page 4: 제  12  장 XHTML 1. XHTML 이란 ? 2. XHTML 과  HTML 의 차이점 3. XHTML  문서의 구성요소와 문법 4. XHTML 로의 업그레이드

제 12 장 XHTML 4

• XHTML 은 문법을 지켜야 한다 .

<html> <head> … </head> <body> … </body></html>

• XHTML 구성요소 이름은 반드시 소문자 이어야 한다 .

<body> <p> 문장… </p></body>

• XHTML 구성요소는 반드시 End 태그로 닫혀야 한다 .

<p> 환영합니다 . </p>

Page 5: 제  12  장 XHTML 1. XHTML 이란 ? 2. XHTML 과  HTML 의 차이점 3. XHTML  문서의 구성요소와 문법 4. XHTML 로의 업그레이드

제 12 장 XHTML 5

• Empty 구성요소 역시 닫혀져야 한다 . End 태그 사용이 금지된 구

성요소의 경우는 > 앞에 ‘ /’ 를 넣어준다 . Empty 태그 Token줄 바꿈 태그 <hr />수평선을 그리는 태그 <hr />이미지를 삽입하는 태그 <img src=“symbol.gif” alt=“ 학교마크” />

• End 태그를 사용하지 않는 구성요소 , p. 303, 표 12-1 참조

3. XHTML 문서의 구성요소와 문법

• XHTML 이 지켜야 할 문법 - 모든 속성 이름은 반드시 소문자이어야 한다 .

- 모든 속성값은 반드시 따옴표로 묶어야 한다 .

- 속성값은 생략될 수 없다 .

예 ) <table width=“100%”>

Page 6: 제  12  장 XHTML 1. XHTML 이란 ? 2. XHTML 과  HTML 의 차이점 3. XHTML  문서의 구성요소와 문법 4. XHTML 로의 업그레이드

제 12 장 XHTML 6

• XHTML 에서 생략할 수 없는 속성 , p. 304, 표 12-2 참조• name 속성 대신 id 속성을 사용한다 .

<img src=“picture.gif” id=“picture1” />

• 구성요소마다 문자 세트를 다르게 지정할 수 있다 .

<div lang=“ko” xml:lang=“ko”> 한글로 지정했습니다 !</div>

• <!DOCTYPE>, <html>, <head>. <body>, <title> 등의 5 가지 구성요

소는 반드시 사용되어야 한다 .<!DOCTYPE…> <!-- DOCTYPE 선언부분 --><html> <head> <-- head 부분 --> <title> … </title> </head> <body> … </body> <!-- body 부분 --></html>

Page 7: 제  12  장 XHTML 1. XHTML 이란 ? 2. XHTML 과  HTML 의 차이점 3. XHTML  문서의 구성요소와 문법 4. XHTML 로의 업그레이드

제 12 장 XHTML 7

• [ 예제 12-1] 기본적인 구성요소 5 가지를 포함한 XHTML 문서

▶ ch12-1.html

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

   <!-- DTD 선언하는 곳 -->

3 <html>

4   <head>

5      <title> 문서 제목 </title>

6   </head>

7   <body>

8         브라우저에 표시할 내용을 넣는 곳 9   </body>

10 </html>

Page 8: 제  12  장 XHTML 1. XHTML 이란 ? 2. XHTML 과  HTML 의 차이점 3. XHTML  문서의 구성요소와 문법 4. XHTML 로의 업그레이드

제 12 장 XHTML 8

• 예제 12-1 의 실행 결과

Page 9: 제  12  장 XHTML 1. XHTML 이란 ? 2. XHTML 과  HTML 의 차이점 3. XHTML  문서의 구성요소와 문법 4. XHTML 로의 업그레이드

제 12 장 XHTML 9

• XHTML 에서 선언 가능한 세 가지 DTD

(1) Strict Mode DTD

- 문법적 오류를 전혀 허용하지 않는 DTD

- W3C 의 CSS 를 사용 ( 스타일이 적용될 요소 이름과 그 요소에 적용될 스타일

정의로 구성 )

- 사용 방법

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd>

(2) Transitional Mode DTD

- deprecated 구성요소의 사용을 허용 - 사용 방법

<!DOCTYPE html PUBLIC “--//W3C//DTD XHTML 1.0 Transitional//EN”http://www.w3.org/TR/xhtml/DTD/xhtml1-Transitional.dtd>

Page 10: 제  12  장 XHTML 1. XHTML 이란 ? 2. XHTML 과  HTML 의 차이점 3. XHTML  문서의 구성요소와 문법 4. XHTML 로의 업그레이드

제 12 장 XHTML 10

(3) Frameset Mode DTD

- 브라우저 창을 2 개 이상 분할하여 사용하고 싶을 때 frameset 페이지에 사용 - 사용 방법

<!DOCTYPE html PUBLIC “--//W3C//DTD XHTML 1.0 frameset//EN”http://www.w3.org/TR/xhtml1/DTD/xhtml-Frameset.dtd>

4. XHTML 로의 업그레이드

• XHTML 로의 업그레이드 순서 (1) 문서에 DTD 선언을 추가

(2) 구성요소와 속성 이름을 모두 소문자로 변경

(3) 모든 속성값을 따옴표 속에 넣는다 .

(4) Empty 태그는 empty 태그 토큰을 넣어준다 .

Page 11: 제  12  장 XHTML 1. XHTML 이란 ? 2. XHTML 과  HTML 의 차이점 3. XHTML  문서의 구성요소와 문법 4. XHTML 로의 업그레이드

제 12 장 XHTML 11

5. XHTML 1.0 구성요소

• XHTML 구성요소 , p. 287, 표 12-3• [ 예제 12-2] 헤더 태그 사용과 링크 방법 ▶ ch12-2.html

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 3 <html> 4 <head> <title> 헤더와 링크 </title>  </head> 5 <body> 6    <h1> 학교 탐방 </h1> 7    <p><strong> 학교이름 </strong> 을 클릭하세요 </p> 8    <p><a href="http://www.cu.ac.kr"> 대구가톨릭대학교 </a></p> 9    <p><a href="http://www.knu.ac.kr"> 경북대학교 </a></p> 10   <p><a href="http://www.snu.ac.kr"> 서울대학교 </a></p> 11 </body> 12 </html>

Page 12: 제  12  장 XHTML 1. XHTML 이란 ? 2. XHTML 과  HTML 의 차이점 3. XHTML  문서의 구성요소와 문법 4. XHTML 로의 업그레이드

제 12 장 XHTML 12

• 예제 12-2 의 실행 결과

Page 13: 제  12  장 XHTML 1. XHTML 이란 ? 2. XHTML 과  HTML 의 차이점 3. XHTML  문서의 구성요소와 문법 4. XHTML 로의 업그레이드

제 12 장 XHTML 13

• [ 예제 12-3] 이미지 링크

▶ ch12-3.html

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4   <head> 5     <title> 이미지 링크 </title>   6   </head> 7   <body> 8     <p align="center"> 좋아하는 것 ?<br /><br /> 9      <a href="comic.html"> 10        <img src="comic.jpg" height="50" width="60" alt="age" /></a><br /> 11     <a href="sports.html"> 12        <img src="soccer.jpg" height="70" width="60" alt="age" /></a><br /> 13     <a href="mobile.html"> 14        <img src="mobile.jpg" height="70" width="60" alt="age" /></a> 15    </p> 16 </body> 17 </html>

Page 14: 제  12  장 XHTML 1. XHTML 이란 ? 2. XHTML 과  HTML 의 차이점 3. XHTML  문서의 구성요소와 문법 4. XHTML 로의 업그레이드

제 12 장 XHTML 14

• 예제 12-4 의 실행 결과

Page 15: 제  12  장 XHTML 1. XHTML 이란 ? 2. XHTML 과  HTML 의 차이점 3. XHTML  문서의 구성요소와 문법 4. XHTML 로의 업그레이드

제 12 장 XHTML 15

6. XHTML 표준 속성

• XHTML 태그들이 갖는 속성 - 공통 속성

속 성 값 설 명class class_name 삽입되거나 링크된 CSS 파일에 지정된 class

selector

id id_name 삽입되거나 링크된 CSS 파일에 지정된 id selector

style style_Properties

태그 속에 직접 지정하는 Inline Style

title tooltip_text mouseOver 시 Tool tip 을 보여준다 .

Page 16: 제  12  장 XHTML 1. XHTML 이란 ? 2. XHTML 과  HTML 의 차이점 3. XHTML  문서의 구성요소와 문법 4. XHTML 로의 업그레이드

제 12 장 XHTML 16

- Language 속성속 성 값 설 명

dir ltr 또는 rtl 텍스트가 진행하는 방향lang language_code 문서에 사용할 언어 코드

- Keyboard 속성

속 성 값 설 명accesskey character 지정한 글자를 Alt 키와 함께 눌렀을 때

선택되는 링크tabindex number Tab 키를 눌렀을 때 선택되는 항목 순서

Page 17: 제  12  장 XHTML 1. XHTML 이란 ? 2. XHTML 과  HTML 의 차이점 3. XHTML  문서의 구성요소와 문법 4. XHTML 로의 업그레이드

제 12 장 XHTML 17

7. XHTML 에서 사용되는 이벤트

• 윈도우 이벤트속 성 값 설 명

onload Scripting 문서가 다 읽혀졌을 때onunload Scripting 보고 있던 문서에서 빠져 나갈 때

• 폼 이벤트속 성 값 설 명

onchange Scripting Drop-down 박스에서 어떤 항목을 선택했을 때onsubmit Scripting 확인 단추를 누르거나 키보드 엔터키를 눌러서

값을 전송할 때

onreset Scripting 재입력 단추를 눌렀을 때onselect Scripting 브라우저 창에서 텍스트나 이미지 등을 선택할 때onblur Scripting 커서가 입력란에서 빠져 나갔을 때onfocus Scripting 커서가 입력란에 들어갔을 때

Page 18: 제  12  장 XHTML 1. XHTML 이란 ? 2. XHTML 과  HTML 의 차이점 3. XHTML  문서의 구성요소와 문법 4. XHTML 로의 업그레이드

제 12 장 XHTML 18

• 키보드 이벤트속 성 값 설 명

onkeydown Scripting 키를 눌렀을 때Onkeypress Scripting 키를 눌렀다 떴을 때onkeyup Scripting 키를 뗐을 때

• 마우스 이벤트속 성 값 설 명

onclick Scripting 마우스 단추를 눌렀다 뗐을 때ondblclick Scripting 마우스 단추를 연속으로 두 번 물렀다 뗐을 때onmousedown Scripting 마우스 단추를 눌렀을 때onmousemove Scripting 마우스 커서가 움직일 때onmouseover Scripting 마우스 커서가 어떤 영역 속으로 들어 갔을 때onmouseout Scripting 마우스 커서가 어떤 영역 속에서 빠져 나올 때onmouseup Scripting 마우스 단추를 누른 상태에서 단추를 놓았을 때

Page 19: 제  12  장 XHTML 1. XHTML 이란 ? 2. XHTML 과  HTML 의 차이점 3. XHTML  문서의 구성요소와 문법 4. XHTML 로의 업그레이드

제 12 장 XHTML 19

• [ 예제 12-4] input 태그와 onclick( ) 이벤트 사용 예 ▶ ch12-4.html 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 3 <html> 4 <head> 5 <meta http-equiv="Context-Type" 6 content="text/html; charset="ks_c_5601-1987" /> 7 <title> 이미지 이동 </title> 8 </head> 9 <div id="imgdiv" style="position:relative"><img src="myp.jpg"></div> 10 <!-- 이미지를 이동하기 위한 스크립터 --> 11 <script> 12 function move5( ){ 13 if (!document.all) return; 14 if (imgdiv.style.pixelLeft<600) imgdiv.style.pixelLeft+=5; 15 moveid2=setTimeout("move5( )",10); 16 }

Page 20: 제  12  장 XHTML 1. XHTML 이란 ? 2. XHTML 과  HTML 의 차이점 3. XHTML  문서의 구성요소와 문법 4. XHTML 로의 업그레이드

제 12 장 XHTML 20

17 function returnit2( ){ 18 if (!document.all) return; 19 clearTimeout(moveid2); 20 imgdiv.style.pixelLeft=0; 21 } 22 </script> 23

24 <form> 25 <input type="button" value=" 이동 " onclick="move5( )" /> 26 <input type="button" value=" 원위치 " onclick="returnit2( )" /> 27 </form> 28 </html>

Page 21: 제  12  장 XHTML 1. XHTML 이란 ? 2. XHTML 과  HTML 의 차이점 3. XHTML  문서의 구성요소와 문법 4. XHTML 로의 업그레이드

제 12 장 XHTML 21

• 예제 12-4 의 실행 결과