Skip to content

Latest commit

Β 

History

History
222 lines (133 loc) Β· 8.75 KB

Standard&QuirksMode.md

File metadata and controls

222 lines (133 loc) Β· 8.75 KB
Raw

ν‘œμ€€λͺ¨λ“œ πŸ†š 쿽슀λͺ¨λ“œ

듀어가기에 μ•žμ„œ...

  1. DTD(Document Type Definition)
  2. ν‘œμ€€λͺ¨λ“œμ™€ 쿽슀λͺ¨λ“œμ˜ 차이점은?
<!DOCTYPE ... > //μ˜ˆμ‹œ

DTDλž€?

λ¬Έμ„œ ν˜•μ‹ μ •μ˜(DTD:Document Type Definition)λŠ” λ§ˆν¬μ—… λ¬Έμ„œμ˜ μš”μ†Œμ™€ 속성등을 ν•΄μ„ν•˜λŠ” 기쀀을 λͺ…μ‹œν•˜λŠ” κ²ƒμž…λ‹ˆλ‹€.

전체적인 Markup λ¬Έμ„œλ₯Ό μ–΄λ–€ ν˜•μ‹μ— λ§žμΆ°μ„œ ν•΄μ„ν•΄μ•Όν•˜λŠ”μ§€ λͺ…μ‹œλ₯Ό ν•΄μ€€λ‹€λŠ” κ²ƒμž…λ‹ˆλ‹€.

λ¬Έμ„œ ν˜•μ‹μ—λŠ” 크게 HTML5, XHTML, HTML 의 3가지가 μ‘΄μž¬ν•©λ‹ˆλ‹€.

이전 λ²„μ „μ˜ HTML(HTML2 ~ HTML4) 은 SGML에 κΈ°λ°˜μ„ 두어 λ§Œλ“€μ–΄μ‘ŒκΈ° λ•Œλ¬Έμ— μƒμ„Έν•œ DTD μ°Έμ‘°κ°€ ν•„μš”ν•˜λ©°, 이 λ•Œλ¬Έμ— DOCTYPE 선언을 ν•˜λ €λ©΄ 곡개 μ‹λ³„μžμ™€ μ‹œμŠ€ν…œ μ‹λ³„μžκ°€ ν¬ν•¨λœ κΈ΄ λ¬Έμžμ—΄μ„ μž‘μ„±ν•΄μ•Ό ν•©λ‹ˆλ‹€.

πŸ‘‰ HTML 4.01 Strict λͺ¨λ“œλ‘œ λ¬Έμ„œ ν˜•μ‹μ„ μ •μ˜ν•  경우의 예

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

PUBLIC "-//W3C//DTD HTML 4.01//EN" //곡개 μ‹λ³„μž
"http://www.w3.org/TR/html4/strict.dtd" //μ‹œμŠ€ν…œ μ‹λ³„μž

XHTML πŸ†š HTML5

SGMLκ³Ό XML

SGML(Standard Generalized Markup Language)은 λ¬Έμ„œμš© λ§ˆν¬μ—… μ–Έμ–΄λ₯Ό μ •μ˜ν•˜κΈ° μœ„ν•œ 메타 μ–Έμ–΄μž…λ‹ˆλ‹€.

SGML은 μ •λΆ€λ‚˜ ν•­κ³΅μš°μ£Ό κΈ°μ—…μ˜ λŒ€κ·œλͺ¨ κ³„νš 사업 κ³Όμ •μ—μ„œ 기계 νŒλ…ν˜•(machine-readable) λ¬Έμ„œλ₯Ό κ³΅μœ ν•  λͺ©μ μœΌλ‘œ μ„€κ³„λ˜μ—ˆμŠ΅λ‹ˆλ‹€.

SGML은 인쇄와 좜판 산업에 κ΄‘λ²”μœ„ν•˜κ²Œ μ‚¬μš©λ˜μ—ˆμ§€λ§Œ, λ„ˆλ¬΄ λ³΅μž‘ν•œ 이유둜 μ†Œκ·œλͺ¨ λ²”μš© λͺ©μ μœΌλ‘œ μ‚¬μš©ν•˜λŠ”λ° 걸림돌이 λ˜μ—ˆμŠ΅λ‹ˆλ‹€.

