조엘 온 소프트웨어에 나오는 "IT 업계에서의 세 가지 미신"이 갑자기 생각나서 나도 만들어 보았다.

• h1, h2, h3, ...등의 태그는 글자 크기를 조절하기 위한 태그다.
• Cross-browsing, 혹은 웹접근성 준수 등을 하려면 모든 브라우저에서 똑같은 화면을 볼 수 있어야 한다.
• Roll-over를 구현하려면 반드시 자바스크립트를 써야 한다.

h1, h2, ~, h6 태그는 글자 크기를 조절하는 용도다?

이 태그들은 heading을 하기 위한 태그이다. 즉, 문서를 구조화하기 위한 것으로, 워드프로세서에서 보는 "제목1, 제목2, ..."이나 "개요1, 개요2, ..."과 같은 것이다. 물론 워드프로세서처럼 그 글자 크기나 글꼴 종류 등은 맘대로 지정할 수 있고(CSS를 통해), 기본으로 보여지는 글꼴 크기는 브라우저에서 스타일이 정의되지 않았을 때 "제목이기 때문에" 좀더 크게 보여주는 것 뿐이다. (실제로 브라우저마다 어느 정도 크게 보여주느냐 하는 건 다 다르다)

Cross-browsing은 모든 브라우저에서 같은 화면을 볼 수 있어야 한다는 뜻이다?

틀린 말이다. 문제는, 같은 화면과 디자인을 보여주는 것이 아니라, 같은 정보와 기능을 사용할 수 있어야 한다는 점이다. PDA 등의 모바일 환경에서도 PC의 웹브라우저들처럼 화려하고 거대한 레이아웃을 똑같이 보여주려고 하는 건 어리석은 짓이다. 물론 Internet Explorer의 황당한 버그들을 제외한다면 PC에서만큼은 같은 디자인과 레이아웃으로 보이게 하는 것이 그렇게 어려운 일은 아니다. 하지만 어디까지나 그것이 목적이 아니라는 사실은 명심해야 할 것이다.

롤오버를 하려면 자바스크립트를 써야 한다?

마우스를 이미지 위로 가져갔을 때 다른 그림을 표시한다든가 하는 것을 통상적으로 Roll-over라고 부른다. 이전까지는 javascript를 이용해 드림위버나 나모에서 제공하는 스크립트 마법사 등의 기능으로 미리 image들을 다운받아 캐시한 후 img 태그의 src를 바꿔주는 방식으로 많이 구현되었다. 하지만, 이 역시 상당 부분 불필요하다. 역시 망할 Internet Explorer만 아니라면, 기본적으로 거의 모든 HTML 태그에 대해 :hover라는 가상 클래스(pseudo class)와 background 규칙을 써서 구현이 가능하다. (텍스트 링크에 마우스를 가져갔을 때 색깔이 변하도록 css를 짜는 것을 활용하는 것이다)
특히, 많은 사람들이 잘 모르는 것 중 하나는, a 태그로도 box 모양 태그를 만들 수 있다는 점인데, padding, margin, background 등만 잘 활용하면 a 태그 하나만 있어도 버튼 형태 등을 무궁무진하게 만들어낼 수 있다.

역시나 결론은 우라질 놈의 IE이지만, 조만간 IE 7.0 (WIE7)이 나오면 거의 해결될 문제다. Microsoft에서 하위호환성을 당장 포기할 것 같지는 않으므로 이전 방식도 잘 돌아가겠지만, XHTML과 CSS에 대한 근본적인 이해를 가지고 접근하는 사람들과의 격차는 거의 따라잡기가 불가능해질 것이다. Web에서의 세 가지 미신을 타파하기 위한 노력을 해본다면 조금이나마 XHTML이 무엇인지, 웹표준과 웹접근성을 왜 따지는 건지 알게 되리라 생각한다.