doctype에 따른 브라우저별 렌더링 방식의 차이
2007/10/29 01:16
신규서비스들의 모든 기획안에서 이미 웹표준은 반드시 포함시켜야할 이슈로 자리잡았다.
그렇지만 웹표준을 준수하고 접근성을 유지하며 HTML과 CSS를 이용하여 문서와 표현을 분리,
레이아웃을 위한 table을 버릴줄 아는 웹퍼블리셔는 아직 업체의 수요만큼 공급이 충분히 되지 않고 있다.
훌륭한 인력들은 이미 웹쪽에 있는 회사들중 이름있고 규모있는 회사가 인력을 싹쓸이 해갔고,
그렇기에 중소 웹에이전시는 웹표준을 포함해 달라는 클라이언트측의 요구에 사람을 구하지 못해서
발만 동동구르고 있는 상황이다.
그래서 웹디자이너를 급하게 교육시키거나
기존의 HTML코더에게 웹표준책을 던져주면서 해보라고 다그치는 꼴이다.
table을 레이아웃을 위해 사용하고 IE가 만들어낸 비표준 태그를 마구 사용하고
모든 표현도 HTML 속성을 이용하여 때우던 시절의 기질을 벗어던지고
HTML과 CSS로 문서와 표현을 분리하여 웹사이트를 구현하기위한
가장 첫번째 단계는 DOCTYPE의 선언이다.
우리나라의 90%가 넘는 사람들이 사용하고 있는 IE(인터넷 익스플로어)는
quirk 모드라고 불리는 IE의 기본렌더링 방식이 웹표준에 맞지 않다.
그 대표적인 예로 박스모델링을 꼽을수 있다.
http://trio.co.kr/webrefer/css2/box.html
이곳에 박스모델링에 대한 자세한 설명이 나와있다.
짧게 글로 설명하자면
width:200px;
height:200px;
padding:20px;
위의 CSS를 블록레벨엘리먼트에 적용을 하면
표준렌더링은 200px * 200px의 박스에 padding:20px이 상하좌우에 더해져서
240px * 240px의 박스를 생성하게 된다.
하지만 quirk모드의 IE는
200px*200px의 박스를 생성하고 그 안에 padding:20px를 상하좌우에 적용하게 되어
실제적으로 160px*160px의 박스에 상하좌우 20px의 패딩이 적용된 박스가 나타나게 된다.
이처럼 IE의 quirk모드의 렌더링은 표현에 있어서 아주 중요한 박스모델링에서
큰 차이가 있기 때문에 웹표준을 사람들이 처음 접하는 문제 이기도 하다.
하지만 DOCTYPE을 HTML의 최상단에 선언 하게되면 IE는 standard모드로 렌더링을 한다.
비로소 이렇게 되어야만 진정한 웹표준 문서이기도 하지만
표준방식에 의한 렌더링을 하게 되어 보다 편리하고 쉽게 표현을 구성해나갈수 있다.
DOCTYPE은 그 문서의 규약(DTD)에 따른 여러 종류가 있다.
http://gutfeldt.ch/matthias/articles/doctypeswitch/table.html
위 링크를 따라가면 종류별로 DOCTYPE이 나와있고
DOCTYPE별로 브라우저가 어떤 방식으로 렌더링 하는지(quirk, standard)에 대해서 자세히 나와있다.
그런데 요근래들어서 어처구니 없는 사이트를 몇개 발견하였다.
DOCTYPE을 잘못 복사하기를 했는지 잘못타이핑 했는지 모르겠지만
오타가 난 DOCTYPE선언을 한곳도 있었고(IE에서 물론 표준 렌더링이 되지 않는다)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
HTML 4.01의 위의 두가지 DOCTYPE을 선언하고 작업을 한 경우도 발견하였다.
언듯보면 어 맞는거 같은데 라고 생각할지 모르겠지만
위의 링크에도 나와있듯이
이 선언은 대다수의 브라우저가 quirk모드로 렌더링을 하게 된다.
DOCTYPE은 웹표준준수의 첫걸음입니다.
시작이 반이라는 말도 있지요.
DOCTYPE 제대로 선언합시다.
