쿼크 모드

"오늘의AI위키"는 AI 기술로 일관성 있고 체계적인 최신 지식을 제공하는 혁신 플랫폼입니다.
"오늘의AI위키"의 AI를 통해 더욱 풍부하고 폭넓은 지식 경험을 누리세요.

1. 개요
2. 쿼크 모드의 발생
- 2.1. DOCTYPE 선언 문제
- 2.2. 기타
3. 렌더링 모드 간의 차이점
4. 제한적 쿼크 모드 (Limited Quirks Mode)
5. 렌더링 모드 확인 방법
6. 문서 유형별 렌더링 모드
참조

1. 개요

쿼크 모드는 웹 브라우저가 HTML 문서를 렌더링하는 방식 중 하나로, 문서 형식 정의(DOCTYPE)의 유무 및 형식에 따라 결정된다. DOCTYPE이 없거나, 문법적으로 유효하지 않거나, DOCTYPE 내 URL이 생략된 경우 쿼크 모드로 해석되며, 이는 브라우저가 이전 버전과의 호환성을 위해 CSS 표준을 따르지 않고 자체적인 방식으로 페이지를 렌더링함을 의미한다. 쿼크 모드와 표준 모드는 CSS 박스 모델, 인라인 콘텐츠의 수직 정렬, 테이블 글꼴 스타일 상속 등에서 차이를 보이며, 제한적 쿼크 모드라는 변형도 존재한다.

더 읽어볼만한 페이지

웹 브라우저 - 방문 기록
방문 기록은 사용자가 방문한 웹 페이지 정보를 저장하여 이전 페이지 접근성을 높이고, 타겟 광고 등에 활용되지만, 개인 정보 침해와 같은 프라이버시 문제를 야기할 수 있다.
웹 브라우저 - NPAPI
NPAPI는 웹 브라우저 플러그인이 브라우저와 상호 작용하는 인터페이스였으나, 새로운 웹 표준 등장, API 노후화, 보안 문제로 쇠퇴하여 주요 브라우저들이 지원을 중단했고, 대한민국에서는 액티브X 대안으로 고려되다 HTML5 전환으로 과도기적인 기술로 사용되었다.

쿼크 모드
쿼크 모드
쿼크 모드	Quirk mode
스탠더드 모드	Standard mode
기술 정보
종류	호환성 기술
목적	오래된 웹 페이지와의 호환성 유지
작동 방식	브라우저가 특정 HTML 및 CSS 해석에서 W3C 표준을 따르지 않음
상세 내용
설명	웹 브라우저가 오래된 웹 페이지를 렌더링할 때 호환성 유지를 위해 사용하는 기술
트리거 조건	문서가 DOCTYPE (문서 형식 정의)을 포함하지 않음 DOCTYPE이 오래된 형식을 사용함
영향	박스 모델 해석의 차이 이미지 처리 방식의 차이 CSS 속성 지원의 제한
스탠더드 모드	웹 브라우저가 W3C 표준을 준수하여 웹 페이지를 렌더링하는 모드
장점	오래된 웹 페이지가 깨지지 않고 표시됨
단점	최신 웹 표준을 따르지 않아 웹 페이지가 일관성 없이 보일 수 있음 웹 개발자가 웹 표준을 준수하는 것을 어렵게 함

2. 쿼크 모드의 발생

웹 페이지의 구조와 모양은 HTML과 CSS라는 두 가지 표준화된 언어 조합으로 설명된다. HTML은 페이지의 구조와 내용을, CSS는 다양한 미디어에서 페이지가 렌더링되는 방식을 지정한다.

그러나 대부분의 구형 웹 브라우저는 이러한 언어 사양을 완전히 구현하지 않았거나 사양이 확정되기 전에 개발되었다.^[1] 결과적으로 많은 구형 웹 페이지는 이전 브라우저의 불완전하거나 잘못된 구현에 의존하며, 이러한 브라우저에서 처리될 때만 의도한 대로 렌더링된다.

최신 웹 브라우저는 표준 HTML 및 CSS에 대한 지원이 크게 증가했지만, 구형 브라우저 특성에 의존하는 레거시 문서와의 하위 호환성을 유지해야 한다. 또한, 브라우저 개발자가 도입한 호환성 해결 방법으로 인해 표준화된 방법을 이해할 필요가 없기 때문에 많은 새로운 웹 페이지가 이전 방식으로 계속 제작되고 있다.

