▶ HTML의 문서 타입이란?
개발하다 보면 아무거나 가져다 사용하면서 html 문서 중 저렇게 생긴 거를 봐 왔을 거다.
위 DOCTYPE 선언된 부분을 보면 빨간 박스 되어져 있는 PUBLIC ~~ strict.dtd" 이렇게 된 부분 말이다.
이 문서가 긴 역사를 가진 문서라고 하는데,
이 문서 지금 현재는 <! DOCTYPE html> 이렇게 단순하게 바뀌었는지 역사를 알아보자.
마이크로소프트는 맥용 인터넷 익스플로러 5를 개발하면서 심각한 문제를 발견했는데,
명세를 따르도록 많은 부분을 수정하고 나니 예전 페이지가 제대로 표시되지 않아서,
개발자는 (명세에 따르는 경우에만) 렌더링 되게 했지만
사용자는 깨져야 할 페이지도 렌더링 되길 원했다고 한다.
당시 대부분의 저작자가 넷스케이프 4나 인터넷 익스플로러 4 같은 자주 사용되던 브라우저에서만 깨지지 않도록 페이지를 만든 것이 원인이어서,
맥용 IE5는 기존보다 진화한 브라우저였지만 웹 페이지는 깨져 보였다고 한다.
그래서 마이크로소프트는 한 가지 기발한 생각을 했는데,
대부분의 html 소스에서 doctype은 제일 위에 적혀 있다.
맥용 IE5는 페이지 렌더링 전에 이 문서 타입을 체크했다.
예전에 만들어진 페이지는 문서 타입 자체가 없었고 이점을 활용해
맥용 IE5는 기존 페이지의 경우 옛날 방식으로 렌더링 했다.
페이지에 새 명세서를 적용하려면 <html> 엘리먼트 앞에 적절한 문서 타입만 지정하면 됐다.
이 아이디어는 대다수의 브라우저가 '비표준 모드'와 '표준 모드'를 갖게 돼 감당할 수 없는 지경까지 이르렀고,
그러던 중 모질라가 브라우저 1.1 버전을 출시하려던 때에
'표준 모드'에서 렌더링 되면서도 '비표준 모드'의 기능을 사용하는 페이지를 발견했다.
모질라가 표준 모드에서 비표준 모드 기능을 사용할 수 없도록
렌더링 엔진에서 이를 제거하자마자 수천 개의 페이지가 깨져 버렸다.
이 같은 일을 겪고 나서 급기야 표준에 가깝다는 의미의 '준 표준모드'라는 용어도 생겨났고,
브라우저 모드를 문서 타입으로 구별하는 중요한 과정에 관해 헨리 시보넨은 다음과 같이 세 가지 모드를 설명했다.
▶ 비표준 모드
이 모드에서 브라우저는 1990년 후반에 퍼져 있던 방법으로 만들어진 페이지가 깨지는 현상을 막기 위해 현재의 웹 포맷 표준을 따르지 않을 수 있다.
▶ 표준모드
이 모드에서 브라우저는 최대한 표준 명세를 따라 문서를 처리한다.
HTML5에서는 이를 '비표준 금지 모드'로 칭한다.
▶ 준 표준 모드
파이어폭스와 사파리, 그리고 크롬, 오페라나 IE8은 모두 '준 표준 모드'를 갖는데, 테이블 셀의 높이를 지정할 수 있으며, CSS2 표준을 다소 덜 엄격하게 준수한다. HTML5는 이 모드를 '제한된 비 표준 모드'라고 지칭한다.
이 코드가 현재 브라우저 상에서 '표준 모드'로 실행되는 15개의 문서 타입 중 하나다.
이것 대신 HTML5 문서 타입을 사용할 수도 있는데 더 짧고 단순하면서도 요즘 브라우저에서는 '표준 모드'로 실행된다.
<! DOCTYPE html> 모든 브라우저에서 '표준 모드'로 실행된다.
그렇다 이제 부턴 단순하게 이것만 <! DOCTYPE html> 사용하자!
만약 문서 타입을 적지 않으면? 어떤 문제가 발생이 될까?
문서 타입을 적지 않으면 브라우저는 '비표준 모드'로 렌더링을 시작한다.
이 때문에 에러가 나면 잡기가 힘들고 매우 어려워질 수 있다고 한다.
그러므로 표준모드<! DOCTYPE html> 간단하게 이렇게 사용하자!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>제목</title>
</head>
<body>
</body>
</html>'기록하고 싶은 모든 것 > 지식' 카테고리의 다른 글
| 구글애드센스 무효클릭(티스토리 블로그) 신고하기 (0) | 2022.05.23 |
|---|---|
| 티스토리 구글애드센스(google AdSense) 계좌 등록 방법 (0) | 2022.04.06 |
| 티스토리 블로그 네이버(naver) 검색, 유입 설정하는법, 적용 (0) | 2022.02.17 |
| 검색 엔진 스파이더와 웹 페이지 구획 요소(태그-tag) 관계 (0) | 2022.02.15 |
| HTML5가 되기 까지 (0) | 2022.02.13 |