Go to content Go to menu

2001년 부터 혼자 공부를 할때도 회사에 입사를 해서도 언제나 나의 HTML 편집기는 홈사이트였다. 편집기에서 새 파일을 열면 언제나 미리 만들어져 있는 코드가 있었는데 그것은

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>Untitled</title>
</head>
<body>
</body>
</html>
였다..

저 코드를 만들어 주는것도 어찌나 편해 보이는지 잘 사용하고 있었다. 생각해보니 언제부터인지는 모르겠지만.. 항상 내가 만드는 페이지에는

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

가 있었던것이다. 난 저 코드의 용도를 알 수 없었다. 대충 HTML 4.01 이라고 써있는걸보니 뭐 이 문서는 HTML4.01 로 만들어졌나부다 정도로 추측 할 정도 였던것이다.
그런데 그당시에 내가 관심 있었던 것은 다른게 아니라 소스 코드의 견결화였다. 그러면서 쓸데없는 코드를 하나둘씩 지워나가기 시작했다. 제일 처음 보이는게 별소용이 없어보였다. '에이 그냥 브라우저에서 HTML 4.01 이라고 알아서 보겠지~' 라면서 지웠다. 실제로 없어도 별 다른점은 없었고, 그냥 계속 지운 채로 페이지를 만들어 냈다. 없어도 문제없는데... 라면서 3~4년 간을 그렇게 페이지를 만들었다.

그 사이 회사도 두번이나 옮기고, 2004년 말쯤 되었을때, 여기저기서 css layout, web standards라는 말들이 터지기 시작했다. html 의 레이아웃을 table 에게 맡기지 말자라는 현실적인 주장부터 시작해서 더나은 웹을 만들기 위한 주장이 여기저기 나오기 시작할때였고, 나도 그것이 내가 할일이다 생각하고, 회사의 일에 무작정 적용하기 시작했다. 그러면서 앝은 지식으로 그냥 붙여 넣었던것이

<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

였는데 이것은 어딘가 내가 마크업과는 너무많이 달랐다. 패딩을 쓰면 뭔가 내가 예상한 수치와 맞질않았다. 그당시 내가 예상한 저 DTD의 역할은 단지 margin:0 auto; 라는 중앙정렬 지원이었다. 결국 나는 DTD의 사용을 포기했고 그프로젝트에서 CSS IE Hack과 같은것을 익히게 되었고 프로젝트를 그렇게 아는것만 가지고 진행했다. 그 후 난 DTD와 Box Model등 이런저런 것들을 공부했고 내가 그동안 사용했던 방식이 Quirks Mode라는것도 알게되었다. 이후 프로젝트에서는 DTD를 모두

<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

로 사용하고 있다.

그러다 마우스 포지션을 잡아내는 방식이 XHTML DTD에 따라 다르다는것도 알게되고, 스크립트도 DTD에 따라서 다르게 적용된다는 것을 알게 되었다.

많은 시간이 흘렀지만 아직도 나는 완벽히 HTML DTD에 대해서 제대로 정확히 알지는 못한다. 그리고 많은 사람들이 나와 같이 정확히 이해하지 못한 채 그냥 '남들이 쓰니까', '단지 CSS가 적용이 잘되니까' 라는 이유로 DTD를 사용할 것 같다. 이번 주제에서 DTD와 Quirksmode 에 대한 이해와 그리고 조금더 생각해보고 무엇을 사용하는 것이 좋을 지에 대해 생각할 수 있었으면한다.

홍윤표의 사진

홍윤표