XML은 SGMLμ—μ„œ νŒŒμƒλœ μ–Έμ–΄μž…λ‹ˆλ‹€. SGML을 λ‹¨μˆœν™”ν•˜λ €λŠ” μ‹œλ„λ‘œ μ‹œμž‘λ˜μ–΄, XHTML, RSS 등을 포함해 μ—¬λŸ¬ λ°©λ©΄μ—μ„œ μ‘μš©λ˜κ³  μžˆμŠ΅λ‹ˆλ‹€.

XHTML

XHTML(Extensible Hypertext Markup Language)은 HTMLκ³Ό λ™λ“±ν•œ ν‘œν˜„ λŠ₯λ ₯을 μ§€λ‹Œ λ§ˆν¬μ—… μ–Έμ–΄λ‘œ, HTML보닀 μ—„κ²©ν•œ 문법을 κ°€μ§‘λ‹ˆλ‹€.

HTML이 SGML의 μ‘μš©μΈ 데 λ°˜ν•΄, XHTML은 SGML의 μ œν•œλœ 뢀뢄집합인 XML의 μ‘μš©μž…λ‹ˆλ‹€.

XHTML λ¬Έμ„œλŠ” ν•˜λ‚˜μ˜ XML λ¬Έμ„œλ‘œμ„œ λ¬Έλ²•μ μœΌλ‘œ μ •ν™•ν•΄μ•Ό ν•˜κΈ° λ•Œλ¬Έμ—, HTMLκ³Ό 달리 ν‘œμ€€ XML 라이브러리λ₯Ό μ΄μš©ν•œ μžλ™ν™”λœ μ²˜λ¦¬κ°€ κ°€λŠ₯ν•©λ‹ˆλ‹€.

XHTML 1.0은 2000λ…„ 1μ›” 26일, W3C(World Wide Web Consortium: μ›”λ“œ μ™€μ΄λ“œ μ›Ή μ½˜μ„œμ‹œμ—„)의 κΆŒκ³ μ•ˆμ΄ λ˜μ—ˆμŠ΅λ‹ˆλ‹€.

XHTML vs HTML 5

2004λ…„ W3C νšŒμ˜μ—μ„œ λͺ¨μ§ˆλΌ μž¬λ‹¨κ³Ό 였페라 μ†Œν”„νŠΈμ›¨μ–΄κ°€ μƒˆλ‘œμš΄ HTML ν‘œμ€€μ„ μ œμ•ˆν–ˆμ§€λ§Œ, W3C에 μ˜ν•΄ "μ›Ήμ˜ 혁λͺ…을 μœ„ν•œ 기쑴의 지ν–₯점에 μœ„λ°°λœλ‹€"κ³  κ±°μ ˆλ‹Ήν–ˆμŠ΅λ‹ˆλ‹€.

이에 인터넷 μ΅μŠ€ν”Œλ‘œλŸ¬λ₯Ό μ œμ™Έν•œ μ• ν”Œ, λͺ¨μ§ˆλΌ, μ˜€νŽ˜λΌκ°€ WHATWGλΌλŠ” μƒˆλ‘œμš΄ μ›Ή ν‘œμ€€ 기관을 μ„€λ¦½ν•˜κ³  HTML5 ν‘œμ€€μ„ μ œμ •ν–ˆμŠ΅λ‹ˆλ‹€.

λΉ„μŠ·ν•œ μ‹œκΈ°μ— XHTML 2.0이 λ‚˜μ™”μ§€λ§Œ 기쑴의 ν‘œμ€€κ³Ό λ„ˆλ¬΄ λ™λ–¨μ–΄μ Έμ„œ κ°œλ°œμžλ“€μ—κ²Œ 널리 μ‚¬μš©λ˜μ§€ μ•Šμ•˜κ³ , 2009λ…„ νκΈ°λ˜κΈ°μ— 이λ₯΄λ €μŠ΅λ‹ˆλ‹€.

2014λ…„λΆ€ν„° HTML5κ°€ μƒˆλ‘œμš΄ κΆŒκ³ μ•ˆμ΄ λ˜μ—ˆμŠ΅λ‹ˆλ‹€.

