웹표준 DOCTYPE과 DTD 그리고 Quirks Mode

황제낙엽 2011.02.10 11:44 조회 수 : 251

sitelink1 http://zine.standardmag.org/ 
sitelink2  
sitelink3 http://1 
sitelink4 http://ko 
extra_vars5  
extra_vars6 sitelink1 

Quirks Mode

웹을 사용할 수 있도록 해주는 브라우저.
이 시장을 장악하려는 브라우저 벤더들의 노력은 웹 사이트 제작자들의 코드까지 바꿔놓았다.
브라우저 제작사의 무기인 Quirks Mode란 무엇인지, 왜 중요한지 알아본다.

...

DOCTYPE 선언하지 않는다면 브라우저는 현재 페이지가 어떠한 HTML 버전을 사용하고 있는지 인식할 수 없기 때문에 호환모드(quirks mode)로 변환을 해서 rendering(화면구현)하게 된다.
브라우저가 알아서 호환모드로 변환하여 rendering하는 것을 어찌보면 브라우저가 똑똑하다고 생각할 수 있겠지만 실제론 그 반대이다. 마크업과 스타일시트의 조합으로 멋진 사이트를 제작했다 하더라도 호환모드로 rendering한 브라우저는 매번 똑같은 화면묘사를 보여준다는 보장을 할 수 없기때문에 사용자에게 큰 혼란을 가져다 줄 수도 있기 때문이다.

다음 코드는 W3C에서 권장하는 DOCTYPE 의 종류이다. (참고 : http://www.w3.org/QA/2002/04/valid-dtd-list.html)

HTML 4.01

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

XHTML 1.0

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

XHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

 ...

대부분의 랜더링 모드 이슈는 인터넷 익스플로러의 것만을 논하고 있는데 이는 인터넷 익스플로러의 표준, 호환모드가 랜더링에 있어서 가장 차이가 크기 때문이다.(부연 참고) 보통 알려져 있는 것 같이 패딩과 보더의 구현이 확연하게 다르고 모드의 변화에 따라서 몇몇 버그도 수정이 되기 때문에 인터넷 익스플로러를 위해서 랜더링 모드를 주의해서 선택해야 한다.
...

솔루션이 웹 에디터를 가지고 있으면 이 웹 에디터가 표준 랜더링 모드를 지원하는지, 표준 랜더링 모드에서 정상적으로 작동하는지를 미리 체크해 봐야 한다. 외산의 웹 에디터들의 경우 표준/호환 모드 양쪽에서 잘 작동하는 경우가 대부분이지만 국산 웹 에디터의 경우 호환 모드만 사용해야 하고 표준모드를 사용할 경우 화면이 제대로 출력이 되지 않고 기능이 작동하지 않는 경우가 대부분이다.
...

호환모드에서만 작동하는 스크립트 기능들이 있는지 검토해 보아야 한다. 가장 대표적인 예는 화면 옆에서 스크롤에 따라서 같이 움직이는 배너와 같은 기능이 있다. 화면의 스크롤이나 화면 크기를 참조해서 작동하는 스크립트의 경우 호환모드에서만 작동할 가능성이 높다. 마우스 클릭을 하면 레이어를 띄우는 스크립트나 달력에서 날짜를 선택하게 하는 스크립트 등도 이러한 경우에 속한다. 스크립트가 간단하면 표준모드에서 작동할 수 있게 수정해서 써도 되지만 그렇지 않은 경우에는 충분히 고려해야 한다.
...

DTD의 선택

1. Strict 이냐? Transitional 이냐?

2. HTML 이냐? XHTML 이냐?

 


- 부연 -

다음과 같은 메타 태그로 browser 의 document mode 를 설정할 수 있다.

<meta content="IE=Edge" http-equiv="X-UA-Compatible"/>

content 속성내의 IE 에 설정할 수 있는 값은 다음과 같다

  - 6 : IE6

  - 7 : IE7

  - 8 : IE8

  - 9 : IE9

  - Quirks : IE5

  - Edge : browser 버전에 따른다

 

스크립트로 정의한 meta 의 정보를 살펴볼 수 있다.

  -> document.getElementsByTagName('meta');

단, meta 정보는 페이지가 로드되면서 초기화되기 때문에 스크립트에서 조작할 수는 없다.

, , , 이 게시물을
목록
쓰기 태그