퍼블리셔라는 영역이 생기면서 약간 애매해 진것은 사실이지만 퍼블리셔를 따로 두고 있는 회사는 그렇게 많아보이지 않는다. 일단 웹표준을 지키려고 하는 회사도 그리 많지 않지만... 어쨌든 이전의 방식과 호환성을 가지기 위해 사용하던 HTML 4.01이 지나 이제는 XHTML 1.0으로 가는게 맞다고 생각하고 있다. 논쟁을 하고자 하는 건 아니고 새기술이 좋다고 생각하는 전제를 깔고 있고 더 엄격한 규칙을 가지고 더 좋은 웹을 만들수 있는 것은 확실하다.
XHTML을 사용하기 위한 문서의 기본 구조는 전에 올린 XHTML 1.0 Transitional 문서 템플릿 포스트를 참고하고 여기에 적용되는 몇가지 XHTML의 규칙을 설명하고자 한다. 이 규칙들은 이전 HTML에서는 유효했지만 XHTML에서는 유효하지 않은 규칙들이다. 정의된 문서를 먼저 설명하면(위 템플릿 참고)
XHTML은 DOCTYPE을 무조건 선언해 준다. 이 문서가 어떤 문서인지를 정의 하는 것은 반드시 해야하는 것이고 DOCTYPE없으면 XHTML 유효성 검사를 할 수 없다.(HTML 4.01에서도 반드시 쓰라) 브라우저는 DOCTYPE이 있으면 표준모드로 없으면 호환모드로 돌아간다. XHTML은 Transitional, Strict, Frameset 3가지 DTD가 있는데 유연한 Transitional이 과도기인 현재로써는 가장 맞다고 생각한다. Strict는 상당히 쓰기가 어렵고 Frameset은 써본적도 없고 써보려고 해본적도 없다. 그리고 DOCTYPE은 HTML문서의 최상단에 있어야 한다.
XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
(DTD는 w3c의 Recommended list of DTDs 참고)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
그 다음에는 네임스페이스를 선언해 주는데 그냥 위 템플릿이라는 포스팅에 써진대로 복사해서 쓰면 된다.
XHTML에서 지켜야 할 몇가지 규칙을 정리해보자.(W3C 문서 참고)
모든 태그는 소문자로 적는다. 과거에는 대문자로 쓰는게 일반적이었지만 XHTML에서는 반드시 소문자로만 작성해야 한다. 단 속성값이나 내용은 대소문자에 상관없다.
<BODY></BODY> - (X)
<body><body> - (O)
<body><body> - (O)
모든 속성값은 인용부호 안에 사용하고 속성들 사이에는 띄어쓰기를 해야한다.
<img src="banner.gif" alt=배너 /> - (X)
<img src="banner.gif" alt="배너" /> - (O)
<img src="banner.gif" alt="배너" /> - (O)
모든 속성에는 값이 있어야 한다. 값을 지정안하고 선언하는 속성들이 있었지만 XHTML에서는 보기에는 어색하더라도 모두 속성을 지정해 주어야 한다.
<input type="text" readonly> - (X)
<input type="text" readonly="readonly" /> - (O)
<input type="text" readonly="readonly" /> - (O)
모든 태그는 닫아준다. 이전에는 안닫아주었지만 모든 태극는 닫혀햐 한다. 여는 태그가 있으면 닫는 태그가 있어야 하고 단독적으로 쓰이는 태그(img, input, br 등등)도 반드시 닫아준다. 보통 단독태그에 닫아주는 표시를 할때는 슬래시(/)앞에 한칸을 띄워준다.
<p>내용 - (X)
<p>내용</p> - (O)
<br> - (X)
<br /> - (O)
<p>내용</p> - (O)
<br> - (X)
<br /> - (O)
주석안에는 더블대시를 사용하지 않는다.
<!------------------------> - (X)
<!--====================--> - (O)
<!--====================--> - (O)
모든 <와 &는 변환을 해주어야 한다. 내용중에 <, &는 < 와 & 로 바꾸어 주어야 한다.
<div>you & me < test</div> - (X)
<div>you & me < test</div> - (O)
<div>you & me < test</div> - (O)
id 사용 - 링크태그의 타겟으로 사용되던 name을 대체한다.(하위호환을 위해 name도 동시 사용)
모든 img태그에는 alt태그를 반드시 사용해 준다. alt는 이미지를 보여주지 못할때 이미지를 대체해서 보여줄 대체택스트로 이미지에 대한 설명을 뜻한다. 브라우저가 툴팁으로 보여주어서 잘못 사용하고 있기는 하지만 툴팁은 title속성을 사용하여야 한다.
좀 다른 얘기로 스크립트 얘기를 하자만 한 문서에는 여러 스트립트가 가능하므로 기본적인 사용 스크립트를 메타태그를 이용해서 지정할 수 있다.
<meta http-equiv="Content-Script-Type" content="text/javascript">
라고 작성하면 된다 보통 이 메타태그가 없으면 브라우저는 자바스크립트가 기본이라고 생각한다.
<script type="text/javascript"></script> 가 정상적이다. MIME타입으로 text/script가 많이 사용된다는 이유로 RFC 4329가 승인했다. application/javascript를 더 권장하고 있지만 실제 브라우저에서 잘 지원되지 않고 있다. 또한 스크립트 코드에 language="javascript"로 작성된 것을 많이 볼 수 있는데 이것은 type이 지원되지 않을 때의 잔재인데 하위 호환성을 위해서 사용할 수도 있다.
참고로 CSS의 경우는
<meta http-equiv="Content-Style-Type" content="text/css" />
코드를 통해서 문서의 CSS스타일을 정의할 수 있다.
아래 부분은 XHTML에 해당되는 내용은 아니지만 XHTML을 사용할 때 구조적인 HTML을 구성하려는 의도가 더 강하다고 생각했을 때나 웹접근성을 생각했을 때 고려해야 할 부분
- <b>보다는 <strong>를, <i>보다는 <em>을 사용한다.
- 텍스트의 경우는 div가 아닌 <p> 태그를 사용한다.
- 해드라인의 경우 div에 적당한 클래스를 주는 것이 아니라 <h1>, <h2>태그 등을 사용한다.
- table태그에는 summary 속성을 지정할 수 있다. 대부분의 브라우저는 summary를 보여주지 않지만 시각장애인용 스크린리더등에서는 summary를 읽어준다.
- 태그에 accesskey 속성을 주면(ex: accesskey="1") 사용자가 단축키로 사용할 수 있게 해준다.(하지만 대부분의 브라우저는 이를 사용자에게 보여주지 않기 때문에 사용법에 대한 것을 따로 알려주어야 한다.)
- tabindex를 사용하면(ex: tabindex="1", tabindex="2") 사용자가 탭을 눌렀을 때 옮겨지는 form 컨트롤를 지정할 수 있다. tabindex가 없으면 소스에 나와있는 순서로 옮겨진다.
햄이 생각하는 표준에 접근한 개념으로 요청을 한것은 아니었지만, BC 에서 jsp 상단에 DOCTYPE 선언.. 그리고 기타 태그 선언 등등 몇가지를 제시하였지만, 웃기게도 개발자는 둘째치고 퍼블리셔도 지키질 않더군요.. 제가.. 햄의 글처럼.. 웹표준 옹호론자는 아니지만, 같이 개발하고 사이트를 만들어가고 유지보수 하는 입장에서.. 같이 지켜줬으면 하는 것을 제시해도.. 왜 이놈의 사회는 말들을 그러고 안듣는지.. ㅋㅋ.. 저도 안듣는 사람중에 하나이긴 하지만.. 그래도 다수가 안해주거나.. 혹은 딱히 필요성을 못느끼거나 할 때.. "그래 나도 대충 하자.. 어느 수준만 해주자.." 가 아닌.. 본인만의 기준을 잡아가고, 지키려고 하는 햄이 대단하네용.. 햄의 글을 보면서 작은 자극을 또 받아봅니다.. ㅎㅎ.. 글구 블로그는.. http://redpigdevs.blogspot.kr/ 에용.. 기대는 하지마시고.. 다 햄의 글들이니까요.. ㅋㅋㅋ
그런 사람들 많지. 그쪽을 주로 하는 사람도 안지키기도 하고... 지금은 XHTML 세상은 아니긴 하지만 안지키는 사람 열심히 설득하기 보다는 난 그시간에 공부를 더 하는쪽으로. ㅎㅎㅎ
블로그 잘 볼께 근데 빨간돼지는 언제 생긴 별명인거야. ㅋ
흠.. 빨간이 아니고.. 빨강임.. ㅋㅋㅋ.. 그냥 과거부터 온라인에서 할 때는 빨강돼지를 많이 쓰고.. 영문이면, red pig.. 메일 같은건.. 8282marlboro.. 머 그랬어용.. ㅋㅋ.. 제가 빨강색을 좋아하고 그래서.. 돼지는 약간 좀 역설적인.. 비유라고 보시면 될듯한.. 무튼 머 그렇고.. 과거에는 아무래도 햄하고 저랑.. 공감되는 부분이 적어서.. 대화나 관심이 많지는 않았지용.. ㅎㅎ
참!!.. 댓글에 대한 반응이 언제부터인가 느려진듯한데.. 혹시 또 업체 문제가 발생한건 아닌지.. ㅎ
그런건 아니고 약속있고 뭐 딴거 하다보면 댓글 못봤다가 나중에 보기도 하고 그래서 ㅋㅋ
예전엔 그렇긴 했지. 동기얘기나 뭐 회사 얘기말고 개발 얘기할 일은 별로 없었으니까 ㅎ
아 햄의.. 댓글 다는게 느려졌다는게 아니구요.. ㅋ.. 말이 오해가 있었넹.. 웹상에서의 반응이 느리다능.. 요 근래에.. 반응이 없어서 다시 누르면.. 요청중이라고 뜨고.. 조금 더 뒤에는.. 요청이 오래되따고 새로고침 하라고 하덩가.. 그래서 새로고침하면.. 이미 등록되어있고.. 그렇더란.. 요 부분에 대한 얘기였어용.. ㅎㅎ
아 그래? 시스템은 내가 만든게 아니라서... 최근에 장애는 없었는데 확인해 봐야겠네 ㅋ