쇼핑몰 Q&A
자료실

 
레드샵 Tips
 
 [CSS/웹표준] DOCTYPE 선언  REDBRUSH
링크


태그명 : DOCument TYPE Declaration - 현재의 문서가 어떤 형식에 맞추어 제작되었는지를 설명.

보통 HTML 제작도구에서는 새 HTML 문서를 만들때 자동으로 이 태그를 문서 상단에 만들어 주며, 실제 반드시 쓰지 않아도 큰 문제는 없는 태그입니다. 하지만 이 태그를 선언해줌으로써 브라우저가 좀 더 빠르고 정확하게 문서를 분석하여 표현해주며, 제작도구에서도 이 선언에 따라 문서에 제약을 걸어 정확한 표현을 해줄 수 있도록 해줍니다.

예1)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">

이렇게 선언된 DOCTYPE은 이 문서가 HTML 4.0을 따르고 Transitional 방식에 따라 영문으로 제작되었다는 것과 http://www.23.org/TR/html4/loose.dtd 라는 Document Type Definition(DTD) 정의를 참조한다는 것을 알려줍니다.

물론 이 DOCTYPE 태그를 무시하고 선언하지 않아도 되지만 XHTML과 같은 정확하게 XML 구문으로 작성되어야 하는 HTML 문서에서는 반드시 선언을 하여야 합니다. 그렇지 않으면 브라우저가 XHTML로 문서를 인식하지 않으므로 XML 구문에 어긋나는 점이 있더라도 브라우저는 무시할 수 있습니다.

예2)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-Strict.dtd">

위의 선언은 문서를 XHTML1.0을 따르고 Strict 방식에 따라 영문으로 제작되었다는 것과 http://www.w3.org/TR/xhtml/DTD/xhtml-Strict.dtd라는 DTD정의를 참조한다는 것을 알려줍니다. 


예3)
<!DOCTYPE ①최상위엘리먼트네임 ②(국제적,공용||내부적,제한용) "③(ISO공인인증기관 || ISO비공인인증기관)//④기관명//⑤DTD type //⑥인코딩언어(ISO)" "⑦DTD 주소">

DOCTYPE을 선언하기 위해 위 1~7번 항목에 대해 설명해보겠습니다.


① 최상위엘리먼트네임(RootElementName)
html이나 xhtml의 가장 최상위는 무조건 <html>태그 이기 때문에 html로 작성합니다. 하지만 예외적으로 내부용일경우에는 다른 코드가 삽입될수도 있지만. 여기에서는 국제적인 코드를 생각해서 html이 삽입됩니다.

② 국제적,공용|| 내부적,제한용 (PUBLIC || SYSTEM)
이 문서가 국제적으로 쓰이는 문서인지. 내부적으로 쓰이는 문서인지를 설정합니다. 내부적일 경우에는 DTD든 최상위엘리먼트든 작성자 마음대로 작성하거나 지정할수 있습니다.

③ ISO공인인증기관|| ISO비공인인증기관 (Inernational Organization for Standardization || not Inernational Organization for Standardization )
본 문서가 어디에서 만든 DTD를 사용하는가에 대한 내용입니다. 공인인증기관일경우 " + " 모양을 비공인인증기관일경우엔 " - ' 를 사용합니다. W3C는 비공인인증기관이므로 " - " 값이 들어갑니다.

④ 기관명(Organization)
DTD를 작성한 기관명입니다.

⑤ DTD TYPE 
DTD가 어떤 타입으로 작성되어있는가에 대한 내용으로 3가지로 분류하게 됩니다.
DTD XHTML (version) Strict => 권장 표준 안
DTD XHTML (version) Transitional => Strict 보단 완화된 표준안
DTD XHTML (version) Frameset => 프레임을 나눌경우 프레임페이지에 사용

⑥ 인코딩언어
xml:lang일때 같이 ISO에서 인증한 언어코드로 문서를 출력합니다.
(모든 html DTD는 영문이기 때문에 EN이 거의 기본화 되어있습니다. / 실제로 DTD는 한글로 작성할수도 있습니다. 물론 선언은 영문으로 해야 하지만요.0

⑦ DTD경로 (DTD URL)
실제로 이 문서를 파싱할(유효한지 하지 않은지 판단) DTD를 지정합니다.


예4)

<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN" "
http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

- 위의 예는 가장 표준이 되는 DTD입니다.
- 확장된 어트리뷰트를 허용하지 않습니다.
- 배경색 , 글자색등의 일정한 조건에 따른 어트리뷰트(bgcolor 라던가 font태그의 color속성)을 인정하지 않습니다.

Strict는 문서에 확장된 속성을 제공하지 않고 제약을 걸어둔다는 뜻인데, 이것은 모바일기기나 장애인을 위한 브라우저등 모든 브라우저에서 사용가능한 최소한의 태그만을 사용한다는 것입니다. 그래서 최소한의 태그만을 유지하고 화면상의 표현을 하기 위해서는 CSS가 더욱더 필요하게 됩니다. CSS는 모든 브라우져 표준이지만 이 CSS를 해석하여 화면상에 표현하는 것은 또 브라우저마다 다릅니다. 하지만, 표준을 사용함으로써 폭넓게 호환성을 지니게 됩니다.


예5)

<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Transitional//EN" "
http://www.w3c.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd">

- 일반적으로 가장 많이 쓰이는 DTD입니다.
- 확장된 어트리뷰트를 호환합니다.
- 각 브라우져에 따른 DTD를 호환합니다.
- Strict보다 로딩속도는 느립니다.
- Strict보다 표준안에 가깝지는 않습니다.

Transitional은 현재 일반적으로 가장 많이 쓰이는 제약 사항이고, 여러 가지 내장된 태그를 거의 대부분 사용할 수 있습니다. Transitional로 하면 로딩속도는 저하되지만 그만큼 표현성이나 작업하는데에 따른 태그의 활용성은 넓게 됩니다. Transitional로 코딩된 문서중 일부는 다른 브라우저에서 읽지 못할 수 있습니다.



예6)

<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Frameset//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-Frameset.dtd">


- 프레임셋을 만들때 사용하는 DTD입니다.
- 확장 및 프레임에 사용가능한 모든 내용을 포함합니다.
- html 4.01 Frameset.dtd 와 동일합니다.

Frameset은 프레임을 나누고 프레임에 따른 이름 및 설정을 지정하는 태그들을 저장한것입니다. html4.01버젼과 동일한 DTD를 가지고 있습니다.

목록으로

Copyright