최신 웹 브라우저는 가능한 가장 많은 수의 웹 페이지와 호환성을 유지하기 위해 여러 렌더링 모드로 개발된다. "노 쿼크 모드"에서는 페이지가 HTML 및 CSS 사양에 따라 렌더링되고, "쿼크 모드"에서는 이전 브라우저의 동작을 에뮬레이트한다. 일부 브라우저는 "거의 표준" 모드를 사용하여 테이블 셀 크기 조정을 위한 쿼크를 구현하는 동시에 다른 방식으로 사양을 준수한다.^[2]

쿼크 모드는 다음과 같은 경우에 발생한다.

DOCTYPE 선언이 없거나 잘못된 경우
DOCTYPE 선언 내의 URL이 생략된 경우
인터넷 익스플로러의 경우, DOCTYPE 선언 윗쪽에 주석이나 다른 문자가 있는 경우

2. 1. DOCTYPE 선언 문제

웹 브라우저가 웹 페이지를 렌더링하는 방식은 DOCTYPE 선언에 따라 달라진다. DOCTYPE 선언이 없거나 잘못된 경우, 웹 브라우저는 쿼크 모드로 문서를 해석하여 오래된 웹 브라우저의 동작을 흉내낸다.

DOCTYPE 선언 누락 또는 오류: DOCTYPE 선언이 없거나, URL이 생략된 경우 쿼크 모드가 발생한다. 예를 들어,

```html4strict

```

와 같이 URL이 없는 DOCTYPE은 쿼크 모드를 유발한다.

인터넷 익스플로러의 특이 케이스: 인터넷 익스플로러는 DOCTYPE 선언 위에 주석이나 다른 문자가 있으면 쿼크 모드로 해석한다. 예를 들어

```html

"http://www.w3.org/TR/html4/strict.dtd">

```

와 같이 DOCTYPE선언 앞에 주석이 있는 경우, 인터넷 익스플로러는 쿼크모드로 해석한다.

인터넷 익스플로러 6은 DOCTYPE 앞에 XML 프롤로그가 있으면 쿼크 모드로 렌더링하는 예외적인 경우가 있었다.

```html

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

```

하지만 이 문제는 인터넷 익스플로러 7 버전에서 해결되었으며, XML 프롤로그는 무시된다.^[6] 월드 와이드 웹 컨소시엄은 XHTML 문서 작성 시 XML 선언을 생략하는 것을 고려할 수 있다고 제안한다.^[7]

2. 2. 기타

웹 브라우저가 문서를 쿼크 모드로 해석하는 경우는 다음과 같다.

DOCTYPE 선언이 없거나 잘못된 경우
DOCTYPE 선언 내의 URL이 생략된 경우
인터넷 익스플로러의 경우, DOCTYPE 선언 윗쪽에 주석이나 다른 문자가 있는 경우

3. 렌더링 모드 간의 차이점

웹 페이지는 HTML과 CSS라는 두 가지 표준화된 언어로 구성된다. HTML은 페이지의 구조와 내용을, CSS는 페이지가 화면에 표시되거나 인쇄될 때, 또는 스크린 리더로 읽을 때의 스타일을 지정한다.

초기 웹 브라우저들은 이러한 표준을 완전히 따르지 않았거나, 표준이 확정되기 전에 개발되었다. 예를 들어, 마이크로소프트 인터넷 익스플로러 5.0 버전(매킨토시 플랫폼, 2000년 출시)은 CSS 레벨 1을 완벽하게 지원한 최초의 주요 웹 브라우저였다.^[1] 이로 인해 많은 பழைய 웹 페이지들은 초기 브라우저의 불완전한 구현에 맞춰 작성되었고, 해당 브라우저에서만 제대로 표시되었다.

최신 웹 브라우저들은 표준 HTML 및 CSS 지원을 개선했지만, 이전 브라우저에 맞춰 작성된 수많은 레거시 문서들 때문에 어려움을 겪었다. 브라우저 개발자들은 표준을 따르면서도 이전 페이지와의 하위 호환성을 유지해야 했다.