HTML5

HTML5λŠ” HTML의 μ™„μ „ν•œ 5번째 버전

HTML5λŠ” HTML 4.01, XHTML 1.0, DOM 레벨 2 HTML에 λŒ€ν•œ μ°¨κΈ° ν‘œμ€€ μ œμ•ˆμž…λ‹ˆλ‹€.

λΉ„λ””μ˜€, μ˜€λ””μ˜€ λ“± λ‹€μ–‘ν•œ λΆ€κ°€κΈ°λŠ₯κ³Ό μ΅œμ‹  λ©€ν‹°λ―Έλ””μ–΄ μ½˜ν…μΈ λ₯Ό μ•‘ν‹°λΈŒX 없이 λΈŒλΌμš°μ €μ—μ„œ μ‰½κ²Œ λ³Ό 수 있게 ν•˜λŠ” 것을 λͺ©μ μœΌλ‘œ ν•©λ‹ˆλ‹€.

DTDλ₯Ό μ •μ˜ν•˜μ§€ μ•ŠμœΌλ©΄ 쿽슀 λͺ¨λ“œ(Quirks mode)둜 λ Œλ”λ§λœλ‹€

DOCTYPE 선언이 μ‘΄μž¬ν•˜μ§€ μ•Šκ±°λ‚˜ 잘λͺ» μ ν˜€μžˆμ„ 경우, μ›Ή λΈŒλΌμš°μ €λŠ” μ›Ήλ¬Έμ„œλ₯Ό 쿽슀 λͺ¨λ“œλ‘œ ν•΄μ„ν•©λ‹ˆλ‹€.

쿽슀 λͺ¨λ“œλž€ 였래된 μ›Ή λΈŒλΌμš°μ €λ₯Ό μœ„ν•˜μ—¬ λ””μžμΈλœ μ›Ή νŽ˜μ΄μ§€μ˜ ν•˜μœ„ ν˜Έν™˜μ„±μ„ μœ μ§€ν•˜κΈ° μœ„ν•΄ μ›Ή λΈŒλΌμš°μ €κ°€ μ›Ήλ¬Έμ„œλ₯Ό ν•΄μ„ν•˜λŠ” 방식 μž…λ‹ˆλ‹€.

λ°˜λŒ€λ‘œ, ν‘œμ€€ λͺ¨λ“œ(Standards Mode)λŠ” W3Cλ‚˜ IETF(ꡭ제 인터넷 ν‘œμ€€ν™” 기ꡬ)의 ν‘œμ€€μ„ μ—„κ²©νžˆ μ€€μˆ˜ν•˜μ—¬ λ¬Έμ„œλ₯Ό ν•΄μ„ν•©λ‹ˆλ‹€.

쿽슀 λͺ¨λ“œμ—μ„œλŠ” 같은 μ½”λ“œλΌλ„ μ›Ή λΈŒλΌμš°μ €λ§ˆλ‹€ μ„œλ‘œ λ‹€λ₯΄κ²Œ ν•΄μ„ν•˜λ―€λ‘œ μ „ν˜€ λ‹€λ₯Έ 결과물을 λ³΄μ—¬μ£Όκ²Œ λ©λ‹ˆλ‹€.

였래된 λΈŒλΌμš°μ €μ˜ 경우 HTMLκ³Ό CSS λͺ…μ„Έ(W3C ν‘œμ€€)κ°€ μ™„μ„±λ˜κΈ°λ„ 전에 κ°œλ°œλ˜μ–΄μ„œ ν‘œμ€€μ— λΆ€μ‘ν•˜μ§€ λͺ»ν•˜μ˜€κ³ , κ·Έλ₯Ό μœ„ν•΄ 쿽슀 λͺ¨λ“œκ°€ 였래된 λΈŒλΌμš°μ €μ˜ 행동을 λͺ¨λ°©ν•˜λ„둝 λ§Œλ“€μ–΄μ§„ κ²ƒμž…λ‹ˆλ‹€.

ν‘œμ€€ λͺ¨λ“œμ™€ 쿽슀 λͺ¨λ“œμ˜ 차이

