제
This presentation is the property of its rightful owner.
Sponsored Links
1 / 21

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


  • 254 Views
  • Uploaded on
  • Presentation posted in: General

제 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

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


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에서 사용되는 이벤트

제 12 장 XHTML


12 xhtml 1 xhtml 2 xhtml html 3 xhtml 4 xhtml

  • 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


12 xhtml 1 xhtml 2 xhtml html 3 xhtml 4 xhtml

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

  • 수 있다.

  • - 적절한 스타일 시트를 이용하여 text/xml 또는 application/xml로 이용 가능

  • - HTML DOM 또는 XML DOM을 지원하는 응용 프로그램에서 사용될 수

  • 있다.

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

  • 수 있다.

  • 2. XHTML과 HTML의 차이점

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

제 12 장 XHTML


12 xhtml 1 xhtml 2 xhtml html 3 xhtml 4 xhtml

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

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

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

제 12 장 XHTML


12 xhtml 1 xhtml 2 xhtml html 3 xhtml 4 xhtml

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

  • 성요소의 경우는 >앞에 ‘ /’를 넣어준다.  Empty 태그 Token

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

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

  • XHTML이 지켜야 할 문법

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

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

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

  • 예) <table width=“100%”>

제 12 장 XHTML


12 xhtml 1 xhtml 2 xhtml html 3 xhtml 4 xhtml

  • XHTML에서 생략할 수 없는 속성, p. 304, 표 12-2 참조

  • name 속성 대신 id 속성을 사용한다.

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

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

  • 소는 반드시 사용되어야 한다.

제 12 장 XHTML


12 xhtml 1 xhtml 2 xhtml html 3 xhtml 4 xhtml

  • [예제 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


12 xhtml 1 xhtml 2 xhtml html 3 xhtml 4 xhtml

  • 예제 12-1의 실행 결과

제 12 장 XHTML


12 xhtml 1 xhtml 2 xhtml html 3 xhtml 4 xhtml

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

  • (1) Strict Mode DTD

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

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

  • 정의로 구성)

  • - 사용 방법

(2) Transitional Mode DTD

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

- 사용 방법

제 12 장 XHTML


12 xhtml 1 xhtml 2 xhtml html 3 xhtml 4 xhtml

(3) Frameset Mode DTD

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

사용

- 사용 방법

  • 4. XHTML로의 업그레이드

  • XHTML로의 업그레이드 순서

  • (1) 문서에 DTD 선언을 추가

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

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

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

제 12 장 XHTML


12 xhtml 1 xhtml 2 xhtml html 3 xhtml 4 xhtml

  • 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 xhtml 1 xhtml 2 xhtml html 3 xhtml 4 xhtml

  • 예제 12-2의 실행 결과

제 12 장 XHTML


12 xhtml 1 xhtml 2 xhtml html 3 xhtml 4 xhtml

  • [예제 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


12 xhtml 1 xhtml 2 xhtml html 3 xhtml 4 xhtml

  • 예제 12-4의 실행 결과

제 12 장 XHTML


12 xhtml 1 xhtml 2 xhtml html 3 xhtml 4 xhtml

  • 6. XHTML 표준 속성

  • XHTML 태그들이 갖는 속성

  • - 공통 속성

제 12 장 XHTML


12 xhtml 1 xhtml 2 xhtml html 3 xhtml 4 xhtml

- Language 속성

- Keyboard 속성

제 12 장 XHTML


12 xhtml 1 xhtml 2 xhtml html 3 xhtml 4 xhtml

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

  • 윈도우 이벤트

  • 폼 이벤트

제 12 장 XHTML


12 xhtml 1 xhtml 2 xhtml html 3 xhtml 4 xhtml

  • 키보드 이벤트

  • 마우스 이벤트

제 12 장 XHTML


12 xhtml 1 xhtml 2 xhtml html 3 xhtml 4 xhtml

  • [예제 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


12 xhtml 1 xhtml 2 xhtml html 3 xhtml 4 xhtml

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


12 xhtml 1 xhtml 2 xhtml html 3 xhtml 4 xhtml

  • 예제 12-4의 실행 결과

제 12 장 XHTML


  • Login