[HTML] 표준 모드와 호환 모드

취준생이라면 알면 좋을 프론트엔드 관련 지식들 자료를 보고 정리한 내용입니다.

 

✅ 표준 모드와 호환 모드

과거의 웹 페이지는 넷스케이프 내비게이터(Netscape Navigator)용과 마이크로소프트 인터넷 익스플로러(Microsoft Internet Explorer)용의 두 가지 버전으로 만들어졌다.

이후 W3C에서 웹 표준을 제정했는데 이 당시 기존의 브라우저들은 새롭게 만들어진 표준을 따르면 웹 사이트를 제대로 표현할 수 없었다.

따라서 브라우저들은 새로운 표준을 기반으로 제작된 사이트와 예전 방식으로 제작된 사이트를 둘 다 렌더링 하기 위해 두 가지 모드를 제공했는데 이들이 바로 표준 모드(standards mode)와 호환 모드(quirks mode)이다.

 

브라우저는 HTML 문서가 DOCTYPE을 가지고 있지 않으면 호환 모드로 렌더링하고 가지고 있다면 주어진 DOCTYPE에 맞게 표준 모드로 렌더링한다.

호환 모드의 목적은 오래된 웹 페이지들이 최신 버전의 브라우저에서도 깨지지 않게 하는데 있다.

하지만 호환 모드가 모든 브라우저를 동일하게 렌더링 하지 않기 때문에 호환 모드로 렌더링 할 경우 브라우저 별로 다르게 보일 수 있다.

예를 들자면 IE를 제외한 나머지 브라우저들은 호환 모드여도 박스 모델을 표준에 따라 해석하지만 IE는 그렇지 않다.

 

 

🔍 참조

호환 모드와 표준 모드 https://developer.mozilla.org/ko/docs/Web/HTML/Quirks_Mode_and_Standards_Mode

호환 모드와 표준 모드 http://chongmoa.com/441