Differences Between XHTML and HTML


Home > Document > xhtml > Tutorial > xhtml vs. Html

XHTML을 대비하는 방법

XHTML은 차세대 웹 표준 언어로서 W3C에 의해 XHTML 1.0 Version이 발표 되었지만 XHTML을 지원하는 브라우저나 software등이 준비 될 때 까지 어느 정도의 시간이 걸릴 것 같습니다. 그렇다면 그 동안에 우리는 어떤 준비를 해야 될까요? 바로 지금 여러분 들이 배우는 XHTML 메뉴의 문서에서 설명된 사항들에 맞추어 각자의 사이트를 XHTML 사이트로 Upgrade 시키는 거져. 즉, 여러분들의 문서를 모두 Well-formed Document로 교정하는 겁니다. 다행스럽게도 XHTML 문법이 몇 가지 지킬 것 만 지키면 HTML 4.01과 일치하는 내용이기 때문에 적어도 하나의 사이트를 운영하는 관리자 정도의 소양을 갖춘 사람이라면 그리 어려운 것 만은 아닙니다. 문서의 숫자가 많으면 그 만큼 시간이 걸리겠지만, XHTML로의 Upgrade는 그럴만한 가치가 충분합니다.

그러고 보니 이제 막 따끈따끈한 새 사이트를 구상하는 분들이라면 그런 다행이 없군요. 새로 작성하는 문서의 문법을 모두 다 XHTML 1.0 Version에 맞추면 될테니까요...^^ 늦게 시작하는 사람이 누리는 혜택이라고나 할까요...



XHTML 문서의 확장자는?

따로 정해진 확장자는 없고, 문서의 내용이 XHTML 문법에 맞느냐 아니냐가 문제일 뿐입니다. 즉, 확장자가 .htm, .html, .asp, .php 등 기존에 각자의 목적에 의해서 만들어진 웹 문서의 확장자를 그대로 사용하되 문서의 Coding을 XHTML 문법에 맞추면 된다는 뜻입니다.




XHTML과 HTML의 가장 큰 차이점
  • XHTML은 반드시 Tag속에 Tag을 포함할 때 중첩을 금지합니다. Well-formed element 참조
  • XHTML은 반드시 XHTML문법을 지켜야 됩니다. XML Document 참조
  • XHTML Element 이름은 반드시 소문자여야 합니다.
  • XHTML Element는 반드시 End Tag으로 닫혀야 됩니다.
위의 차이점들에서 반드시 라는 단어를 강조했습니다. 왜 그랬을까요?

일반적으로 지금까지 W3C에서 어떤 새로운 규격(Specification)을 발표하면서 Recommandation(권고안)이라고 이름 붙여서 내 놓았습니다. 이 권고안이라는 말은 '우리(W3C)가 발표하는 안 대로 사용하는게 가장 좋습니다.' 라는 뜻으로 약간의 문법적 오류가 있어도 무방하다는 뜻입니다.

하지만 이 XHTML은 권고안이 아닌 강제 규정(Mandatory)입니다. 즉, 쓰지 않는다면 몰라도 XHTML을 사용하려면 반드시 준수해야 될 사항이라는 것입니다. 강제 규정입니다. 강제 규정...

'그렇다면 우리 같은 초보자는 어떻게 하라는 말이냐.' 라는 강한 의문을 가질 수도 있겠지만 앞에서 설명한 것 처럼 몇 가지의 규칙만 지키면 얼마든지 제대로 된 문서(Well-formed Document)를 만들 수 있습니다. 또 이 사이트의 문서에서 설명하는 내용을 잘 보시면 많은 도움을 받을 수 있으리라 믿습니다...^^




XHTML은 반드시 Tag속에 Tag을 포함할 때 중첩을 금지합니다.

HTML에서는 아래와 같이 Tag들이 서로 겹쳐져 있어도 브라우저로 보는데 무리가 없습니다.

<b><i>굵은 기울임 글씨체</b></i>

하지만 XHTML에서는 아래와 같이 Tag들이 겹쳐지지 않고 포함(Nested)되어 있어야 합니다. Table에서 사용되는 <table>, <tr>, <td> 등과 같이 상, 하위가 분명한 Element를 제외하고는 어떤 Tag이 어떤 Tag을 포함하든 포함되는 순서는 그저 기분 내키는 대로 사용해도 됩니다. 즉, <b> Tag속에 <i> Tag이 들어가든 그 반대가 되든 상관 없다는 말입니다.

<b><i>굵은 기울임 글씨체</i></b>




우리가 일반적으로 자주 하는 문법적 실수에 대한 예로 아래의 <li> element 속에 <ul> Element를 사용하여 Sub List를 만드는 경우, 틀린 문법과 올바른 문법의 사례를 보겠습니다.

틀린 문법
<ul>
  <li>Coffee</li>
  <li>Tea <!-- li Element의 End Tag이 빠졌습니다. -->
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  <li>Milk</li>
</ul>
바른 문법
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li><!-- li Element의 End Tag을 제대로 넣었군요. -->
  <li>Milk</li>
</ul>



XHTML은 반드시 XHTML문법을 지켜야 됩니다.

