반응형
jwss
jw 노트
jwss
전체 방문자
오늘
어제
  • 분류 전체보기 (32)
    • 퍼블리셔 일상 (2)
    • Programming (25)
      • HTML (4)
      • CSS (17)
      • JavaScript (2)
      • jQuery (2)
    • Git (2)
    • Web (0)
    • 강의 정리 (3)
      • 퍼블리싱 수업 (3)
      • 노마드코더 (0)

블로그 메뉴

  • 홈
  • Programming

공지사항

인기 글

태그

  • 웹퍼블리셔
  • js
  • 기본개념
  • SASS
  • css
  • HTML
  • GIT

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
jwss

jw 노트

[HTML 기초] DOCTYPE이란?
Programming/HTML

[HTML 기초] DOCTYPE이란?

2021. 10. 23. 21:40

 

HTML에서 doctype은 모든 문서의 최상단에서 찾을 수 있는 필수 서문이다.

 

!DOCTYPE이란?

document type의 약어로,
웹 문서가 어떤 형식으로 작성되었는지 문서 형식을 선언하는 것이다.

 

!DOCTYPE을 쓰지않을 경우 어떻게 되는가?

웹 브라우저는 문서 형식 선언이 없으면 쿼크 모드로 렌더링 해서 각 브라우저마다 다른 형태의 결과물을 보여준다.
이것을 방지하기 위해 문서 형식 선언을 하며 이로 인해 HTML 문서를 표준모드로 렌더링 할 수 있게된다.

 

 쿼크 모드(Quirks mode)?

오래된 웹 브라우저를 위해 디자인된 웹 페이지의 하위 호환성을 유지하기 위해 표준모드를 대신하여 쓰이는 렌더링 모드. 오래된 웹 페이지들이 최신 버전의 브라우저에서 깨져보이지 않으려는 목적이다.

 

표준 모드(Standard mode)?

W3C등의 표준을 준수하는 렌더링 모드.

 

렌더링 : 서버로부터 HTML파일을 받아 브라우저에 뿌려주는 과정.


HTML5의 등장으로 웹표준이 정착해가고 있기 때문에 <!DOCTYPE html> 선언을 주로 하지만

HTML4.01, XHTML의 경우 선언부가 다르다.

 

1. HTML 4.01

버전: HTML 4.01 Strict
선언부: 
<!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">

 

2. XHTML1.0

버전 : XHTML 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">
반응형

'Programming > HTML' 카테고리의 다른 글

[HTML 기초] 테이블 만들기  (0) 2021.10.23
[HTML 기초] 이미지맵 / 하나의 이미지 안에 여러 개의 링크 걸기  (0) 2021.10.23
[HTML 기초] 텍스트 서식 꾸미기  (0) 2021.10.23
    'Programming/HTML' 카테고리의 다른 글
    • [HTML 기초] 테이블 만들기
    • [HTML 기초] 이미지맵 / 하나의 이미지 안에 여러 개의 링크 걸기
    • [HTML 기초] 텍스트 서식 꾸미기
    jwss
    jwss
    안녕하세요. 웹퍼블리셔 공부 블로그입니다.

    티스토리툴바