어제의 나보다 성장한 오늘의 나

호환 모드와 표준 모드 본문

공부/HTML

호환 모드와 표준 모드

NineOne 2021. 4. 25. 00:45

과거 웹 페이지는 넷스케이프 내비게이터(Netscape Navigator)용과 마이크로소프트 인터넷 익스플로러(Microsoft Internet Explorer)용의 두 가지 버전으로 만들어졌다. W3C에서 웹 표준을 제정할 당시 기존 브라우저들은 새롭게 만들어진 표준을 기반으로 대부분의 웹 사이트들을 제대로 표현할 수 없었다. 따라서! 브라우저들은 새로운 표준으로 제작된 사이트와 예전 방식으로 제작된 사이트를 렌더링 하기 위해 두 가지 모드를 제공하였다.

  1. 호환 모드(quirks mode)
    • 기존 방식으로 제작된 웹사이트들을 표현하기 위해 내비게이터 4와 인터넷 익스플로러 5의 비표준 동작들을 에뮬레이션 한다. 
  2. 완전 표준 모드(full standards mode; 이하 표준 모드)
    • HTML과 CSS에 의해 웹 페이지가 표시된다.

 

그렇다면? 브라우저는 무엇을 보고 모드를 결정할까?

문서의 첫 부분에 기술된 DOCTYPE을 참조한다. 웹 페이지를 표준 모드로 렌더링 하려고 한다면 다음과 같이 페이지 첫 부분에 DOCTYPE을 기술해야 한다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8>
    <title>Hello World!</title>
  </head>
  <body>
  </body>
</html>
  • 예제에서 사용한 <!DOCTYPE html>은 HTML5에서 권장하는, 가장 간단한 방식이다. 
  • 오늘날 현존하는 모든 브라우저들은 DOCTYPE은 완전 표준 모드로 렌더링 할 것이다.
  • 만약 다른 DOCTYPE을 사용하게 된다면, 해당 페이지가 거의 표준 모드나 호환모드로 렌더링 될 수 있는 위험이 있다.

반드시! DOCTYPE은 HTML 문서 첫 부분에 기술하자.

 

자 그럼 DOCTYPE은 무엇일까?

  • Document Type의 약자로, HTML이 어떤 버전으로 작성되었는지 미리 선언하여 웹브라우저가 내용을 올바로 표시할 수 있도록 해주는 것이다.
  • 선언하지 않을 시 호환 모드로 동작한다.
  • 호환 모드의 경우 각 브라우저마다 문서를 나타내는 방식이 다르기 때문에 크로스 브라우징 이슈가 휠씬 심해지게 된다.

DTD(Document Type Definition)

  • 간단히 말해 브라우저에게 '이 문서가 어떤 문서 형식을 따르고 있다'라고 알려주는 것이다.
  • 즉, HTML 문서가 어떤 문서 형식을 따르는지 DOCTYPE에서 DTD를 지정하는 것이다.

HTML5 이전의 doctype은 SGML 기반이라 뒤에 DTD 참조 URL이 들어간다. 하지만 HTML5의 경우 SGML에 기반을 두지 않아서 DTD참조가 필요 없으며, 최소한의 코드 작성이 기본 방향이라 매우 간단히 선언할 수 있다.

DTD 선언은 태그가 아니기 때문에 </!DOCTYPE html> 이렇게 닫는 부분이 없다. 웹 표준에 있어서 DTD는 가장 먼저 선언되어한다.

 

출처

저작자표시 비영리 변경금지

'공부 > HTML' 카테고리의 다른 글

[HTML] 시멘틱 구조 태그  (0) 2021.04.04
[HTML5] 오디오 태그, 비디오 태그  (0) 2021.04.02
[HTML5] 이미지 크기는 아는데 아직 이미지가 없을때 사용하는 방법  (0) 2021.04.02
HTML5 페이지 구조  (0) 2021.04.02
'공부/HTML' Related Articles more
Comments