λΉ„ν‘œμ€€ λͺ¨λ“œ : Quirks mode,

ν‘œμ€€ λͺ¨λ“œ : Standards mode,

거의 ν‘œμ€€ λͺ¨λ“œ : almost standards mode, 엄격 λͺ¨λ“œ : strick mode

거의 ν‘œμ€€ λͺ¨λ“œλŠ” ν‘œμ€€ λͺ¨λ“œμ™€ ν•œκ°€μ§€λ§Œ λΉΌκ³  동일함. table μ…€μ—μ„œ λΉ„ν‘œμ€€λͺ¨λ“œλ‘œ μ‹€ν–‰ν•˜κ³ , κ·Έμ™Έ λ‚˜λ¨Έμ§€λŠ” ν‘œμ€€μ„ 따름 λ”°λΌμ„œ, ν…Œμ΄λΈ” μ•ˆμ— μ‘°κ°λ‚œ 이미지λ₯Ό 넣을 λ•Œ, ν‘œμ€€ λͺ¨λ“œλ³΄λ‹€ λΉ„ν‘œμ€€ λͺ¨λ“œ, 거의 ν‘œμ€€ λͺ¨λ“œμΌ λ•Œ 이미지 간격이 λ–¨μ–΄μ§ˆ κ°€λŠ₯성이 λœν•¨

ν‘œμ€€λͺ¨λ“œμ™€ 쿽슀λͺ¨λ“œκ°€ λ‹€λ₯΄κ²Œ λ‚˜νƒ€λ‚˜λŠ” λΆ€λΆ„(λ„˜μ–΄κ°€λ„ 됨)

IE λ°•μŠ€ λͺ¨λΈ 버그

  • λΉ„ν‘œμ€€ λͺ¨λ“œ: width 계산 μ‹œ, padding, border λ₯Ό 포함.
  • ν‘œμ€€ λͺ¨λ“œ: width 계산 μ‹œ, padding, borderλ₯Ό ν¬ν•¨ν•˜μ§€ μ•ŠμŒ.

인라인 μš”μ†Œμ˜ 수직 μ •λ ¬

  • λΉ„ν‘œμ€€ λͺ¨λ“œ: λ°•μŠ€μ˜ border bottom에 λ§žμΆ”μ–΄ 이미지λ₯Ό μ •λ ¬
  • ν‘œμ€€ λͺ¨λ“œ: baseline에 λ§žμΆ”μ–΄ μ •λ ¬

table μ•ˆμ˜ font size 상속

  • λΉ„ν‘œμ€€ λͺ¨λ“œ: table μ•ˆμ—μ„œ ν…μŠ€νŠΈλŠ” κΈ°λ³Έ font sizeλ₯Ό μƒμ†ν•˜μ§€ μ•ŠμŒ
  • ν‘œμ€€ λͺ¨λ“œ: table μ•ˆμ—μ„œμ˜ ν…μŠ€νŠΈλŠ” κΈ°λ³Έ font size값을 상속 함.

λͺ¨λ“  Doctype μ„ μ–Έ 방법

HTML 5

<!DOCTYPE html>

