Html5-boilerplate: ``둜 λ˜λŒλ¦¬μ‹œκ² μŠ΅λ‹ˆκΉŒ?

에 λ§Œλ“  2014λ…„ 03μ›” 22일  Β·  18μ½”λ©˜νŠΈ  Β·  좜처: h5bp/html5-boilerplate

이전 ν† λ‘ 

λ³€κ²½λœ 컀밋: https://github.com/h5bp/html5-boilerplate/commit/7a2f9dcf8b56b6923a5bde028ea1838d32572588
κ΄€λ ¨ 문제: #335, #1059.

사양, λΈŒλΌμš°μ € 및 μœ νš¨μ„± 검사기

WHATWGμ—μ„œ

DOCTYPE은 λ‹€μŒ ꡬ성 μš”μ†Œλ‘œ κ΅¬μ„±λ˜μ–΄μ•Ό ν•©λ‹ˆλ‹€.

  1. ASCII인 λ¬Έμžμ—΄ β†’ λŒ€μ†Œλ¬Έμžλ₯Ό κ΅¬λΆ„ν•˜μ§€ μ•ŠλŠ” ← λ¬Έμžμ—΄ ".
  2. ν•˜λ‚˜ μ΄μƒμ˜ 곡백 문자.
  3. λ¬Έμžμ—΄ "html"에 λŒ€ν•΄ ASCII β†’ λŒ€μ†Œλ¬Έμžλ₯Ό κ΅¬λΆ„ν•˜μ§€ μ•ŠλŠ” ← 일치인 λ¬Έμžμ—΄μž…λ‹ˆλ‹€.
  4. μ„ νƒμ μœΌλ‘œ DOCTYPE λ ˆκ±°μ‹œ λ¬Έμžμ—΄ λ˜λŠ” μ‚¬μš©λ˜μ§€ μ•ŠλŠ” ν—ˆμš©λœ DOCTYPE λ¬Έμžμ—΄(μ•„λž˜μ— μ •μ˜λ¨).
  5. 0개 μ΄μƒμ˜ 곡백 문자.
  6. U+003E GREATER-THAN SIGN 문자(>).

즉, λŒ€μ†Œλ¬Έμžλ₯Ό κ΅¬λΆ„ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

λ”°λΌμ„œ 사양에 λ”°λ₯΄λ©΄ μΌ€μ΄μŠ€λŠ” μ€‘μš”ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. λ˜ν•œ λΈŒλΌμš°μ €(AFAIK)λŠ” μ‹ κ²½ 쓰지 μ•ŠμœΌλ©° W3C μœ νš¨μ„± 검사기 λŠ” 두 경우 λͺ¨λ‘

<!doctype html> μ‚¬μš©μ˜ μž₯단점

μž₯점:

단점:

  • 일뢀 IDE/ν…μŠ€νŠΈ νŽΈμ§‘κΈ°λŠ” ꡬ문에 λŒ€ν•΄ λΆˆν‰ν•©λ‹ˆλ‹€(IMHO 이것은 IDE/ν…μŠ€νŠΈ νŽΈμ§‘κΈ°μ˜ 버그λ₯Ό λ‚˜νƒ€λ‚΄λ―€λ‘œ H5BP의 경우 λ¬Έμ œκ°€ λ˜μ§€ μ•Šμ•„μ•Ό ν•˜λ©° λ”°λΌμ„œ μˆ˜μ •ν•΄μ•Ό ν•©λ‹ˆλ‹€. 이 경둜둜 μ΄λ™ν•˜λ©΄ 일뢀 IDE/ν…μŠ€νŠΈ νŽΈμ§‘κΈ°κ°€ μƒˆ ꡬ문에 λŒ€ν•΄ λΆˆν‰ν•˜κΈ° λ•Œλ¬Έμ— CSS3 κΈ°λŠ₯을 μ‚¬μš©ν•΄μ„œλŠ” μ•ˆ λœλ‹€κ³  μ£Όμž₯).
  • λŒ€λ¬Έμž ν˜•μ‹μ΄ 더 일반적으둜 μ‚¬μš©λ˜λ―€λ‘œ κ°œλ°œμžκ°€ κΆκΈˆν•΄ν•˜κ±°λ‚˜ κΆκΈˆν•΄ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

생각?

κ°€μž₯ μœ μš©ν•œ λŒ“κΈ€

'doctype' λŒ€ 'DOCTYPE'의 압좕은 μ€‘μš”ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

λͺ¨λ“  18 λŒ“κΈ€

λ‚˜λŠ” κ·Έ μ••μΆ• 기사λ₯Ό 읽자마자 이것을 μƒκ°ν–ˆλ‹€.

