• 회원가입
  • 로그인
  • 구글아이디로 로그인

[basic] HTML - <!DOCTYPE> 태그 ★ - 문서타입 (= !doctype태그 = !doctype요소 = 독타입태그/독타입요소) ※ DTD (디티디)

목차
  1. <!DOCTYPE> 예제- HTML5 경우
  2. <!DOCTYPE> 정의
  3. <!DOCTYPE> 구문 - HTML5 경우 ★
  4. <!DOCTYPE> - W3C 권장 DOCTYPE
  5. <!DOCTYPE> - HTML 4.01 경우
  6. <!DOCTYPE> - XHTML 경우
  7. <!DOCTYPE> - 배추빌더 경우
  8. 쿼크모드 (Quirks mode, 쿽스모드)
  9. DTD 선언해 (쿼크 → 표준) 변환 시 주의사항
 

<!DOCTYPE> 예제- HTML5 경우


<!DOCTYPE html>
<html>
    <head>
        <title>홈짱닷컴 (homzzang.com)</title>
    </head>
    <body>       
        <h1>홈짱닷컴 (homzzang.com)</h1>
        <p>홈페이지 제작관리 강의</p>
    </body>
</html>
 
 

<!DOCTYPE> 정의

 
문서 형식 선언 (DTD : Document Type Declaration) ★

 


 
1.
웹문서는 DTD (문서타입선언) 후, 이에 맞는 HTML문법 지켜 작성.
그 결과. 문서가 빠르게 렌더링 됨. (즉, 브라우저가 해당 웹 문서를 빠르고 정확하게 읽어드릴 수 있음.)

2. DTD 특징
  • HTML 태그 X
  • HTML 태그에 앞서 문서의 가장 앞 부분에 위치.
  • 단독 사용 

3. SGML 근거 여부
  • HTML 4.01 - SGML에 근거해 <!DOCTYPE>가 DTD 참조 O.
  • HTML 5 - SGML에 근거 안 하므로, <!DOCTYPE>가 DTD 참조 X

4. DTD 선언 방법 종류
  • HTML 4.01 - 3종류
  • HTML5 - 1종류
 
5.
웹 문서 작성시 반드시 DTD를 선언해주도록 함. 그래야 나중에 편함. ^!~

6.
장점 : 모든 웹브라우저에서 같은 레이아웃 제공 가능.
즉,  DTD 선언하면 크로스 브라우징 가능 환경 조성.


<!DOCTYPE> 구문 - HTML5 경우 ★ 

 
<!DOCTYPE html>


<!DOCTYPE> - W3C 권장 DOCTYPE

 

HTML 큰 흐름 : HTML 4.01 ,  XHTML 1.0  ,  XHTML 1.1  ,  HTML 5

※ 각각 별개가 아니라, 태그와 속성 첨삭하며 점차 진화.

 


[예전]

 

HTML 4.01, XHTML 1.0 : Strict, Transitional, Frameset DTD 3종류로 구분. 

XHTML 1.1 : Strict 기반으로 재구성됨. 


Strict

W3C가 의도했던 문서 타입 (엄격한 규격)


Transitional

기존에 만들어진 문서들과의 호환성 위해서 도입. (과도적인 규격)


Frameset 

프레임 사용 경우, 프레임셋 가능 문서에만 사용. (Transitional DTD 기반 위에 프레임 지원)

 


[최신]


HTML5 : DTD 선언을  대폭 간소화시켜 하나로 통일.

 

 

<!DOCTYPE> - HTML 4.01 경우


HTML 4.01 Strict
font 등 수식 태그 제외한 모든 HTML 요소와 속성 가능. / 프레임셋 사용불가
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">




HTML 4.01 Transitional
font 등 수식 태그 포함해 모든 HTML 요소와 속성가능. / 프레임셋 사용 불가
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 



HTML 4.01 Frameset
font 등 수식 태그 포함해 
모든 HTML 요소와 속성가능. / 프레임셋 사용 가능
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">


<!DOCTYPE> - XHTML 경우

 
※ XHTML은 종료태그가 필수.

 


XHTML 1.0 Strict
 
font 등 수식 태그 제외한 모든 HTML 요소와 속성 가능. / 프레임셋 사용불가. / 종료태그 필수
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 


XHTML 1.0 Transitional
 
