1 / 21

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

제 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

george-foster
Download Presentation

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

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. 제 12 장 XHTML 1. XHTML이란? 2. XHTML과 HTML의 차이점 3. XHTML 문서의 구성요소와 문법 4. XHTML로의 업그레이드 5. XHTML 1.0 구성요소 6. XHTML 표준 속성 7. 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에 따른다. 제 12 장 XHTML

  3. - 미디어 타입은 text/html을 사용하며, 기존의 HTML 브라우저를 사용할 • 수 있다. • - 적절한 스타일 시트를 이용하여 text/xml 또는 application/xml로 이용 가능 • - HTML DOM 또는 XML DOM을 지원하는 응용 프로그램에서 사용될 수 • 있다. • - XGTML 1.0을 준수하는 문서들은 다양한 XHTML 환경에서 사용되어질 • 수 있다. • 2. XHTML과 HTML의 차이점 • XHTML은 태그 내에 태그를 포함할 때 중첩을 금한다. 제 12 장 XHTML

  4. XHTML은 문법을 지켜야 한다. • XHTML 구성요소 이름은 반드시 소문자 이어야 한다. • XHTML 구성요소는 반드시 End 태그로 닫혀야 한다. 제 12 장 XHTML

  5. Empty 구성요소 역시 닫혀져야 한다. End 태그 사용이 금지된 구 • 성요소의 경우는 >앞에 ‘ /’를 넣어준다.  Empty 태그 Token • End 태그를 사용하지 않는 구성요소, p. 303, 표 12-1 참조 • 3. XHTML 문서의 구성요소와 문법 • XHTML이 지켜야 할 문법 • - 모든 속성 이름은 반드시 소문자이어야 한다. • - 모든 속성값은 반드시 따옴표로 묶어야 한다. • - 속성값은 생략될 수 없다. • 예) <table width=“100%”> 제 12 장 XHTML

  6. XHTML에서 생략할 수 없는 속성, p. 304, 표 12-2 참조 • name 속성 대신 id 속성을 사용한다. • 구성요소마다 문자 세트를 다르게 지정할 수 있다. • <!DOCTYPE>, <html>, <head>. <body>, <title> 등의 5가지 구성요 • 소는 반드시 사용되어야 한다. 제 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> 제 12 장 XHTML

  8. 예제 12-1의 실행 결과 제 12 장 XHTML

  9. XHTML에서 선언 가능한 세 가지 DTD • (1) Strict Mode DTD • - 문법적 오류를 전혀 허용하지 않는 DTD • - W3C의 CSS를 사용 (스타일이 적용될 요소 이름과 그 요소에 적용될 스타일 • 정의로 구성) • - 사용 방법 (2) Transitional Mode DTD - deprecated 구성요소의 사용을 허용 - 사용 방법 제 12 장 XHTML

  10. (3) Frameset Mode DTD - 브라우저 창을 2개 이상 분할하여 사용하고 싶을 때 frameset 페이지에 사용 - 사용 방법 • 4. XHTML로의 업그레이드 • XHTML로의 업그레이드 순서 • (1) 문서에 DTD 선언을 추가 • (2) 구성요소와 속성 이름을 모두 소문자로 변경 • (3) 모든 속성값을 따옴표 속에 넣는다. • (4) Empty 태그는 empty 태그 토큰을 넣어준다. 제 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> 제 12 장 XHTML

  12. 예제 12-2의 실행 결과 제 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> 제 12 장 XHTML

  14. 예제 12-4의 실행 결과 제 12 장 XHTML

  15. 6. XHTML 표준 속성 • XHTML 태그들이 갖는 속성 • - 공통 속성 제 12 장 XHTML

  16. - Language 속성 - Keyboard 속성 제 12 장 XHTML

  17. 7. XHTML에서 사용되는 이벤트 • 윈도우 이벤트 • 폼 이벤트 제 12 장 XHTML

  18. 키보드 이벤트 • 마우스 이벤트 제 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 } 제 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> 제 12 장 XHTML

  21. 예제 12-4의 실행 결과 제 12 장 XHTML

More Related