본문 바로가기

밥벌이1 - S/W/웹표준

DOCTYPE 선언

본문스크랩 DOCTYPE 선언 CSS

2007/11/07 14:54

http://blog.naver.com/jjjhyeok/20043518361

출처 블로그 > ♤ 디노's 어울더울 ♤
원본 http://blog.naver.com/ddino97/50014571173

정식 태그명 : DOCument TYPE Declaration (문서 형식 선언)

 


태그는 DOCument TYPE이라는 말을 줄여서 만든 태그입니다.


본 문서을 만든 사람이 아닌 "본 문서가 어떤 형식에 의해 만들어 졌다." 를 정의해 주는 태그입니다.


대부분의 웹페이지 저작 에디터(프로그램)에서는 자동으로 삽입하여 주지만..
실제로 안써도 "HTML" 에서는 무방합니다. (브라우져 자체가 문서의 내용을 파악하면서 없을경우 내장된 DTD또는 가장 적합하다고 판단하는 DTD로 표현합니다.)

 


아래의 HTML DOCTYPE 를 봐주세요.

 

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

 

현재 이 DOCTYPE는 가장 많이 쓰이는 html 문서 형식 선언입니다. 이 <!DOCTYPE>를 의역 문장으로 바꾸어 보면.

 

"이 문서는 HTML 문서로 국제적이며 W3C라는 ISO비공인인증기관 에서 HTML DTD 4.0을 기준으로 Transitional방식으로 영어 공용어로 출력한다."
"참조할 DTD문서는 "
http://www.w3.org/TR/html4/loose.dtd" 이다."

 


라는 뜻 입니다. 음...-_-.. 그런데 이 녀석이 왜 필요할까요? -_-?

 

안써도 무방한데 말이죠.

 

 

물론 안써도 무방합니다. 정확하게 하면 귀찮을뿐이죠. 하지만 이건 기존에 HTML를 만들때 이야기지요!

우리는 XHTML을 만들기 위해서는 배워야만 합니다!! 아니 무조건 써야만 합니다.


왜냐하면.. DOCTYPE이 없으면 어짜피 이 문서는 HTML이네 머. XHTML 아냐~! 그까이꺼 그냥 대충 표현해버려~
라고 브라우져가 표현을 해버립니다. 자기 방식대로요.(이것이 크로스 브라우징이 되는거죠. - DTD와는 무관)

 


2강때 작성된 DTD에 의거한 XHTML 작성법을 보시면.

 

3. <!DOCTYPE> , <html> , <head> , <body> , <title> 은 생략될수 없다.

 

라는 글귀가 있습니다! 그렇다면 이말은!!


XHTML에서는 <!DOCTYPE>이 지정이 안되어 있으면 XHTML이라 인정하지 않습니다.
솔직히 HTML이나 XHTML이나 브라우져 입장에서는 DTD라는 기준이 없으면
자기방식대로 표현해야 하는 마크업 언어일 뿐입니다. 구조가 어찌되었든 상관 안한다 이거죠.

열심히 공부해서 XHTML만들어 놨건만 브라우져에게 무시당하면 안되지요!


그렇기 때문에 꼭! 선언을 해야합니다.ㅎㅎ;; (이유가 참..-_-; )


자 그러면 이제 멏번식 긁어다가 붙일(저도 긁어 왔습니다.-_-;) XHTML DOCTYPE을 보시죠.

 

 

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

 

 

 오오 아까의 녀석과 무언가 포스부터가 틀리지 않습니까?
(전혀 그렇지 않다구요? 음... 죄송합니다. -_-; )

 

 

 

<!DOCTYPE>의 구조는
 

 

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


로 되어있습니다. 자.. 이제 뜯어볼때가 되었죠?


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

 


<!DOCTYPE
DOCTYPE 태그라고 선언합니다.

 


①) 최상위엘리먼트네임(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를 지정합니다.

 

 

 

 

<!DOCTYPE>태그는 XHTML에서는 이 문서가 XHTML이다. 라고 판단할 유효성(valid)를 제공하기 때문에 꼭 알아두시고 XHTML작성시 html상단에 작성하여 유효성을 꼭!! 인정 받아야 하겠습니다.
 

=================================================================================

 

DOCTYPE)

<!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의 가장 큰 특징이라면 "확장된 어트리뷰트를 지원하지 않는다" 라는 말인데요.

자 그러면 여기에서 확장된 이라는 뜻은 멀까요.
더더욱 쉽게 왜 Strict와 Transitional 를 만들었을까요. 그냥 Transitional만 사용하면 될텐데요.
이유는 간단합니다.


브라우져들이 많아 지고 다양해 지면서 소위 말하는 mhtml(mobile html)이 생겨나게 되었습니다.



모바일기기의 특성상 많은 연산을 수행해서 적정한 DTD를 적용해야 하는 브라우져가 많은 정보를 가질수 없기에
정확한 표준된 DTD를 요구하게 되었고. 그로 인해 나온 것이 Strict입니다.

(물론 근본적인 이유는 브라우져 들끼리 치고박고 싸우다가 최소한의 안을 만들어 낸것이지만;; 대표적으로 따지면

mhtml이 대표적 이라는거 뿐입니다.)


결국엔 가장 최소한의 표현방법을 가진다 라는 기본안을 채택하였고. 그로 인해 CSS의 발전을 가져오게 되지요.
CSS는 모든 브라우져 표준입니다.(단. 여기에서 중요포인트는 표준인건 맞지만 표현방식은 멋대로입니다.)




Transitional Mode DTD


DOCTYPE)

<!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의 내용중


"각 브라우져에 따른 DTD를 호환합니다."


라는 말은 대표적으로 익스플로어의 marquee 태그를 아실껍니다.
이 태그는 실제적으로 Transitional안에는 없습니다.

단지 익스플로어에 내장된 DTD를 포함하므로 사용가능한것입니다.

Transitional로 하면 로딩속도는 저하되지만 그만큼 표현성이나 작업하는데에 따른 태그의 활용성은
넓게 됩니다. Transitional로 코딩된 문서중 일부는 mhtml이나 또는 shtml(strict html)에서 표현이
불가할수 있습니다.





Frameset Mode DTD


DOCTYPE)

<!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를 가지고 있습니다.

 

 


 

출처 : http://cafe.naver.com/hacosa.cafe 의 디스타일(blackrabit)