기존 <html> 로 시작하던 html 문서와는 달리 웹표준에 맞춘 XHTML 언어로 웹페이지를 제작하기 위해서는 상단에 DOCTYPE 선언(이하 DTD선언) 을 해주어야 한다. <body> 대개 기존의 사용하던 레이아웃을 그대로 사용하되, 웹표준에 맞추어서 제작을 하고 싶은 경우에는 우선은 Transitional 로 사용함이 좋지만, : 가장 최근 css규격따름. 엘리먼트 배치 자유로움. 스크롤링 레이어 사용 불가능. psition,display속성 구현방법 차이 상이. frame사용 불가능 HTML 4.01 엄격모드 : 1999년 12월 24일 확정 규격. 권장하지 않는 element, attribute, frame 사용불가, 엘리먼트 배치 엄격함. 일부 태그 사용 안됨. XHTML 1.0 호환모드 : 1999년 12월 24일 확정된 프레임문서. frameset이 사용가능. but 넷스케이프, 파폭 작동안됨. XHTML 1.0 엄격모드 ※ Strict : 권장 표준안, Transitional : Stric 보단 완화된 표준안
이 선언을 해주는 이유는 브라우저에게 어떤 언어로 제작되었는지를 알려주는 것이기 때문에 매우 중요하며 브라우저는 선언을 통해서 해당 웹페이지를 어떤 식으로 표현해주어야 하는지 판단하게 된다.
만약 XHTML 1.1 로 제작된 웹페이지라고 DTD선언을 해놓고 사실은 HTML 언어로 웹페이지를 제작했다면 브라우저는 자동적으로 해당 웹페에지가 XHTML 1.1 로 제작되지 않은 웹페이지임을 인식하게 됨으로 출력상으로 큰 문제는 없을지 모르겠지만 웹표준에 맞지 않는 웹페이지가 되므로 비교적 관대한 IE와는 달리 다른 브라우저에서는 사이트가 제대로 출력되지 않는 문제가 발생할 수 있음을 분명히 알아야한다.
기존의 문법을 살펴보자면
<html> - 시작
<head>
<title>브라우저 제목</title>
</head>
<body>
</body>
</html>
의 형식이지만 웹표준에 맞추어서 제작된 페이지의 경우에는
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset="utf-8">
<title> </title>
</head>
</body>
위의 처럼 상단에 DTD선언을 하고 (위의 경우에는 "엄격한" 버젼이다.)
사용된 xml 언어가 무엇인지를 html 속성을 사용하여 지정해주었음을 볼 수 있다.
<head> 태그 아래에는 <meta> 태그가 들어가며 그 다음이 <title> 그리고 <style> 태그가 각각 자리잡는다.
meta 태그를 명시하는 이유는 컨텐트 타입을 명시하기 위해서 명시해주는 것이며, 이 태그를 통하여 웹페이지의 컨텐트 타입을 브라우저에게 알려줄 수 있으며, charset 을 통해 문자 인코딩을 알려줄 수 있다.
xml 속성을 선택해주는 이유는 많은 사람들이 xml언어를 생성할 수 있으므로 우리가 사용하는 언어가 무엇인지 결정하는 유일한 식별지를 제공하고, 우리가 사용하는 식별지가 바로 http://www.w3.org/1999/xhtml 이다.
아래에는 각각의 DTD선언에 대해서 나열한 것이니 사이트 제작시 참고하면 유용하다.
특히 기존에 아무런 문제없이 출력되던 레이아웃이 DTD선언 이후 갑자기 깨져서 보인다면 레이아웃에 맞지 않는 DTD선언을 했을 수도 있으므로 자신이 사용하는 레이아웃에 맞는 형태의 DTD선언을 하는 것이 좋다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
처음부터 웹표준에 맞추어서 제작할 경우에는 Strict(엄격한) 에서 제작하는 것이 올바른 선택이라고 추천하고 싶다.
HTML 4.01 호환모드
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
가장 이상적인 문서작성시에 사용
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
카테고리 없음2012. 4. 24. 10:24
