이 글은 서버사이드 개발자님들께서 웹퍼블리셔로부터 받은 HTML문서를 작업하는데 있어서 최소한으로 알아주셨으면 하는 내용을 정리한 것입니다. 일부분 상세히 적지 않고(버전별 요소와 속성의 사용 유무 등) 최대한 쉽게 작성하는데 목적을 두었기 때문에 실 작업시에는 웹퍼블리셔와의 커뮤니케이션과 좀 더 정확한 스펙 문서를 참고해 주시기를 부탁드리겠습니다.
웹표준화와 관련하여 웹퍼블리셔는 정확한 Doctype 선언으로부터 마크업을 시작한다. 그리고그리고 올바른 마크업(well-formed) 검증(validate)으로 작업을 마치게 된다. 하지만 많은 경우 사이트가 오픈했을오픈했을 때 validate를 통과가 어렵다. 이는 서버사이드 개발자들이 웹퍼블리셔로부터 받은 (X)HTML(X)HTML 문서를 수정(개발을 입히는 작업)하면서 올바르지 않은 요소와 속성을 사용하기 때문인 경우가경우가 많다.
서버사이드 언어인 ASP나 PHP, JSP 등은 문법오류에 대한대한 관용이 적기 때문에 즉각적으로 에러를 보여준다. 하지만 (X)HTML은 브라우저에 따라 관용적으로관용적으로 처리되거나, 용납되는 경우가 많아 올바르지 않은 마크업을 하고도 화면이 정상적으로 보이는보이는 경우가 많다. 하지만 이렇게 완성된 사이트는 결코 웹표준 사이트라고 볼 수수 없거니와, 웹접근성 또한 보장받을 수 없게 된다.
XHTML 스펙을스펙을 살펴보면 잘못된 요소와 속성의 사용을 알 수 있지만 대부분의 경우 서버사이드서버사이드 개발자들은 과거에 익혔던 HTML 문법만을 기억하고 있으며(그다마 올바르지 않은 문법) 새로운새로운 XHTML에 대한 차이를 잘 알지 못한다.
다음은 W3C의 HTMLHTML / XHTML 스펙 문서 목록이다.
- HTML 4.01 Specification
- XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition)
- XHTML™ 1.1 - Module-based XHTML - Second Edition
다음은 XHTML 기준으로 개발자개발자 역시 함께 알아야 하는 내용들이다.
- HTMLHTML 문서의 Doctype이 무엇인지 확인한다.
HTML 4.01과 XHTML 1.0 에는 각각 'Strict(가장 엄격)', 'Transitional(전환형)', 'Frameset(프레임셋형)' 세가지 타입이 있다. XHTML 1.1은 'Strict'만을 지원하며, 표기는 XHTML 1.1로만 합니다.
Doctype에 따라 사용 가능한 요소와 속성이 구분되며, CSS에도 영향을 미친다.
- Doctype 선언 위에 출력되는 요소나 문자열이 없도록없도록 한다.
DTD는 HTML 문서의 최상단에 선언되어야 한다. 그렇지 않을 경우 일부 브라우저(IE 등)에서 비표준모드(Quirks mode)로 작동하게 된다. 일부 스타일이 제대로 적용되지 못하는 문제가 종종 발생한다.
- XHTML일 경우 모든 요소와 속성은 소문자로 작성하며, alt와 title 속성을속성을 제외하고 가능한 모든 속성에는 값을 넣어(대부분 넣지넣지 않아도 에러가 나지는 않으나 alt와 title 속성을 제외하면 특별한 이유 없이없이 빈 값을 넣는 경우는 드믈다)준다. 또한, 모든 속성값은 반드시반드시 인용부호로 둘러싼다.
validate의 에러를 가장 많이 내는 주범이다.
- XHTML일XHTML일 경우 모든 요소는 반드시 닫아주어야 한다. 특히 <head>..</head>사이의 <meta> 요소 작성시작성시 반드시 닫아주자! 또한, 요소의 위치관계를 정확하게 한다.
<p>내용</p> , <br />, <img src="..." />, <meta ... />, <link rel=".." ... />
(x) <a href="..."><span>링크</a></span>
(o) <a href="..."><span>링크</span></a>
- XHTML 1.1일 경우 <a>, <map>, <form>, <img> 요소에서 namename 속성이 폐지되어 사용할 수 없다.
id 속성만을 사용한다. 하지만 <form>내 <input> 등 요소에서는 name 속성을 사용할 수 있다.
- MIME Type이 'application/xhtml+xml'일 경우 script와 style 요소는 '<!--'과 '-->'를 '<![CDATA[<![CDATA[ '와 ']]>'로 대체한다. 단, 'text/html'일 경우는 과거처럼 주석 방식을방식을 사용한다.
CDATA는 script와 style 내 '<', '>', '&'와 같은 문자를 이스케이프 시키지 않고 그대로 사용할 수 있도록 한다. 또한, Doctype에 관계없이 script요소와 style요소를 </head>와 <body>사이에 삽입하는 경우는 없어야 한다. 되도록 script와 style은 외부 문서로 빼는 것이 좋다.
- XHTML 1.1일 경우 다음의 요소들은요소들은 사용할 수 없다.
<applet>, <basefont>, <center>, <dir>, <font>, <frame>, <frameset>, <iframe>, <isindex>, <menu>, <noframes>, <s>, <strike>, <u>
특히 , <font>와 <center>, <iframe> 요소는 개발자들이 무분별하게 사용하는 대표 요소인데 Doctype에 따라 사용을 신중히 해야할 필요가 있다. <font>와 <center> 요소는 CSS로 정의할 수 있으며, <iframe>요소는 <object>요소로 대체된다.
- XHTML 1.1일 경우경우 다음의 속성들은 사용할 수 없다. (일부 속성은 XHTML 1.0 Strict 에서도에서도 지원되지 않기 때문에 주의 바랍니다.)
<*> lnag
<a> name, target
<area> traget
<body> background, bgcolor, text, link, vlink, alink
<br> clear
<caption> align
<div> align
<form> name, target
<h1~h6> align
<hr> align, noshade, size, width
<img> align, border, hspace, vspace
<input> align
<legend>align
<li> type, value
<link> target
<map> name
<object> align, border, hsapce, vspace
<ol> compact, start, type
<p> align
<pre> width
<strict> language
<table> align, bgcolor
<td> bgcolor, height, nowrap, width
<th> bgcolor, height, nowrap, width
<tr> bgcolor
<ul> compact, type
- 가급적가급적 요소에 직접 스타일(inline style)을 정의하지 않는다.
<div style="...">
단, <input>과 <img> 요소 등 개발시 변동이 잦은 요소들에 한해서 inline style로 width와 height를 지정하는 것은 괜찮다고 생각한다. 하지만 저속 인터넷 접속 환경에서는 느린 로딩으로 인해 이미지 요소들이 레이아웃을 잡지 못해 들쑥날쑥하게 전체레이아웃을 깨뜨리는 현상이 발생하기도 하므로 이에 대한 고려가 선행되어야 할 것이다.
- 요소와 속성내 모든 문자열을 PCDATA(분석 처리된 문자데이터)로 작성한다.
<p>LOVE & GHOST</p> ☞ <p>LOVE &amp; GHOST</p>
<a href="../../list.php?id=bomnun&val=2">링크</a> ☞ <a href="../../list.php?id=bomnun&val=2">링크</a>
* <style>과 <script>요소에서는 <![CDATA[ ... ]]>를 사용해서 문자열을 파싱하지 않고 그대로 사용할 수 있다.
- XHTML일 경우 속성은 약술할 수 없다.
<input type="radio" checked /> ☞ <input type="radio" checked="checked" />
- Encoding Charset이 무엇인지 확인한다.
HTML 문서는 utf-8인데, 파일 인코딩은 euc-kr인 경우가 종종 있고, 이 경우 한글이 깨져 보이는 가장 큰 이유가 된다. 또한, CSS나 JS 역시 인코딩이 다를 경우 제대로 작동되지 않기도 한다.
세세히 따지면 좀 더 있겠지만 대부분 위의 경우에 해당될해당될 것 같다. 그리고 상위 4개 붉은색으로 표시한 것들이 validate를 통과하지 못하는못하는 대부분의 이유가 된다. 서버사이드 개발자들이 위의 내용을 숙지만 하고 있다면(최소한 DTD의DTD의 차이만이라도 알고 있다면) 문법 오류를 최소한으로 줄일 수 있을것 같다.
이 글은 솔직히 서버사이드 개발자들을 '낚기' 위한 글입니다. 위의 내용은 이미이미 수차례 비슷한 주제의 블로그나 사이트를 통해서 널리 알려져 있는 내용입니다. 결국결국 복사된 내용의 재탕(웹표준교과서의 내용을 정리했음)이라는 것이지만 그럼에도 불구하고 서버사이드 개발자분들이 한번만이라도한번만이라도 관심 있게 읽어주기를 바라는 마음에 포스팅을 하게 되었습니다.
출처 : 봄눈님 블로그 http://www.pageoff.net/787
반응형
'Web story > Front End' 카테고리의 다른 글
| CSS 프레임워크 - Kube (0) | 2012.12.06 |
|---|---|
| 반응형 웹 리소스 (0) | 2012.12.06 |
| WebSniper - IE6~7 웹퍼블리셔&웹개발자를 위한 만능 툴(실시간 태그 검색, 소스보기, 소스분석, 실시간 소스편집) (0) | 2011.09.02 |
| 웹퍼블리셔에게 가장 중요한 것은 무엇일까? (0) | 2009.01.08 |
| 마크업을 깔끔하게 유지하는 12가지 원칙 (0) | 2008.11.17 |