"compresses better" μΈμˆ˜λŠ” μΌλ°˜ν™”μž…λ‹ˆλ‹€. λ¬Έμ„œμ˜ λ‚˜λ¨Έμ§€ λΆ€λΆ„μ—μ„œ document μ†Œλ¬Έμžκ°€ λŒ€λ¬Έμž DOCUMENT λ¬Έμžλ³΄λ‹€ 더 일반적이라고 κ°€μ •ν•©λ‹ˆλ‹€. 이것은 λͺ¨λ“  λ¬Έμ„œμ— ν•΄λ‹Ήλ˜μ§€ μ•Šμ„ 수 μžˆμŠ΅λ‹ˆλ‹€.

"개발자의 ν˜ΈκΈ°μ‹¬μ„ λΆˆλŸ¬μΌμœΌν‚¬ 수 있음"은 μ£Όκ΄€μ μž…λ‹ˆλ‹€. <!DoCtYpE hTmL> 에 λŒ€ν•΄μ„œλ„ 같은 말을 ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

pro λŒ€λ¬Έμžκ°€ 닀쀑 μ–Έμ–΄/XHTML ν˜Έν™˜μ„± 인 또 λ‹€λ₯Έ 이유(XHTML은 λˆ„κ΅°κ°€ 적극적으둜 μ§€μ›ν•˜κΈ°λ₯Ό μ›ν•˜λŠ” 것이 μ•„λ‹ˆμ§€λ§Œ)μž…λ‹ˆλ‹€.

'doctype' λŒ€ 'DOCTYPE'의 압좕은 μ€‘μš”ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

DOCTYPE λŒ€λ¬Έμžλ₯Ό μ‚¬μš©ν•˜λ©΄ WHATWG의 λ¬Έμ„œμ— μ–ΈκΈ‰λœ λ‚΄μš©κ³Ό 일관성을 μœ μ§€ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

doctype을 μ†Œλ¬Έμžλ‘œ μ‚¬μš©ν•˜λ©΄ @paulirish와 일관성을 μœ μ§€ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

μž₯κ΅° μž₯κ΅°.

λ‚˜λŠ” doctype을 λŒ€λ¬Έμžλ‘œ κ·ΈλŒ€λ‘œ λ‘λŠ” 것을 μ„ ν˜Έν•©λ‹ˆλ‹€. λ‹€λ₯Έ λ³€ν˜•μ— λŒ€ν•œ κ°€μΉ˜λŠ” λ§Žμ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

@mathiasbynens λ‚˜λŠ” λ˜ν•œ λŒ€λ¬Έμž λ³€ν˜•μ΄ μ•½κ°„μ˜ 이점이 μžˆλ‹€κ³  μƒκ°ν•©λ‹ˆλ‹€. 당신이 λ§ν–ˆλ“―μ΄ μ•„λ§ˆλ„ λˆ„κ΅°κ°€ polyglot/XHTML을 μ§€μ›ν•˜κ³  μ‹Άμ–΄ν•˜μ§€ μ•Šμ„ κ²ƒμž…λ‹ˆλ‹€ =) ...ν•˜μ§€λ§Œ λͺ¨λ“  xml νŒŒμ„œλŠ” λŒ€λ¬Έμž doctype이 μžˆλŠ” HTML λ¬Έμ„œλ₯Ό ꡬ문 뢄석할 수 μžˆμ§€λ§Œ μ†Œλ¬Έμž λ˜λŠ” ν˜Όν•©λœ 경우 ν•˜λ‚˜λŠ” ꡬ문 뢄석 였λ₯˜λ₯Ό 던질 κ²ƒμž…λ‹ˆλ‹€...λ§Žμ€ μ‚¬λžŒλ“€μ΄ XML ꡬ문 λΆ„μ„κΈ°λ‘œ html λ¬Έμ„œλ₯Ό κ΄‘λ²”μœ„ν•˜κ²Œ ꡬ문 λΆ„μ„ν•˜μ§€λŠ” μ•Šμ§€λ§Œ(그리고 λ‚˜λ¨Έμ§€ νƒœκ·Έλ„ XHTMLκ³Ό ν˜Έν™˜λ˜μ–΄μ•Ό ν•©λ‹ˆλ‹€(예: 자체 λ‹«κΈ° λ“±)). κ·Έλž˜μ„œ λ‚˜λŠ” λŒ€λ¬Έμž doctype으둜 인해 μƒμ²˜λ°›μ€ μ‚¬λžŒμ„ 보지 λͺ»ν–ˆμ§€λ§Œ μ„€λͺ… 된 κ²½μš°μ—λŠ” κ°€λŠ₯ν•  κ²ƒμž…λ‹ˆλ‹€ ... 적어도 그것이 λ‚΄κ°€ 이해 ν•œ λ°©μ‹μž…λ‹ˆλ‹€ =)