모든 XHTML Element 들은 Root Element(최상위 Element)인 <html> 속에 중첩되지 않고 올바르게 포함(Nested)되어 있어야 됩니다. 모든 XHTML Element들은 하위 element를 포함할 수 있으며 서로 엇 갈려서 중첩되지 않아야 된다는 사실에는 변합이 없습니다. 기본적이 Document Tree(상하위 체계)는 아래와 같습니다.

입력
<html>
<head> ... </head>
<body> ... </body>
</html>



XHTML Element 이름은 반드시 소문자여야 합니다.

XHTML 문서는 기본적으로 XML 문법을 따르기 때문에 대소문자를 엄격하게 구분하는 XML 문서의 문법에 따라 Element 이름을 소문자로 사용합니다. 그렇다고 XML에서도 반드시 소문자를 사용해야 되는 것은 아닙니다. 참고적으로 미리 말해 두자면 XML에서는 대소문자의 사용 여부는 관계가 없지만 Start Tag과 End Tag에 사용된 대소문자가 같아야 됩니다. 예를 들어 <Address>로 시작했으면 End Tag도 반드시 </Address>로 끝나야 되고, <ADDress>로 시작하면 End Tag도 </ADDress>로 끝나야 됩니다. 따라서 XML에서는 <br />과 <BR />은 전혀 다른 Element로 해석 됩니다. 아래의 예를 보시져.

대문자를 사용하여 틀린 문법
<BODY>
<P>This is a paragraph</P>
</BODY>
소문자를 사용하여 바른 문법
<body>
<p>This is a paragraph</p>
</body>



XHTML Element는 반드시 End Tag으로 닫혀야 됩니다.

XHTML 에서는 모든 Tag이 반드시 End Tag로 닫혀져야 됩니다. 즉, Empty Tag이 허용되지 않습니다. Empty Tag에 대해서는 여기의 DTD Table 보는 방법을 참조하시져. 아래는 틀린 문법과 바른 문법의 사용 예가 되겠습니다.

틀린 문법
<p>This is a paragraph
<p>This is another paragraph


바른 문법
<p>This is a paragraph</p>
<p>This is another paragraph</p>


Empty Elements도 역시 닫혀져야 됩니다. Well-formed element 참조

예리한 통찰력을 지닌 여러분들은 이미 궁금해 했겠지만 이 부분이 의미하는 것은 <img>, <br>, <hr> 와 같이 End Tag의 사용이 금지(forbidden) 된 Element의 경우를 말합니다. 이 경우에는 <img>...</img>, <hr>...</hr>, <br>...</br> 과 같이 사용하는게 아니고 닫히는 괄호(>) 앞에 ' /'를 넣어 줍니다. 즉 <br> 의 경우 <br /> 과 같이 '<br' 뒤에 한개의 space(Extra space)와 slash(/)를 넣어주고 '>'로 닫아 줍니다. 이 것을 Empty Tag Token이라고 부르는데 이 표시는 '이 Tag은 Empty Tag'이라는 표시가 되겠습니다. 또한 <img>, <hr>의 경우도 마찬가지져. 아래는 틀린 문법과 바른 문법의 예입니다.

틀린 문법
줄바꿈 Tag 입니다.<br>
수평선을 그리는 Tag 입니다.<hr>
image 를 삽입하는 Tag 입니다. <img src="happy.gif" alt="Happy face">


바른 문법
줄바꿈 Tag 입니다. <br />
수평선을 그리는 Tag 입니다. <hr />
image 를 삽입하는 Tag 입니다. <img src="happy.gif" alt="Happy face" />




단위 생략 금지

xhtml을 비롯한 표준 모드 DTD를 사용할 경우 단위의 생략을 허용하지 않습니다. 예를 들어 style="height:25" 와 같이 지정하면 style="height: " 와 같이 아무런 수치도 입력하지 않은 것으로 취급 합니다. 따라서 25pixel을 지정하고저 한다면 style="height:25px" 로 단위를 정확히 표시해야 됩니다.



End Tag의 사용이 금지된 Element 목록

아래의 표는 End Tag의 사용이 금지(Forbidden)되어 End Tag을 사용하지 않는 Element 목록입니다.

End Tag의 사용이 금지된 Element 목록
Tag Name 간략한 설명 NN IE DTD
<area /> Image Map을 사용하여 Link를 만드는 Tag 3.0 3.0 STF
<base /> Link된 문서를 출력시킬 창(Target)을 지정하는 Tag 3.0 3.0 STF
<basefont /> 문서에 사용되는 기본 font(크기, 색상, 글꼴)를 지정하는 Tag 3.0 3.0 TF
<br /> 줄 바꿈 Tag 3.0 3.0 STF
<col /> Table Column의 속성을 지정하는 Tag   3.0 STF
<frame /> Sub window(frame)를 지정하는 Tag 3.0 3.0 F
<hr /> 수평선(Horizontal rule) 을 만드는 Tag 3.0 3.0 STF
<img /> Image 파일을 삽입하는 Tag 3.0 3.0 STF
<input /> 입력란을 만드는 Tag 3.0 3.0 STF
<link /> 외부 CSS 파일을 Link시키는 Tag 4.0 3.0 STF
<meta /> Meta information을 기록하는 Tag 3.0 3.0 STF
<param /> Object에 Option parameter를 기술하는 Tag 3.0 3.0 STF





이 문서의 저작권은 www.cadvance.org 에 있습니다.

Top
Back
New
검색