쿼크모드(Quirks mode)와 표준모드(Standard mode)
페이지 정보
작성자 JMStudy 작성일14-09-12 10:53 조회9,950회 댓글0건본문
즉 브라우저는 선언된 doctype에 따라 렌더링할 모드를 선택하게 되는데 이 과정을 doctype sniffing 또는 doctype switching이라고 한다.
브라우저가 출력하고자 하는 문서가 최신이라고 판단하면 표준모드(standard mode)로 렌더링을 하는데 CSS2 스펙에 따라 CSS가 적용되었다는 것을 의미한다.
반면 브라우저가 예전문서라고 판단을 하면 쿼크 모드(quirks mode)로 렌더링을 하게 된다. 이 모드에서는 이전 세대의 브라우저에 맞는 비표준적 방법의 CSS를 적용한다.
즉 쿼크모드의 목적은 오래된 웹페이지들이 최신 버전의 브라우저에서 깨져 보이지 않으려는 것에 있다.
*Opera(7.5
이상), Firefox, 그리고 Safari는 위에 언급된 두 가지 모드 외에 almost standard mode라고 불리는
하나의 모드를 더 지원하고 있는데, 이 모드일 경우 테이블 셀 안에 있는 이미지 레이아웃은 CSS2의 스펙을 따르지 않고 스
모드로 구현되어 있다. 이런 부분을 제외하고는 표준모드와 동일하다고 볼 수 있다.
그렇다면 브라우저는 문서가 최신인지 오래된 문서인지 어떻게 판단할까?
바로 문서 상단에 있는 DTD(Document Type Defination)를 보고 쿼크모드 혹은 표준모드로 렌더링한다.
먼저 DTD의 구성은 PUBLIC 문자열과 FPI(formal public identifier), FSI(formal system identifier) 로 이루어져 있다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
A : Almost Standard mode
DTD Switching에 따른 웹 브라우저별 렌더링 모드 전환 표(참조문서) | |||||
DTD의 종류 | IE6,7 | FF2 | OP9 | SF2 | |
None | DTD가 없는 경우 | Q | Q | Q | Q |
HTML 4.01 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> | Q | Q | Q | Q |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> | A | A | A | A | |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> - 표준 에러 출력 대기 | A | S | S | S | |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> | A | S | S | S | |
XHTML 1.0 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | A | A | A | A |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | A | S | S | S | |
여기서 한 가지 주의할 점은 Quirks Mode라고 해서 모든 브라우저가 동일하게 렌더링 하는것은 아니라는 점 이다. 브라우저마다 Quirks Mode 상태일때 호환시키려고 하는 요소들이 각각 다르다.
예를들면 Quirks Mode 상태일때 IE는 Box Model을 잘못 해석하지만 나머지 브라우저들은 Quirks Mode 상태라고 할지라도 Box Model에 대하여 표준을 준수하기 때문이다.
렌더링 모드(DTD)를 전환했을 때 화면에 차이가 발생한다는 것은 해당 브라우저가 어떤 속성을 Quirks Mode 상태로 렌더링 했다는 뜻이고 렌더링 모드(DTD)가 전환될 때 렌더링의 차이가 없는 경우도 있다. 이런 경우는 해당 브라우저가 Quirks Mode 상태라고 할지라도 해당 속성에 대하여 W3C표준을 지원한다는 뜻이다.
Rendering Mode에 따른 주요 이슈별 표준 지원 현황(참조문서) | ||||||||||
Browser→ | IE6 | IE7 | FF2 | OP9 | SF2 | |||||
Mode→ | Quirks | Strict | Quirks | Strict | Quirks | Strict | Quirks | Strict | Quirks | Strict |
width & padding, border width값에 padding, border값이 포함되지 않는것이 표준 | N | S | N | S | S | S | S | S | S | S |
margin:0 auto width값이 적용된 block-lebel 요소는 가운데로 정렬되는 것이 표준 | N | S | N | S | S | S | S | S | S | S |
.test:hover 가상선택자는 모든 선택자(type selector, id selector, class selector)와 조합될 수 있음 | N | N | N | S | N | S | S | S | S | S |
댓글목록
등록된 댓글이 없습니다.