2022. 3. 3. 00:19ㆍWEB Dev/HTML | CSS
좋은 마크업 공부 자료를 구하게 되어서 순서대로 하나씩 작성해보려고 한다.
마크업 프로페셔널로 거듭나기
tobyyun 님의 마크업 개발 레벨 테스트 질문을 통해 마크업 역량을 키워보자 ψ(｀∇´)ψ
마크업 개발 레벨 테스트 질문
팀의 막내 개발자의 마크업 개발 역량 확인을 위해, 마크업 개발 레벨 테스트용 질문을 만들어 보았습니다. 제가 마크업 개발자를 뽑는 면접관 역할을 하게 될 때에 사용하는 질문들과도 유사한
tobyyun.tumblr.com
질문
Doctype을 사용하지 않을 때는 무슨 일이 발생할까요?
답
쉽게 독타입이라고 부르는데 HTML 문서 만들때 그냥 무의식적으로 넣어야 하는 코드로 알고 있었다.
아래에 차근차근히 독타입이 무엇인지, 없으면 어떤 일이 발생하는지 레퍼런스와 함께 알아보자
1. Doctype 이란?
DTD (Document Type Definition, 문서 타입 정의)에 따라 HTML 가장 상단에 선언하는 코드다.
이 DTD는 브라우저에게 문서 형식을 알려주는 부분으로 이 선언부에 따라 브라우저는 렌더링 모드를 바꾸고 해당 렌더링 모드에 맞게 사용할 수 있는 태그와 속성이 변경된다.
문서 타입 정의(DTD)는
XML 문서의 구조 및 해당 문서에서 사용할 수 있는 적법한 요소와 속성을 정의합니다.
DTD는 엔티티를 정의할 수 있으며, 빠른 개발을 위한 내부 DTD를 사용할 수 있습니다.
DTD를 사용하여 새로운 XML 문서의 구조를 정의함으로써 새로운 문서 타입을 만들 수 있습니다.
이렇게 생성된 DTD는 새로운 문서 타입을 이용한 데이터의 교환에서 표준으로써 활용됩니다.
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
2. Doctype 사용법
HTML 문서를 시작할 때 가장 먼저 선언되는 것으로 <!DOCTYPE html> 와 같이 사용한다.
태그가 아니기 때문에 닫는 태그와 같은 형식은 사용되지 않는다.
<!DOCTYPE html>와 같은 단순한 스타일은 HTML5부터 사용된다.
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">
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">
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
HTML5
<!DOCTYPE html>(Web) DTD(Document Type Definition)란?
웹 페이지들의 html 코드를 확인해 보면 맨 위에 <!DOCTYPE html>이라고 선언되어있는 부분을 확인할 수 있는데요.
medium.com
이 <!DOCTYPE html> 형태는 DTD 문법에 따라 만들어진다.
<!DOCTYPE root-element [element-declarations]>
<!문서타입 최상단 요소 [요소 선언]>
*결국 중요한 부분
!DOCTYPE root-element : 이 문서의 root 요소가 어떤 것임을 정의한다.
DTD Tutorial
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
<html>: HTML 문서 / 루트 요소 - HTML: Hypertext Markup Language | MDN
HTML <html> 요소는 HTML 문서의 루트(최상단 요소)를 나타내며, "루트 요소"라고도 부릅니다. 모든 다른 요소는 <html> 요소의 후손이어야 합니다.
developer.mozilla.org
3. Doctype을 사용하지 않으면?
각 브라우저의 엔진이 렌더링 모드를 결정할 때 문서 첫 부분의 독타입을 참조하게 된다.
독타입을 선언하지 않으면 브라우저가 해당 문서의 형식을 알 수 없게 된다.
이 경우
브라우저는 '표준 모드' 가 아닌 '비표준 모드'로 렌더링 모드를 변경하게 되면서 문서 제작자가 의도한 레이아웃(태그의 구조, CSS 등)이 깨지게 되어 사용자에게 정상적인 상태의 문서를 보여주지 못하게 된다.
따라서 독타입을 선언하게 되면 현재 사용되고 있는 모든 브라우저들은 '표준 모드'로 해당 문서를 인식하게 되고 문서 제작자가 의도한 방향대로 화면을 렌더링해주게 된다.
이 표준 모드를 유지하는 것을 크로스 브라우징 Cross Browing 이라고 한다.
Quirks Mode 렌더링과 DTD.
웹 브라우저가 Quirks Mode와 Strict Mode를 갖게 된 이유. 대부분의 웹 브라우저는 두 가지 렌더링 모드를 지니고 있으며 그것은 바로 Quirks Mode와 Strict Mode 입니다. 이렇게 두 가지 렌더링 모드를 지니
beone.tistory.com
크로스 브라우징(cross browsing)
크로스 브라우징 이란? 웹 페이지 제작 시에 모든 브라우저에서 깨지지 않고 의도한 대로 올바르게(호환성) 나오게 하는 작업을 말한다. [HTML, CSS, Javascript 작성 시 W3C의 웹 규격에 맞는 코딩을 함
okayoon.tistory.com
'WEB Dev > HTML | CSS' 카테고리의 다른 글
| [CSS] Animation - Transition (0) | 2023.01.20 |
|---|---|
| [HTML] blockquote 태그 알아보기 (0) | 2022.03.14 |
| [HTML] block속성과 inline 속성 (0) | 2022.03.05 |
| [HTML] <strong>, <em> 태그 이해하기 (0) | 2022.03.03 |
| [CSS] css로 툴팁 만들기 (tooltip) (0) | 2022.02.15 |