최신 웹 브라우저들은 다양한 렌더링 모드를 제공하여 호환성을 확보한다. "노 쿼크 모드"에서는 HTML 및 CSS 표준에 따라 페이지를 표시하고, "쿼크 모드"에서는 이전 브라우저의 동작을 모방한다. 일부 브라우저는 "거의 표준" 모드를 사용하여 테이블 셀 크기 조정과 같은 일부 기능에서만 쿼크 모드를 적용하고, 다른 부분에서는 표준을 따르기도 한다.^[2]

3. 1. CSS 박스 모델

인터넷 익스플로러 박스 모델 버그(CSS Internet Explorer box model bug)는 쿼크 모드와 노 쿼크 모드의 두드러진 차이점 중 하나이다. 인터넷 익스플로러 6 버전 이전에는 요소의 너비를 결정하는 알고리즘이 CSS 명세와 충돌했다. 인터넷 익스플로러의 인기로 인해 많은 페이지가 이 비표준 알고리즘에 의존했다. 인터넷 익스플로러 6 버전부터는 노 쿼크 모드에서 CSS 명세의 알고리즘을 사용하고, 쿼크 모드에서는 이전의 비표준 알고리즘을 사용한다.

또 다른 차이점은 특정 유형의 인라인 콘텐츠의 수직 정렬이다. 많은 구형 브라우저는 이미지를 포함하는 박스의 하단 경계선에 정렬했지만, CSS 명세는 박스 내 텍스트의 기준선에 정렬하도록 요구한다. 노 쿼크 모드에서는 게코 기반 브라우저가 기준선에 정렬되고, 쿼크 모드에서는 하단에 정렬된다.^[3]

또한, 많은 구형 브라우저는 테이블 내 글꼴 스타일 상속을 구현하지 않았다. CSS 명세는 글꼴 스타일이 테이블로 상속되어야 한다고 요구했지만, 글꼴 스타일은 문서 전체에 대해 한 번, 테이블에 대해 다시 한 번 지정해야 했다. 글꼴 크기가 상대 단위로 지정된 경우, 표준 준수 브라우저는 기본 글꼴 크기를 상속한 다음 테이블 내에서 상대 글꼴 크기를 적용한다. 예를 들어, 기본 글꼴 크기를 80%로 선언하고 테이블 글꼴 크기를 80%로 선언하는 페이지는 표준 준수 브라우저에서 64%(80%의 80%)의 글꼴 크기로 테이블을 표시한다. 결과적으로 브라우저는 일반적으로 쿼크 모드에서 테이블로 글꼴 크기를 상속하지 않는다.^[4]

3. 2. 인라인 콘텐츠 수직 정렬

많은 구형 브라우저는 이미지를 포함하는 박스의 하단 경계선에 이미지를 정렬했지만, CSS 명세는 박스 내 텍스트의 기준선에 정렬하도록 요구한다. 노 쿼크 모드에서는 게코 기반 브라우저가 기준선에 정렬되고, 쿼크 모드에서는 하단에 정렬된다.^[3]

3. 3. 테이블 글꼴 스타일 상속

인터넷 익스플로러 박스 모델 버그(CSS Internet Explorer box model bug)와 더불어, 많은 구형 브라우저들은 테이블 내 글꼴 스타일의 상속을 구현하지 않았다. CSS 명세는 글꼴 스타일이 테이블로 상속되어야 한다고 요구함에도 불구하고, 글꼴 스타일은 문서 전체에 대해 한 번, 테이블에 대해 다시 한 번 지정해야 했다. 글꼴 크기가 상대 단위로 지정된 경우, 표준 준수 브라우저는 기본 글꼴 크기를 상속한 다음 테이블 내에서 상대 글꼴 크기를 적용한다. 예를 들어, 기본 글꼴 크기를 80%로 선언하고 테이블 글꼴 크기를 80%로 선언하는 페이지(글꼴 크기를 제대로 상속하지 않는 브라우저에서 80% 크기를 보장하기 위해)는 표준 준수 브라우저에서 64%(80%의 80%)의 글꼴 크기로 테이블을 표시한다. 결과적으로 브라우저는 일반적으로 쿼크 모드에서 테이블로 글꼴 크기를 상속하지 않는다.^[4]

4. 제한적 쿼크 모드 (Limited Quirks Mode)

