🌈 학습을 위해
Must-Know-About-Frontend에서 가져온 내용을 수정, 추가하여 작성한 글입니다. 기존 내용과 대부분 유사하며 Summary 부분은 추가하였습니다.
Summary
| 설명 | |
|---|---|
| 카테고리 | 브라우저의 렌더링 모드 |
| 표준 모드 | 웹 표준에 맞는 웹페이지를 렌더링하기 위한 모드 (DOCTYPE 명시, 권장) |
| 호환 모드 | 웹 표준에 맞지 않는 오래된 웹 페이지를 렌더링하기 위한 모드 (DOCTYPE 명시 X) |
과거 웹 페이지는 넷스케이프용과 익스플로러용의 두 가지 버전으로 만들어졌다. W3C에서 웹 표준을 제정할 당시, 기존 브라우저들은 새롭게 만들어진 표준을 기반으로 대부분의 웹 사이트들을 제대로 표현할 수 없었다. 따라서, 브라우저들은 새로운 표준으로 제작된 사이트를 렌더링하기 위한 모드(표준 모드, standards mode)와 예전 방식으로 제작된 사이트를 렌더링하기 위한 모드(호환 모드, quirks mode) 두 가지를 제공한다.
브라우저는 HTML 문서가 DOCTYPE을 가지고 있지 않으면 호환 모드로 렌더링하고, 가지고 있다면 주어진 DOCTYPE에 맞게 표준 모드로 렌더링한다. 호환 모드로 렌더링하게 되면 오래된 웹페이지들을 최신 버전의 브라우저에 깨지지 않게 조절하기 때문에 브라우저마다 다르게 보일 수 있다. 예를 들어, IE의 경우 호환 모드에서 박스 모델(Box model)을 잘못 해석하지만, 나머지 브라우저들은 그렇지 않다.
결론적으로, 정말 특별한 경우가 아니라면 DOCTYPE을 명시하여 브라우저가 표준 모드로 렌더링하게 하자. 현재 시점에서 HTML5에서 권장하는 방식인 <!DOCTYPE html> 을 사용하는 것이 가장 바람직하다.