일뢀 IDE/ν…μŠ€νŠΈ νŽΈμ§‘κΈ°λŠ” ꡬ문에 λŒ€ν•΄ λΆˆν‰ν•©λ‹ˆλ‹€.

λ‚˜λŠ” 그것이 ν•΄κ²°λ˜μ—ˆλ‹€κ³  μƒκ°ν•˜κΈ° λ•Œλ¬Έμ— μ§€κΈˆ 이것에 λŒ€ν•œ 증거λ₯Ό 찾을 수 μ—†μŠ΅λ‹ˆλ‹€.
Textmate 2: 문제 μ—†μŠ΅λ‹ˆλ‹€. ST2: 문제 μ—†μŠ΅λ‹ˆλ‹€. WebStorm 7: 문제 μ—†μŠ΅λ‹ˆλ‹€. μ•„ν†°: λ‹€ μ’‹μ•„.

λ”°λΌμ„œ μ†Œλ¬Έμžλ₯Ό ν”Όν•΄μ•Ό ν•  μ‹¬κ°ν•œ μ΄μœ λŠ” μ—†μŠ΅λ‹ˆλ‹€.

H5BPλŠ” 였래 전에 λ‹€κ΅­μ–΄ λ¬Έμ„œ 지원을 κ±°λΆ€ν–ˆμŠ΅λ‹ˆλ‹€. doctype μˆ˜μ€€μ—μ„œ μ§€μ›ν•˜κ³  λ‚˜λ¨Έμ§€ 지원을 λ¬΄μ‹œν•˜λŠ” 것은 κ°€μΉ˜κ°€ μ—†μŠ΅λ‹ˆλ‹€.

μ†Œλ¬Έμž doctype이 μ‚¬μš©λœ html νƒœκ·Έμ˜ μ†Œλ¬Έμžμ™€ μΌμΉ˜ν•œλ‹€κ³  μƒκ°ν•©λ‹ˆλ‹€. 일관성을 λ„˜μ–΄ λŒ€λ¬ΈμžλŠ” μ‹œλ„λŸ½κ³  λΆˆμΎŒν•˜λ©° HTML μ†ŒμŠ€μ— λŒ€ν•œ μ°¨λΆ„ν•œ μ†Œκ°œκ°€ μ•„λ‹™λ‹ˆλ‹€. Google은 이전 h5bp λ²„μ „μœΌλ‘œ κ΅¬μΆ•λœ μˆ˜μ‹­λ§Œ 개의 μ‚¬μ΄νŠΈμ™€ ν•¨κ»˜ μ†Œλ¬Έμž doctype을 μ‚¬μš©ν•©λ‹ˆλ‹€.

@exside λŠ”

이것은 λŒ€λ¬Έμžλ₯Ό μ‚¬μš©ν•˜λŠ” μ΄μœ κ°€ μ „ν˜€ μ—†λ‹€λŠ” 것을 λ§ν•˜λŠ” 것이 μ•„λ‹™λ‹ˆλ‹€. 단지 당신이 μ œκΈ°ν•œ μ΄μœ κ°€ μœ νš¨ν•˜μ§€ μ•Šκ±°λ‚˜ h5bpκ°€ λ‚΄λ¦° λ‹€λ₯Έ κ²°μ •λ“€ 쀑 일뢀와 μΌμΉ˜ν•˜μ§€ μ•ŠλŠ”λ‹€λŠ” 것일 λΏμž…λ‹ˆλ‹€.

κ·Έ κ΄€μ μ—μ„œ @QWp6t , 당신이 ν™•μ‹€νžˆ μ˜³μŠ΅λ‹ˆλ‹€ =)...μ €λŠ” h5bpμ—μ„œ λ§Žμ€ μ–‘μ˜ λͺ¨λ²” 사둀λ₯Ό 얻은 제 "μžμ‹ μ˜" μ œμž‘λœ κΈ°λ³Έ ν…œν”Œλ¦Ώμ„ μ‚¬μš©ν•˜λ―€λ‘œ "μˆœμˆ˜ν•œ" 것이 μ—†μ—ˆμŠ΅λ‹ˆλ‹€. ν•΄λ‹Ή 주석을 μž‘μ„±ν•  λ•Œ h5bpλ₯Ό 염두에 λ‘μ—ˆμ§€λ§Œ XHTML의 엄격함을 μ–΄λ–»κ²Œλ“  μ’‹μ•„ν–ˆκΈ° λ•Œλ¬Έμ— μ—¬μ „νžˆ XHTML ν˜Έν™˜ λ°©μ‹μœΌλ‘œ μž‘μ„±ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€(예: 자체 λ‹«λŠ” νƒœκ·Έ λ“±).

