XHTML이란 HTML과 XML의 조합으로 탄생한 것으로 여러분이 HTML에 일단 익숙하다는 전제하에 이글은 시작된다. 또한 여러분은 XML과 DTD에 대해서 알아야한다. 여기서는 HTML 버전 4.0과 XHTML 버전 1.0을 비교를 하면서 진행하겠다.
XHTML
XHTML은 XML의 규격에 맞게 HTML을 재구성한 것으로 HTML언어의 장점과 XML의 장점을 조합하여 강력함과 유연성을 함께 제공한다는 이미지를 띈다. XHTML은 엄격한 규격을 지켜야한다. 적합한 XHTML문서를 만들기 위해서는 아래의 룰들을 지켜야한다.
모든 태그는 반드시 닫혀야한다.
HTML문서에서 <Table>를 열고 </Table>로 닫아주지 않아도 브라우져에 표시가 되었다. 이것은 개발자로하여금 긴장의 강도를 낮추는 결과를 보였다. 이러한 것들은 XHTML에서는 허용되지 않는다. 반드시 모든 태그들은 정확히 중첩되어야 하고 반드시 닫혀야 한다.
다음은 HTML 4.0의 테이블 문이다.
|
<table width="100%"> |
<p><b><hr>가 닫혀있지 않다. 이것은 XHTML에서는 통용되지 않는다. 이를 XHTML에 맞게 바꾸면 다음과 같이 된다.
|
<table width="100%"> |
이제 모든 태그가 닫혔다. <hr>같은 경우 <hr />처럼 단순히 공백하나와 슬래쉬를 추가해주면 된다.
애트리뷰트는 쌍따옴표를 포함하여야 한다.
모든 애트리뷰트는 <p align="center"> 처럼 쌍따옴표로 묶여야 한다. HTML처럼 아예 없거나 홑따옴표로 표시할 수 없다. 그리고 다음처럼 값을 가지지 않는 애트리뷰트 또한 안된다.
|
<option checked>1</option> |
또한 모든 엘리먼트와 애트리뷰트 이름은 소문자이어야 한다.
특수문자에 조심하라.
XHTML은 XML의 엄격한 형식을 따르기 때문이다. 또한 기존의 HTML 문서안에 삽입되던 자바스크립트나 캐스케이드스타일시트의 경우 XHTML에서는 문서안에 내재시킬 수 없다. 모두 XHTML문서 밖으로 .js, .css로 빼내고 다음처럼 사용하여야 한다.
|
<link rel="stylesheet" type="text/css" href="mystyle.css"/> |
만약 <, >, & 같은 HTML 특수문자들을 속성값에 사용한다면 이것들은 모두 "<", ">", "&" 등으로 대체되어야 한다.
마지막으로 <input>, <select> 같은 입력 엘리먼트에 대한 것으로 이러한 엘리먼트에 속성값을 부여할시 "name"이 아닌 "id" 속성을 사용하여야 한다. XHTML에서는 "name"을 쓸모없는(useless)것으로 만들어버리기 때문이다.
다음에는 XHTML의 이점에 대해서 알아보자.
XHTML은 구형 또는 비XHTML 지원 브라우져에 대해서 호환적이다. 단, 앞장에서 언급했듯이 모든 태그는 정확히 닫혀야 한다.
XHTML은 XML 표준을 준수한다. 이말은 최근의 브라우져들(익스플로어, 넷츠케이프, 오페라)은 대부분 XHTML지원 기능을 내장하고 있다는 것이다. XHTML에 대한 W3C 표준은 예전의 HTML문서형식을 가지고 이를 어디서나 XML을 활용할 수 있도록 변환하는 것이다. 이는 문서내용의 논리적인 흐름과 일관성을 구현하기 용이하게 해준다.
XHTML문서는 반드시 DTD와 함께하여야 한다. 이것은 XHTML안의 XML 데이터들이 유효하고, 미리 정의된 논리적인 정의에 일치시키게 한다.
아마 여러분은 현재의 HTML문서를 XHTML로 변환한다고해서 얻어지는 이점이 무었인지 궁금해할 것이다. 또한 왜 XHTML에 대해서 알아야 하는지도 궁금해할 것이다. 이는 다음과 같이 요약할 수 있다.
다음에는 DTD에 대해서 알아보자.
XHTML 문서는 세부분으로 구성된다. DTD선언을 포함한 DOCTYPE과 HEAD, BODY이 이 세부분을 이룬다. XHTML 1.0 규격에 맞는 웹 페이지를 만들기 위해서는 각 페이지마다 DTD선언이 들어가야 하며 Strict, Transitional, Frameset를 지닌다. 이 세가지에 대해서는 다음을 보도록 하자.
Strict
XHTML문서를 규격에 맞고 오차없이 보여주고자 할때 Strict DTD를 사용한다. 이를 사용할때는 캐스케이드
스타일시트와 같이 사용해야 한다. Strict DTD는 <body>의 "bgcolor"같은 속성을 사용하는 것을
용납하지 않기 때문이다.
Strict DTD는 다음처럼 사용된다.
|
<!DOCTYPE html |
Transitional
Transitional DTD는 HTML을 통해 출력용으로 사용할때 사용될 수 있다. 또한 캐스케이드 스타일시트를 지원기능이 없는 구형의 브라우져를 지원할때도 사용한다.
Transitional DTD는 다음과 같이 사용된다.
|
<!DOCTYPE html |
Frameset
XHTML 페이지에 프레임을 포함시키려면 Frameset DTD를 사용해야 한다.
|
<!DOCTYPE html |
어떠한 DTD선언을 어떠한 XHTML 문서 요구에 따라 넣어야 될지 알아보았다. 지금까지의 XHTML에 대한 대략의 내용르 사용하여 다음에는 XHTML 샘플을 보도록 하겠다.
여러분이 짐작하였다시피 XHTML 코드는 이전의 HTML코드와 몇몇 문법적 차이를 빼고서는 매우 유사하다. 이제 실제 예를 보도록 하자.
참고로 http://validator.w3.org/에 가면 XHTML문서가 적합한 문서인지 체크할 수 있는 Validation Tool이 제공된다.
Example 1
이 예제에서는 Strict-DTD를 사용하여 모든 태그들이 닫혀있는지, 모든 애트리뷰트들이 적합하게 사용되었는지 검사한다.
|
<?xml version="1.0" encoding="UTF-8"?> |
Example 2
이번 예에서는 스타일시트를 지원하지 못하는 구형의 브라우져를 위해 Transition-DTD를 사용하였다. Transition-DTD를 사용함으로서 <body>태그에 여러 속성들이 온것을 볼 수 있다.
|
<?xml version="1.0" encoding="UTF-8"?> <body bgcolor="#FFFFFF" link="#000000" text="red"> |
Example 3
이번 예에서는 XHTML 페이지를 여러 프레임에 포함시킬수 있게 하는 Frameset-DTD에 대해서 보겠다.
|
<?xml version="1.0" encoding="UTF-8"?> <frameset cols="100,*"> |
마치면서
XHTML문서를 작성하기 위해서 아직까지는 구형 브라우져를 위해서 Transitional-DTD를 사용하여야 한다. 또한 현재의 HTML문서를 XHTML로 변환하는데 가장 큰 걸림돌은 HTML문서들을 Strict-DTD에 맞도록 수정하는 작업일 것이다. 여러분이 XHTML Validator를 사용한다면 어떠한 것이 수정사항인지 금방 알아차릴수 있을 것이다. XHTML은 가장 대중적인 마크업 랭귀지인 HTML과 XML의 장점들을 혼합한 것으로 앞으로도 계속 발전되 나아갈 것이다.(역주: 현재는 XHTML 1.1)
출처 : korea.internet.com
[출처] [본문스크랩] XHTML 기초(1) |작성자 메멘토