안녕하세요?
HTML5 를 공부하며 알게된 내용들을 정리하는 공간입니다. 특정한 기능에 대해 깊이 있는 포스팅을 하는 곳이 아님을 미리 알려드립니다.
DTD (Document Type Definition)
Document Type Definition 의 약자입니다. DTD는 어떤 태그, 속성, 값이 특정한 HTML문서에서 유효한지를 설명하는 텍스트 파일입니다. 각 HTML 버전에는 그에 맞는 DTD가 있다고 합니다. 대게는 이를 HTML 문서의 첫줄에 doctype 선언을 통해서 하는데요, 어떤 버전의 HTML 혹은 XHTML이 사용되었는지를 브라우저에 알립니다. 이런 doctype 선언을 빼먹을시 대다수의 브라우저는 쿽스 모드 (Quirks Mode)라는 상태에 빠진다고 합니다.
doctype 선언을 하지 않은 페이지를 만날시 "어라, 이 페이지는 아주 오랜 옛날에 작성된 페이지이구나" 라고 생각해 버린다고 합니다. "그럼 아무렇게나 표시해야지" 라는 결론을 내리게 되고요.
만일 자신이 만든 웹페이지가 브라우저에서 의도한대로 보이지 않는다면 doctype 선언을 확인해보는게 좋다고 합니다.
아래는 각 버전별 doctype 선언입니다.
HTML5
<!doctype html>
HTML4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 1.010 Transitional//EN" "http://www.w3.org/TR/html1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
IE9 이하 버전에 대처하는 우리들의 자세
1. IE8 이 HTML5를 이해하도록 만들고 싶다면.
</head> 태그 앞에 다음과 같은 코드를 삽입하면 됩니다.
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
조건 주석을 이용하여 IE9보다 오래된 IE만 , 즉 IE 6,7,8 만이 이 코드를 이해하며 코드가 적용된다고 합니다. 신기하게 테스트를 해보니, 크롬에서는 해당 스크립트가 안들어가더군요. IE 만 판별을 하나봅니다.
2. IE 8 의 호환성 보기 및 호환성 보기 목록을 회피하는법
아래 코드를 <head> 한에 넣어주세용
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
...
</head>
HTML 코드에 외부 스타일 시트 연결하기
외부 스타일 시트를 웹 페이지에 연결하는 방법은 <link> 태그를 사용하는 것이다.
다음은 각 버전별 사용방식이다.
HTML5
<link rel="stylesheet" href="css/styles.css">
HTML4
<link rel="stylesheet" type="text/css" href = "css/styles.css" >
XHTML 1.0
<link rel="stylesheet" type="text/css" href="css/styles.css" />
'Computer > Web' 카테고리의 다른 글
| Babel 에 대해서 (0) | 2020.07.08 |
|---|---|
| [mantis] QA 용 Template (0) | 2017.01.23 |
| [Bootstrap,JQuery] Table을 이쁘게 정리하기 (0) | 2016.02.24 |
| [CKEditor] 사용방법입니다. (0) | 2015.09.22 |
| [jQuery] Plugin 모음 (0) | 2015.08.25 |