μ—¬κΈ°μ„œ 결둠은 λ¬΄μ—‡μž…λ‹ˆκΉŒ? μ—¬μ „νžˆ doctype을 λ³€κ²½ν•  μ΄μœ κ°€ μ—†μŠ΅λ‹ˆλ‹€.

μ—¬μ „νžˆ doctype을 λ³€κ²½ν•  μ΄μœ κ°€ μ—†μŠ΅λ‹ˆλ‹€.

μ €μ—κ²Œ @drublic 은 이 λ³€κ²½μ˜ 주된 μ΄μœ κ°€ λ‚˜λ¨Έμ§€ μ½”λ“œμ™€ 더 일관성이 μžˆλ‹€κ³  느끼기 λ•Œλ¬Έμž…λ‹ˆλ‹€.

μ†Œλ¬Έμž doctype이 μ‚¬μš©λœ html νƒœκ·Έμ˜ μ†Œλ¬Έμžμ™€ μΌμΉ˜ν•œλ‹€κ³  μƒκ°ν•©λ‹ˆλ‹€. 일관성을 λ„˜μ–΄ λŒ€λ¬ΈμžλŠ” μ‹œλ„λŸ½κ³  λΆˆμΎŒν•˜λ©° HTML μ†ŒμŠ€μ— λŒ€ν•œ μ°¨λΆ„ν•œ μ†Œκ°œκ°€ μ•„λ‹™λ‹ˆλ‹€. Google은 이전 h5bp λ²„μ „μœΌλ‘œ κ΅¬μΆ•λœ μˆ˜μ‹­λ§Œ 개의 μ‚¬μ΄νŠΈμ™€ ν•¨κ»˜ μ†Œλ¬Έμž doctype을 μ‚¬μš©ν•©λ‹ˆλ‹€.

@paulirish 의 μœ„ μ˜κ²¬μ„

@alrra 예, μ €λŠ” _for_μž…λ‹ˆλ‹€.

μ†Œλ¬Έμž doctype이 μ‚¬μš©λœ html νƒœκ·Έμ˜ μ†Œλ¬Έμžμ™€ μΌμΉ˜ν•œλ‹€κ³  μƒκ°ν•©λ‹ˆλ‹€.

그리고 λ°˜λŒ€λ‘œ λŒ€λ¬ΈμžλŠ” DOCTYPE μ„ μ–Έ λ¬Έμžμ—΄(프리앰블)을 일반 html νƒœκ·Έ 와 ꡬ별

λ‚΄ :+1: <!DOCTYPE html>

ν”Όλ“œλ°± μ£Όμ…”μ„œ κ°μ‚¬ν•©λ‹ˆλ‹€!

λˆ„κ΅°κ°€ 톡계에 관심이 μžˆλŠ” 경우:

(:κ²½κ³ : 이 μˆ«μžκ°€ μ½˜ν…μΈ κ°€ μžˆλŠ” μ‹€μ œ νŽ˜μ΄μ§€λ₯Ό λŒ€ν‘œν•˜λŠ” 것은 μ•„λ‹ˆλ―€λ‘œ μž¬λ―ΈμžˆλŠ” ν†΅κ³„λ‘œ μ·¨κΈ‰ν•˜μ‹­μ‹œμ˜€!)


404.html
  • 404.html μ‚¬μš©ν•˜λŠ” <!DOCTYPE html>

    original size:         1242 B
    gzipped size:           580 B
    ─────────────────────────────
    reduction:              662 B [53.3%]
    
  • 404.html μ‚¬μš©ν•˜λŠ” <!doctype html>

    original size:         1242 B
    gzipped size:           574 B
    ─────────────────────────────
    reduction:              668 B [53.8%]
    

index.html
  • index.html μ‚¬μš©ν•˜λŠ” <!DOCTYPE html>

    original size:         1760 B
    gzipped size:           879 B
    ─────────────────────────────
    reduction:              881 B [50.1%]
    
  • index.html μ‚¬μš©ν•˜λŠ” <!doctype html>

    original size:         1760 B
    gzipped size:           875 B
    ─────────────────────────────
    reduction:              885 B [50.3%]
    

λ‚˜λŠ” 방금 λ‚΄ 기술 νŠΈμœ„ν„° λ°°κ²½ μ΄λ―Έμ§€λ‘œ νˆ¬ν‘œν–ˆμ–΄μ•Ό ν•œλ‹€λŠ” 것을 κΉ¨λ‹¬μ•˜μŠ΅λ‹ˆλ‹€.
4-3-2014 11-02-46 am

이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