HTML 4.01 Strict

  • HTML 4.01 λŠ” 세가지 DTDκ°€ μžˆλŠ”λ°, DTDλŠ” μ§€μ›ν•˜λŠ” μš”μ†Œμ— 따라 닀름
  1. HTML λͺ¨λ“  μš”μ†Œμ™€ 속성을 포함.
  2. ν‘œν˜„μ μΈ 것과 퇴화 μš”μ†ŒλŠ” ν¬ν•¨ν•˜μ§€ μ•ŠμŒ.
  3. Font νƒœκ·Έ 지원 μ•ˆ 함. Frameset 지원 μ•ˆ 함.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

  1. HTML λͺ¨λ“  μš”μ†Œμ™€ 속성 포함
  2. ν‘œν˜„μ μΈ 것과 퇴화 μš”μ†Œλ„ 포함 (Font νƒœκ·Έ 지원)
  3. Frameset 지원 μ•ˆ 함.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

  1. Strict DTD에 μžˆλŠ” 것
  2. 퇴화 μš”μ†Œμ™€ 속성(λŒ€λΆ€λΆ„ μ‹œκ°μ  ν‘œν˜„μ— κ΄€ν•œ 것).
  3. Transitional DTD + Frameset을 ν—ˆμš©ν•¨.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict

  1. HTMLλͺ¨λ“  μš”μ†Œμ™€ 속성을 포함
  2. ν‘œν˜„μ μΈ 것과 퇴화 μš”μ†ŒλŠ” ν¬ν•¨ν•˜μ§€ μ•ŠμŒ
  3. Font νƒœκ·Έ 지원 μ•ˆν•¨. Frameset 지원 μ•ˆ 함.
  4. Markup은 잘 쑰직된 XML둜 μ“°μ—¬μ Έμ•Ό 함.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional

  1. HTMLλͺ¨λ“  μš”μ†Œμ™€ 속성을 포함.
  2. ν‘œν˜„μ μΈ 것과 퇴화 μš”μ†ŒλŠ” 포함( font νƒœκ·Έ 지원)
  3. Frameset 지원 μ•ˆ 함.
  4. Markup은 잘 쑰직된 XML둜 μ“°μ—¬μ Έμ•Ό 함.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset

  1. HTMLλͺ¨λ“  μš”μ†Œμ™€ 속성을 포함.
  2. ν‘œν˜„μ μΈ 것과 퇴화 μš”μ†ŒλŠ” 포함( Font νƒœκ·Έ 지원)
  3. Frameset 지원.
  4. Markup은 잘 쑰직된 XML둜 μ“°μ—¬μ Έμ•Ό 함.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1

  1. XHTML 1.0 Strict와 κ°™μŒ.
  2. Modules을 μΆ”κ°€ν•˜λ„λ‘ ν—ˆμš©

예λ₯Ό λ“€μ–΄ λ™μ•„μ‹œμ•„μ–Έμ–΄λ₯Ό μœ„ν•œ ruby 지원 함.

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

정리

  • Doctype이 무엇을 ν•˜λŠ” κ²ƒμΈκ°€μš”?

πŸ‘‰ λ¬Έμ„œ ν˜•μ‹μ„ μ •μ˜ν•˜κΈ° μœ„ν•œ κ΅¬λ¬Έμž…λ‹ˆλ‹€.

  • HTML5λ₯Ό μ‚¬μš©ν•œλ‹€λ©΄

πŸ‘‰ Example

<!DOCTYPE html>

μ΄κ²ƒλ§Œ μ“°λ©΄ λ©λ‹ˆλ‹€.

  • ν‘œμ€€λͺ¨λ“œ(standards mode)와 쿽슀λͺ¨λ“œ(quirks mode)의 λ‹€λ₯Έ 점은 λ¬΄μ—‡μΈκ°€μš”?

πŸ‘‰ ν‘œμ€€λͺ¨λ“œλŠ” W3Cλ‚˜ IETF의 ν‘œμ€€μ„ μ€€μˆ˜ν•˜μ—¬ μ›ΉνŽ˜μ΄μ§€λ₯Ό λ Œλ”λ§ν•©λ‹ˆλ‹€.

쿽슀λͺ¨λ“œλŠ” 였래된 μ›Ή λΈŒλΌμš°μ €μ—μ„œλ„ ν˜Έν™˜λ˜λ„λ‘ λΉ„ν‘œμ€€μ μΈ λ°©λ²•μ˜ CSSλ₯Ό μ μš©ν•΄ μ›ΉνŽ˜μ΄μ§€λ₯Ό λ Œλ”λ§ν•˜λ©°, λ Œλ”λ§ 방식은 λΈŒλΌμš°μ €μ— 따라 λ‹€λ¦…λ‹ˆλ‹€.

DOCTYPE 선언이 μ‘΄μž¬ν•˜μ§€ μ•Šκ±°λ‚˜ 잘λͺ» μ ν˜€μžˆμ„ 경우 λΈŒλΌμš°μ €λŠ” μ›ΉνŽ˜μ΄μ§€λ₯Ό 쿽슀λͺ¨λ“œλ‘œ ν•΄μ„ν•©λ‹ˆλ‹€.

μ°Έμ‘°