제한적인 쿼크 모드는 이전에는 "거의 표준 모드" 또는 "엄격 모드"라고 알려졌으며, CSS2 명세에 따라 테이블 셀의 "전통적인" 세로 크기를 유지한다. 이 모드는 사파리, 오페라 7.5 이상, 1.0.1 이후의 모든 게코 기반 브라우저 (예: 파이어폭스), 인터넷 익스플로러 8에서 구현되었다.^[2]

"거의 표준" 모드 렌더링은 테이블 셀 내부의 이미지 레이아웃을 제외한 모든 세부 사항에서 "표준" 모드와 일치한다. 테이블 셀 내부의 이미지 레이아웃은 "쿼크" 모드가 작동하는 방식과 동일하게 처리되며, 이는 레거시 브라우저인 인터넷 익스플로러 7 및 이전 버전과 상당히 일치한다. 즉, 테이블 내 슬라이스된 이미지 레이아웃은 "표준" 모드보다는 "쿼크" 또는 "거의 표준" 모드에서 브라우저에서 붕괴될 가능성이 적다.^[5]

5. 렌더링 모드 확인 방법

대부분의 브라우저에서 문서 객체 모델 확장 `document.compatMode`는 현재 페이지의 렌더링 모드를 나타낸다. 표준 모드와 거의 표준 모드에서는 `document.compatMode`가 "CSS1Compat" 값을 포함하는 반면, 쿼크 모드에서는 "BackCompat"과 같다.^[8]

또한, 모질라 파이어폭스 및 오페라에서는 주어진 페이지에 사용 중인 렌더링 모드가 '페이지 정보' 정보 상자에 표시된다.

6. 문서 유형별 렌더링 모드

브라우저는 대부분 페이지에 문서 형식 정의가 있는지 여부에 따라 사용할 렌더링 모드를 결정한다. 전체 DOCTYPE이 있으면 브라우저는 노-쿼크 모드를 사용하고, 없으면 쿼크 모드를 사용한다. 예를 들어, 다음 DOCTYPE으로 시작하는 웹 페이지는 노-쿼크 모드를 트리거한다.

```html

"http://www.w3.org/TR/html4/strict.dtd">

```

다음 DOCTYPE은 문법적으로 유효하지 않다. "PUBLIC" 공용 식별자 키워드가 있지만 공용 식별자(사용 중인 HTML 버전의 이름 표시)와 HTML 문서 형식 정의의 시스템 식별자 URL이 없다. 이는 쿼크 모드를 트리거한다.

```html

```

또한 DOCTYPE을 전혀 포함하지 않는 웹 페이지는 쿼크 모드로 렌더링된다.

이에 대한 한 가지 주목할 만한 예외는 마이크로소프트의 인터넷 익스플로러 6 브라우저로, 전체 DOCTYPE이 지정되었는지 여부에 관계없이 DOCTYPE 앞에 XML 프롤로그가 있으면 페이지를 쿼크 모드로 렌더링한다. 따라서 다음 코드로 시작하는 XHTML 페이지는 IE 6에서 쿼크 모드로 렌더링된다.

```html

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

```

위의 내용은 IE 6에서 '''만''' 쿼크 모드를 트리거하는 데 사용할 수 있으므로 어느 정도 유용하다.

IE의 모든 버전에서 쿼크 모드는 DOCTYPE 앞에 아무 것도 있으면 트리거된다. 예를 들어, 하이퍼텍스트 문서에 DOCTYPE 선언 앞에 주석, 공백 또는 태그가 있으면 IE는 쿼크 모드를 사용한다.

```html

"http://www.w3.org/TR/html4/strict.dtd">

```

XML 선언과 관련된 문제는 인터넷 익스플로러 7 버전에서 수정되었으며, 이 버전에서는 XML 프롤로그가 단순히 무시된다.^[6] 그러나 기존 및 구형 웹 브라우저와의 최대 호환성을 위해 XHTML 사양을 유지 관리하는 월드 와이드 웹 컨소시엄은 XHTML 문서 작성자가 XML 선언을 생략하는 것을 고려할 수 있다고 제안한다.^[7]