font 등 수식 태그 포함해 모든 HTML 요소와 속성 가능. / 프레임셋 사용불가. / 종료태그 필수
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 


XHTML 1.0 Frameset
 
font 등 수식 태그 포함해 모든 HTML 요소와 속성 가능. / 프레임셋 사용가능. / 종료태그 필수
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

 


XHTML 1.1
 
XHTML 1.0 Strict 버전과 기본적으로 같지만, 모듈 추가가 가능. (예: 동 아시아 언어에 ruby 태그 가능)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 
 

<!DOCTYPE> - 배추빌더 경우

/head.sub.php 파일 <html> 태그 앞에 위치. (없는 경우 추가하면 됨.)
[배추빌더5 및 배추빌더4 최근 버전]
 
<!DOCTYPE html>
 

[구 버전 경우]
 
표준 모드
<!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 Transitional//EN"> 

<!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.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

쿼크모드 (Quirks mode, 쿽스모드)

 

오래된 웹브라우저 위하여 디자인된 웹 페이지의 하위 호환성 유지 위해서,
W3C・IETF 표준 엄격히 준수하는 표준
모드(Standards Mode) 대신한 웹브라우저기술.

 

HTML5 시대가 된 지금엔 구시대 유물. ㅡㅡ;

 

(예)

표준모드
<!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 Transitional//EN">


 

DTD 선언해 (쿼크 → 표준) 변환 시 주의사항

 
1. 
표준에 어긋난 코드 사용 시, 정렬 틀어짐.
※ 배추빌더4 경우, 쿼크 모드로 배포.
  
2. 
쿼크 모드 지원하는 스킨 경우, 표준 모드에서 비작동. 
※ 세이 전광판 스킨.
 


분류 제목
table HTML - <caption> 태그 - 테이블제목 (= 표제목 = caption태그 = 캡션태그) (HTML…
intro HTML - 준비물 + 추천링크 (※ 사용중지・사용폐기 태그) 2
basic HTML - <p> 태그 ★ - 글단락 (= 글문단 = p태그/p요소 = 피태그/피요소)
meta HTML - <meta> 태그 ★★ - 메타정보 (= meta태그 = 메타태그) (HTML5수정) + 모바일…
formatting HTML - <pre>, <xmp> 태그 ★ - 공백줄바꿈보존 (= 보존태그 = 있는그대로태그 = 있는대로태…
form HTML - <option> 태그 ★ - 선택사항 (= 옵션사항 = option태그 = 옵션태그)
style HTML - <span> 태그 ★★★ - 인라인요소그룹 (= span태그 = 스팬태그 = 스판태그)</spa…
font HTML - <sup> 태그 ★ - 위첨자 (= 상단작은글씨 = 상단태그 = sup태그 = 섭태그 = 서프태…
programming HTML - <script> 태그 ★★ - JS코드입력 (= 동적기능언어입력 = script태그 = 스크립트…
font HTML - <h1> ~ <h6> 태그 ★ - 문단제목글씨크기 (= 표제태그 = 단락제목글자크기 = h1태그…
style HTML - <div> 태그 ★★★★★ - 영역 지정 (= 섹션 분할 = div태그 = 디브태그 = 디비전태…
intro HTML - IE조건부주석 ★ (= 익스주석태그 = 익스플로러 조건문)
font HTML - <small> 태그 - 작은글씨 (= small태그 = 스몰태그)
font HTML - <font> 태그 - 폰트(크기/색깔/스타일) (= font태그 = 폰트태그, HTML5제외)
table HTML - <colgroup> 태그 - 테이블의 col태그묶음 (= colgroup태그 = 콜그룹태그, H…
font HTML - <em> 태그 - 의미 강조어 텍스트 기울게 표시 (= em태그 = 엠태그/이멤태그/엠퍼시스태그…
basic HTML - &nbsp; 기호 - 줄바꿈 않는 공백/빈칸 표시 특수문자 (= 공백기호/빈칸기호 = Non-B… 1
form HTML - <legend> 태그 - fieldset제목/설명 (= legend태그 = 레전드태그) (HTM…
formatting HTML - <code> 태그 - 컴퓨터소스코드 출력 (= code태그 = 코드태그)
basic HTML - <br> 태그 ★ - 줄바꿈 (=br태그/br요소 = 비알태그/비알요소) ※ 한줄아래로 줄바꿈 …
16/18
목록
찾아주셔서 감사합니다. Since 2012