컨텐츠 바로가기


사용자 가이드 상세



쿼크모드(Quirks mode)와 DOCTYPE




1. 쿼크모드(Quirks mode)


다양한 환경에서도 동일한 디자인과 기능을 구현하기 위해 2008년 웹표준 준수지침이 제정되었습니다. 그에 따라 최근에는 웹사이트들이 웹표준에 준수하여 제작됩니다.

이때 쿼크모드는 예전에 만들어진 비표준 웹페이지들이 최신 버전의 브라우저에서 깨져보이지 않게 하위 브라우저와의 호환성을 유지하기 위해 사용되는 문서모드입니다.

이 모드에서는 예전 버전에 맞는 비표준적인 화면도 잘 나올수 있게 해줍니다. 웹표준으로 제작된 문서는 브라우저에서 표준모드(standard mode)로 렌더링 됩니다.

이러한 이유로, 웹표준으로 만들어진 최신 문서를 쿼크모드로 렌더링하게 되면 동일한 HTML, CSS, Javascript 라도 웹 브라우저마다 서로 다르게 해석하여 디자인이 틀어지거나, 잘 작동하던 기능이 이상하게 작동을 하는 등 다른 결과물을 보여주게 됩니다.

그러므로 최신문서를 예전문서로 판단하여 쿼크모드로 렌더링 되지 않도록 주의해야 합니다.



* 웹표준이란?


웹표준(Web Standards)은 웹에서 표준으로 사용되는 기술의 총칭으로 대표적인 국제적 표준화 단체인 W3C가 정한 웹을 만드는 기술 권고안을 말합니다.

웹표준을 준수하면 다양한 브라우저에서 동일한 디자인과 컨텐츠를 제공 할수 있습니다.

또한 포털사이트(구글, 네이버, 다음, 야후 등)에 노출 빈도가 높아져 검색결과 페이지에서 상위에 랭크되며 이를 통한 직, 간접적 방문자수의 증가를 기대할수 있습니다.



* 브라우저는 문서가 최신인지 오래된 문서인지 어떻게 판단할까?


브라우저는 문서 상단에 있는 DOCTYPE(Document type), DTD(Document Type Defination)을 읽고 쿼크모드 혹은 표준모드로 렌더링합니다.

IE브라우저에서 F12(개발자 도구)를 열면 문서모드와 DOCTYPE을 확인할수 있습니다.








2.DOCTYPE과 DTD


DOCTYPE(독타입)의 구성은 PUBLIC 문자열과 FPI(formal public identifier), FSI(formal system identifier)로 이루어져 있습니다.

DOCTYPE(독타입)은 HTML이 어떤 버전으로 작성되었는지 미리 선언하여, 웹브라우저가 내용을 올바로 표시할수 있도록 해줍니다.


1. FPI와 FSI를 포함하는 DOCTYPE의 예

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


2. FPI만 선언되어 있는 DOCTYPE의 예

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



DOCTYPE의 버전 종류


HTML5

HTML4.01 Strict
HTML4.01 Transitional
HTML4.01 Frameset

XHTML1.0 Strict
XHTML1.0
Transitional
XHTML1.0 Frameset

XHTML 1.1


DTD - Document Type Definition의 약자로 strict, transitional(권장), frameset의 세가지 형태가 있습니다.





※ 쿼크모드는 DOCTYPE의 영향을 받습니다.


쿼크모드(Quirks mode)로 렌더링 하는 경우

1. DOCTYPE을 선언하지 않거나, 잘못 선언한 경우('<!DOCTYPE' 앞에 스페이스 한칸이라도 있다면 무시하게 되니, 꼭 화면에 띄어쓰기 없이 맨 앞에 있어야 합니다.)
2. FSI를 생략하고 이와 같이 DOCTYPE을 선언하는 경우 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


표준모드(standard mode) 또는 엄격모드(strict mode 또는 Almost standard mode)로 렌더링 하는 경우

HTML 4.01 문서

<!DOCTTPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DO
CTTPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!DOCTTPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">

XHTML 1.0 문서

<
!DOCTTPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
!DOCTTPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">





3. IE브라우저에서 쿼크모드로 전환되는 것을 방지하는 방법



이 메타태그는 최신모드로 지정된 DOCTYPE에 상관없이 IE8이상 버전에서 항상 최신 표준 모드로 렌더링해줍니다. (호환성보기 메타태그 편 참고)


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



TOP

목록 게시안함 삭제 수정