선생님을 위한 프로그래밍 수업

DTD(Doctype)

토픽 선생님을 위한 프로그래밍 수업 > 웹 애플리케이션 만들기 > HTML

요약

Document Type Definition. 문서의 형식을 지정한다.

문법

HTML 3.2

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

HTML 4.01

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

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

HTML 4.01 Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"    "http://www.w3.org/TR/html4/frameset.dtd">

HTML 1.0 Strict

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

XHTML 1.0 Transitional

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

XHTML 1.0 Frameset

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

XHTML 1.1

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

XHTML Basic 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN"  "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">

XHTML Basic 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN">

HTML5

<!DOCTYPE html>

설명

웹 기술의 진보에 따라 HTML도 변화 되는데, 변화에 따라 브라우져가 HTML을 해석하는 방식도 변화가 생겼다.
이를 극복하기 위해서 브라우져에게 해당 HTML이 어떤 표준에 따른 것인지를 알려주는 것을 DTD(Document Type Definition)이라고 한다.
DTD는 문서의 제일 위에 위치한다. 

example1. HTML5의 doctype를 적용한 웹페이지. (github)

<!DOCTYPE html>
<html>
    <head>
        <title>DTD</title>
    </head>
    <body>
        Hello, HTML5! 
    </body>
</html> 

참고

댓글

댓글 본문
  1. 하드레인
    감사합니다 잘듣겠습니다
  2. NAMO
    감사합니다!
  3. JustStudy
    고맙습니다
  4. 효니
    책을 봐도 안나왔던 내용들인데 너무 이해가 잘 되네요 ^^
  5. 1234
    감사합니다
  6. 보현
    150828 Doctype가 그런거였군요 !
  7. 정윤호
    감사합니다.
  8. 강의 잘 봤습니다.
  9. 어부바
    감사합니다.
  10. 개미
    잘들었어요 ㅎㅎ
  11. Tae Jun Ahn
    감사합니다 잘봤어요
  12. YellowBall
    span이 안먹히네요...
  13. YellowBall
    2015/4/20 <span class='bg_blue'>DTD(Doctype)</span>강의 잘 들었습니다.
  14. 우히힉
    알찬강의 감사합니다!!
  15. 똥그리
    정말잘 들었습니다~
    강의 감사합니다~
  16. 왕초보
    잘들었습니다.
    고맙습니다....^^
  17. 카르테진
    설명 정말 잘 하시는듯...
    독타입이 뭔가 했는데 저것이었군요.
  18. 중견초보
    이렇게 모아서 표현해주시니, 어떤 형식으로 작성되었는지 명확하게 알 수 있내요 ㅋㅋ
  19. 스마트
    강의 잘 들었습니다.
  20. julian
    강의 감사합니다.
  21. 석재근
    dtd 선언시에는 [html]을 입력하고 [:]과 5를 입력한후 자판왼쪽에 있는 [tap]를 눌러주면 html5 독타입 선언이 됩니다. 굉장히 dtd가 쉬운게 장점중 하나구요
  22. 우아
    만약 doctype을 지정하지 않았을시엔 자동으로 html5로 간주하는 것 인가요?
  23. 최창원
    정주행ㄱㄱ
  24. egoing
    거의 없습니다. 그렇다고 해도 다양한 브라우저에서 크로스 플랫폼 테스트는 하셔야 합니다.
    대화보기
    • egoing
      아뇨 생활코딩 홈페이지에서 페이지 소스 보기 해서 copy&paste해도 아무 문제가 없습니다. 그리고 에디터에서 템플릿으로 제공하고 있기도 하고요.
      대화보기
      • 바닥
        doctype이 저런 의미였군요.
        아래 댓글다신 시와님 같이
        코딩을 하려면 외워야 되는 부분인가요???
      • 캥캥
        2013.09.30
      • egoing
        오래된 브라우저에서도 html5의 doctype을 사용해도 문제가 일어나지 않습니다. 다만 그 doctype이 정확하게 무엇인지 모를 뿐이지요.
        대화보기
        • 시와
          DTD가 길고 어렵고 해서 제일 간단한 HTML5 <!DOCTYPE html>만 외우고 있는데요.
          제가 보고 연습하고 있는책은 옛날 HTML 책이라 <!DOCTYPE html>를 사용했을때 문제가 발생 할수 있는지 궁금합니다.
        • egoing
          하나만 하셔야 할 것 같습니다. 특별한 이유가 있으신가요?
          대화보기
          • 시와
            Doctype를 여러개 지정해도 될까요?
          • 반가워요 원대생
            대화보기
            • 반가워요 원대생
              대화보기
              • 좀비의부활
                재밌습니다~~
              • egoing
                드림위버도 좋은 도구입니다. :)
                2013년 7월 9일 오전 12:03, Disqus <notifications@disqus.net>님의 말:</notifications@disqus.net>
                대화보기
                • rayman
                  제가 UX-UI디자인 수업에서 코딩을 어깨넘어로 조금 배웠는데요. 좀 더 깊이 배우고 싶어서 찾아왔는데 전에 쓰던 드림위버이외에는 불편해서 못쓰겠어요 ㅠㅠ 도구설명에선 드림위버가 아닌 다른 툴을 추천하시는데 꼭 드림위버가 아닌 다른 툴이어야 하나요? 자바스크립트 교육하시는 샘도 드림위버가 편하다고 하시던데...
                • 카제
                  정말 좋습니다 진짜 >_<
                • 오병이어
                  봤어요 버튼을 누르는 재미가 붙어갑니다. 감사합니다.
                • purehsa
                  잘보고 갑니다:) 머리에 쏙쏙잘들어옵니다.
                • Rags
                  > 꺽쇠가 입력이 안되셔서 >꺽쇠를 안 닫아 줬다는 오류가 찍힌건데요...> 왜 입력인 안되는지... 윈도우에선 잘 되는데... 맥사용자 분의 답변이 필요할듯요...
                  대화보기
                  • yujin kim
                    당신은 나의 천사같은 분입니다
                    감사합니다
                    그런데 아프타나를 설치 하였는데요
                    꺽쇄가 안찍히네요?
                    < 이거는 되는 데
                    >이게 안되고
                    <>를 다른에디터에서 복사해서 붙이면 <>붙여집니다
                    <꺽쇄를 입력하면
                    에러가뜨는것 같은데 왜일까요?우슨 missing이 있는지?
                  • 구소연
                    잘 봤습니다 ^^
                  • 생활코팅
                    감사합니다^^
                  • 은정 이
                    으엉~~~~ 보고싶습니다. 유투브는 중국에서 못보는 서버 입니다. 다 막혀있어요. ㅠ.ㅠ 어떻게 공유안될까요?
                  • egoing
                    아이고 고맙습니다!
                    대화보기
                    • 김진솔
                      목소리도 좋고 강의 정말 잘 하십니다. 감사합니다.
                    • 정진성
                      유익한 강좌 항상감사합니다
                    • 호호호
                      오옷 html5 DOCTYPE은 굉장히 간편하네요?ㅎㅎ
                    • 전현준
                      감사합니다!