지난 글에서는 DOCTYPE이 무엇인지, 그리고 왜 필요한지 살펴보았습니다. 이번 글에서는 브라우저가 동작하는 다양한 렌더링 모드의 차이점을 집중적으로 다루겠습니다. 바로 표준 모드(Full Standards Mode), 거의 표준 모드(Almost Standards Mode), 그리고 쿼크 모드(Quirks Mode)입니다.
이 글은 지난 DOCTYPE 관련 글과 밀접하게 연관되어 있으므로, 아직 읽지 않으셨다면 먼저 이전 글을 확인해 보시길 추천합니다.
질문: 표준 모드, 거의 표준 모드, 쿼크 모드의 차이는 무엇일까?
세 가지 렌더링 모드는 모두 W3C 표준이 초기에 구현되던 시절과 깊은 관련이 있습니다.
DOCTYPE은 브라우저에게 "이 문서가 어떤 종류의 문서인지" 알려주기 위해 도입되었습니다. 만약 개발자가 HTML 문서에 DOCTYPE을 포함하지 않으면, 브라우저는 자신이 어떤 유형의 문서를 다루고 있는지 파악할 방법이 없습니다.
그래서 브라우저는 안전을 위해 문서를 옛날 방식 그대로 호환성 있게 렌더링하는데, 이것이 바로 소위 쿼크 모드입니다. 이 모드에서는 넷스케이프 내비게이터 4(Navigator 4), 인터넷 익스플로러 4와 5 같은 구형 브라우저들과의 호환성을 유지하려고 합니다.
문제는 구형 브라우저들이 CSS 지원이 매우 빈약했던 시대의 산물이라는 점입니다. 결과적으로 상당 부분의 CSS 스타일이 적용되지 않고, 웹사이트는 여러분이 기대한 모습과 전혀 다르게 보이게 됩니다.
물론 어떤 개발자들은 여러 가지 이유로 일부러 DOCTYPE을 생략해 문서를 쿼크 모드로 렌더링하기도 합니다.
예를 들어, "내 웹사이트가 1998년에는 어떻게 보였을까?"가 궁금하다면 말이죠.
꽤 훌륭한 이유라고 생각합니다.
그럼 표준 모드와 거의 표준 모드는 무엇이 다를까?
이제 쿼크 모드가 무엇인지, 그리고 우리의 소중한 웹사이트를 어떻게 망가뜨리는지 알았으니, 표준 모드와 거의 표준 모드의 차이를 살펴볼 차례입니다.
거의 표준 모드는 '제한적 쿼크 모드(Limited Quirks Mode)'라고도 불립니다. 이름에서 짐작할 수 있듯이, 거의 표준 모드에서 렌더링된 콘텐츠는 표준 모드와 거의 완전히 동일합니다.
'거의'라는 말이 문제죠.
I. Tiny Stories — 세상에서 가장 슬픈 단어
세상에서
가장 슬픈 단어는
바로 '거의'라는 말.
그는 거의 사랑에 빠졌고,
그녀는 거의 그에게 잘 맞았고,
그는 거의 그녀를 붙잡았고,
그녀는 거의 기다렸고,
그는 거의 살아남았고,
그들은 거의 이루어냈네.— Nikita Gill
아무튼, 계속 진행하겠습니다.
거의 표준 모드는 문서를 렌더링할 때 표 셀(table cell)의 수직 크기 조정과 관련된 몇 가지 쿼크만 남겨둡니다. 이는 주로 이미지가 포함된 테이블 셀 하단에 불필요한 공백이 생기는 현상 등에서 나타납니다.
반면 표준 모드는 최신 HTML 및 CSS 사양에 따라 문서를 렌더링합니다. 물론 최신 브라우저들 사이에도 화면 렌더링 방식에는 여전히 미세한 차이가 존재하지만, Normalize.css나 Reset CSS를 활용하면 이러한 불일치를 줄여 정신 건강을 지킬 수 있습니다.
따라서 여러분의 웹사이트에 쿼크(버그)가 있다면, 그 원인은 아마도 브라우저가 아니라 여러분의 코드일 가능성이 높습니다.
미안합니다.
실무 팁: 올바른 DOCTYPE 선언
현대 웹 개발에서는 복잡한 DOCTYPE이 필요 없습니다. HTML5 DOCTYPE 한 줄이면 브라우저는 항상 표준 모드로 문서를 렌더링합니다.
<!DOCTYPE html>
이 짧은 선언 하나로 쿼크 모드를 확실하게 피할 수 있으니, 새 프로젝트를 시작할 때 반드시 문서 최상단에 포함하는 습관을 들이세요.
마치며
누군가 표준 모드, 거의 표준 모드, 쿼크 모드의 차이를 묻는다면, 딱 세 가지만 기억하시면 됩니다. 구형 브라우저, 깨진 CSS, 그리고 세상에서 가장 슬픈 단어 '거의'.
다양한 브라우저 모드를 활성화하는 방법에 대해 더 깊이 알고 싶다면 Henri Sivonen이 작성한 훌륭한 개요 문서를 참고하세요. 또한 MDN(Mozilla Developer Network)에서 쿼크 목록을 대략적으로 확인할 수 있습니다.
다음 글에서는 HTML과 XHTML의 차이점을 다룰 예정입니다. 생각보다 훨씬 흥미로운 주제가 되고 있으니 함께해 주세요! 곧 다시 만나요!
이 시리즈에서 답변하고 있는 질문 목록은 아일랜드 더블린의 리쿠르팅 에이전시 Verify의 Rose가 친절하게 제공해 주었습니다.
이 글이 유익했다면 댓글이나 클랩(추천)을 남겨주세요. 감사합니다!
freeCodeCamp의 오픈소스 커리큘럼은 4만 명 이상이 개발자로 취업하는 데 도움을 준 무료 코딩 학습 플랫폼입니다. 지금 바로 시작해 보세요!