헨리 시보노는 다양한 문서 유형과 가장 일반적인 브라우저에서의 처리 방식을 정리하여 페이지가 '''Q'''uirk(쿼크), '''S'''tandards(표준), 또는 '''A'''lmost standards(거의 표준) 모드로 렌더링되는지 여부를 보여주었다. "거의 표준 모드"에 사용된 기준은 비표준 테이블 셀 높이 렌더링이다. 이 표는 Content-Type text/html로 제공되는 콘텐츠에 적용된다. Content-Type application/xhtml+xml로 제공되는 콘텐츠는 Chrome, Firefox, Internet Explorer 9, Safari 및 Opera에서 표준 모드로 렌더링된다. Internet Explorer 6, 7 및 8은 Content-Type application/xhtml+xml을 지원하지 않는다.^[2]

Doctype		NS6	모질라 0.9.5-1.0	IE 8+ 파이어폭스 크롬 사파리 오페라 7.5+ 넷스케이프 7+ 모질라 1.0.1+ Konq 3.5+ HTML5 spec	IE 7 오페라 7.10	IE 6 오페라 7.0	Mac IE 5	Konq 3.2
없음		Q	Q	Q	Q	Q	Q	Q
HTML 2
		Q	Q	Q	Q	Q	Q	Q
HTML 3
		Q	Q	Q	Q	Q	Q	Q
HTML 3.2
		Q	Q	Q	Q	Q	Q	Q
HTML 4.01
Strict	system identifier 포함	S	S	S	A	A	A	A
Strict	system identifier 미포함	S	S	S	A	A	Q	A
Transitional	system identifier 포함	S	S	A	A	A	A	Q
Transitional	system identifier 미포함	Q	Q	Q	Q	Q	Q	Q
HTML5
		Q	S	S	A	A	A
XHTML Basic
system identifier 포함 및 XML 선언 미포함		S	S	S	A	A	A	A
XHTML 1.0
Strict	system identifier 포함 및 XML 선언 포함	S	S	S	A	Q	A	Q
	system identifier 포함 및 XML 선언 미포함	S	S	S	A	A	A	A
	system identifier 미포함 및 XML 선언 미포함	S	S	S	A	A	A
Transitional	system identifier 포함 및 XML 선언 포함	S	S	A	A	Q	A	Q
	system identifier 포함 및 XML 선언 미포함	S	S	A	A	A	A	Q
	system identifier 미포함 및 XML 선언 미포함	S	S	A	A	A	A
XHTML 1.1
system identifier 포함 및 XML 선언 포함		S	S	S	A	Q	A	Q
system identifier 포함 및 XML 선언 미포함		S	S	S	A	A	A	A
Doctype		NS6	모질라 0.9.5-1.0	IE 8+ 파이어폭스 크롬 사파리 오페라 7.5+ 넷스케이프 7+ 모질라 1.0.1+ Konq 3.5+ HTML5 spec	IE 7 오페라 7.10	IE 6 오페라 7.0	Mac IE 5	Konq 3.2

참조

_[1] 웹사이트 Cascading Style Sheets: CSS Browsers http://www.w3.org/St[...] World Wide Web Consortium 2001-12-19
_[2] 웹사이트 Activating Browser Modes with Doctype http://hsivonen.iki.[...] 2011-03-15
_[3] 웹사이트 Images, Tables, and Mysterious Gaps https://web.archive.[...] Mozilla Developer Center 2007-05-27
_[4] 웹사이트 Fixing Table Inheritance in Quirks Mode https://web.archive.[...] Mozilla Developer Center 2007-05-27
_[5] 웹사이트 Gecko's "Almost Standards" Mode https://web.archive.[...] Mozilla Developer Center 2007-05-27
_[6] 웹사이트 The prolog, strict mode, and XHTML in IE http://blogs.msdn.co[...] Microsoft Developer Network 2005-08-15
_[7] 웹사이트 HTML Compatibility Guidelines http://www.w3.org/TR[...] World Wide Web Consortium 2009-02-14
_[8] 웹사이트 Miscellaneous http://www.quirksmod[...] QuirksMode 2009-02-14

본 사이트는 AI가 위키백과와 뉴스 기사,정부 간행물,학술 논문등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다.
모든 문서는 AI에 의해 자동 생성되며, CC BY-SA 4.0 라이선스에 따라 이용할 수 있습니다.
하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다.
따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다.

문의하기 : help@durumis.com