DOCTYPE
<!-- HTML5 -->
<!DOCTYPE html>Document Typeμ μ½μ.
HTMLμ΄ μ΄λ€ λ²μ μΌλ‘ μμ±λμλμ§ λ―Έλ¦¬ μ μΈνμ¬ μΉλΈλΌμ°μ κ° λ΄μ©μ μ¬λ°λ‘ νμν μ μλλ‘ ν΄μ€λ€.
μ΄λ₯Ό μ μΈν΄μ£Όμ§ μμΌλ©΄, νΈν λͺ¨λ(quirks mode)λ‘ λμνλ©°, μ΄ κ²½μ° ν¬λ‘μ€ λΈλΌμ°μ§ μ΄μκ° μ¬ν΄μ§κ² λλ€.
νμ€ λͺ¨λμ νΈν λͺ¨λ
W3Cκ° μΉ νμ€μ λ§λ€λ©΄μ, λ λλ§μ ν λ νμ€ λͺ¨λ(Standards mode)μ νΈν λͺ¨λ(Quirks mode)λ‘ λ λλ§ν μ μλ μ΅μ
μ΄ μκ²Όλ€.
νΈν λͺ¨λλ‘ λ λλ§μ νκ² λλ©΄ μ€λλ μΉνμ΄μ§λ€μ μ΅μ λ²μ μ λΈλΌμ°μ μμλ κΉ¨μ§μ§ μκΈ° λλ¬Έμ κ° λΈλΌμ°μ λ§λ€ λ€λ₯΄κ² λ³΄μΌ μ μλ€.
λ°λΌμ νΉλ³ν κ²½μ°κ° μλλΌλ©΄ DOCTYPEμ λͺ
μνμ¬ λΈλΌμ°μ κ° νμ€ λͺ¨λλ‘ λ λλ§νκ² νλ κ² μ’λ€.
https://developer.mozilla.org/ko/docs/Web/HTML/Quirks_Mode_and_Standards_Mode
μΉ νμ€
μΉ μμμ νμ€μ μΌλ‘ μ¬μ©λλ κΈ°μ .
μΉμ¬μ΄νΈλ₯Ό μ΄λ ν μ΄μ체μ λ μ΄λ ν λΈλΌμ°μ μμ 보λλΌλ λμΌνκ² λ³΄μ¬μ§λλ‘ W3Cμ νμ€μ λ§μΆλ κ²μ΄λ€.
λ€μν λΈλΌμ°μ μμ λμν μ μμ΄ μ κ·Όμ±μ΄ ν₯μλλ€.
μ΅μ μΉ νμ€ λ²μ μ HTML5μ CSS3μ΄λ€.
HTML5μ μΆκ°λ λ΄μ©
- <canvas> νκ·Έ: HTML5μμ μλ‘κ² λμ λ κΈ°λ₯μΌλ‘, 2D κ·Έλν½μ μλ°μ€ν¬λ¦½νΈλ₯Ό ν΅ν΄ 그릴 μ μμ. λΉνΈλ§΅ λ°©μμΌλ‘, ν΄μλ μμ‘΄μ (Resolution-dependent)μ΄λ€.
- λͺ¨λ λλ°μ΄μ€ νΈνμ±: HTML5λ λ€μν λλ°μ΄μ€μμμ μΉνμ΄μ§ νΈνμ±μ ν¬κ² ν₯μμν΄.
- μλ§¨ν± μΉ κΈ°μ : HTML5μμ μ²μμΌλ‘ μλ§¨ν± νκ·Έκ° λμ λμ΄, λ¬Έμ ꡬ쑰λ₯Ό λͺ ννκ² ννν μ μκ² λ¨.
meta νκ·Έμ meta νκ·Έμ μμ
metaνκ·Έ : HTML λ¬Έμκ° μ΄λ€ λ΄μ©μ λ΄κ³ μκ³ , ν€μλλ 무μμ΄λ©°, λκ° λ§λ€μλμ§μ λν μ 보 (μΉ νμ΄μ§μ λ©νλ°μ΄ν°)λ₯Ό λ΄λ νκ·Έ
<head>
<meta charset="UTF-8" />
<meta name="keywords" content="Travel, Adventure, Destinations, Vacation, Guide" />
<meta name="description" content="Explore top travel destinations and tips for your next adventure." />
<meta name="author" content="GlobalExplorer" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Top Travel Destinations</title>
</head>- charset: λ¬Έμμμ νμ©νλ λ¬Έμ μ§ν©
- utf-8: μ μΈκ³μ μΈ character μ§ν©
- name: λ©ν μμκ° μ΄λ€ μ 보μ ννλ₯Ό κ°μ§κ³ μλμ§
- content: μ€μ λ©ν λ°μ΄ν°μ 컨ν μΈ keywordsμ description κ°μ νκ·Έλ κ²μμμ§μ΄ νμ΄μ§λ₯Ό νΉμ κ²μμ΄μ μ°κ΄ μ§κ³ , κ²μ κ²°κ³Όμ νμλ μμ½ λ΄μ©μ κ²°μ νλ λ° μ¬μ©λλ€. μ¬λ°λ₯΄κ² μ€μ λ meta νκ·Έλ κ²μμμ§ μ΅μ ν(SEO)μ κΈμ μ μΈ μν₯μ μ€ μ μλ€.
keywordsμ description κ°μ νκ·Έλ κ²μμμ§μ΄ νμ΄μ§λ₯Ό νΉμ κ²μμ΄μ μ°κ΄ μ§κ³ , κ²μ κ²°κ³Όμ νμλ μμ½ λ΄μ©μ κ²°μ νλ λ° μ¬μ©λλ€. μ¬λ°λ₯΄κ² μ€μ λ meta νκ·Έλ κ²μμμ§ μ΅μ ν(SEO)μ κΈμ μ μΈ μν₯μ μ€ μ μλ€.
μλ§¨ν± λ§ν¬μ
μ맨ν±(Semantic): "μλ―Έλ‘ μ μΈ"
λ§ν¬μ
(Markup): HTML νκ·Έλ‘ λ¬Έμλ₯Ό μμ±νλ κ²
-> μλ§¨ν± λ§ν¬μ μ΄λ, μλ―Έλ₯Ό μ μ λ¬νλλ‘ λ¬Έμλ₯Ό μμ±νλ κ².
μλ©ν± λ§ν¬μ μ μ₯μ
- κ²μμμ§ μ΅μ ν(SEO): κ²μμμ§μ΄ νμ΄μ§ ꡬ쑰λ₯Ό λ μ μ΄ν΄νκ³ , μ½ν μΈ λ₯Ό μ ννκ² μμΈν μ μλ€.
- μΉ μ κ·Όμ±: μ€ν¬λ¦° 리λμ κ°μ 보쑰 κΈ°μ μ΄ νμ΄μ§ ꡬ쑰λ₯Ό μ΄ν΄νλ λ° λμμ΄ λλ€.
- κ°λ μ±: μμ μμ²΄κ° μλ―Έλ₯Ό κ°μ§κΈ° λλ¬Έμ, μ½λλ§ λ΄λ μλ―Έλ₯Ό λΉ λ₯΄κ² νμ ν μ μλ€.
μμ± λ°©λ²
1. κ° νκ·Έλ₯Ό μ©λμ λ§κ² μ¬μ©νμ¬μΌ νλ€.
- ν€λ/νΈν° <header><footer>
- λ΄λΉκ²μ΄μ <nav>
- λ 립μ μΈ μ½ν μΈ <article>
- μ¬μ΄λ κ³΅κ° <aside>
- μ¬λ¬ μ€μ¬ λ΄μ© κ°μΈλ κ³΅κ° <section>
- μ΅μμ μ λͺ©μΌλ‘ <h1>
- μμ μλ λͺ©λ‘ <ul> <li>
2. CSS μ€νμΌμ λͺ μνλ νκ·Έλ₯Ό μ¬μ©νμ§ μλλ€.
νκ·Έκ° κ°μ§λ μλ―Έ μμ²΄κ° μ€νμΌμ΄λΌλ©΄, λ§ν¬μ μμ²΄κ° μ€νμΌμ κ°λ κ²μ΄κΈ° λλ¬Έμ μλ§¨ν± λ§ν¬μ μ μ ν©νμ§ μλ€!
μλ₯Ό λ€μ΄, λμΌν ν¨κ³Όλ₯Ό λΆμ¬νλ <strong> κ³Ό <b> νκ·Έκ° μλ€. λμ λμΌνκ² κΈμμμ μ§νκ² νμ§λ§ <b> νκ·Έμ κ²½μ°λ κ·Έ μμ²΄κ° "bold" μ μ½μ΄μ΄κΈ° λλ¬Έμ νκ·Έ μμ²΄κ° μ€νμΌμ κ°μ§λ€κ³ ν μ μλ€. νμ§λ§ <strong> μ κ²½μ°λ "κ·Έ μμ λ΄μ©μ΄ λ€λ₯Έ λ΄μ©λ³΄λ€ λ κ°μ‘°λμ΄μΌ νλ€" λΌλ μλ―Έλ₯Ό κ°μ§κΈ° λλ¬Έμ μλ§¨ν± λ§ν¬μ μ λ μ ν©νλ€.
https://github.com/baeharam/Must-Know-About-Frontend/blob/main/Notes/html/semantic.md
SEO (Search Engine Optimization)
κ²μ μμ§ μ΅μ ν(SEO: Search Engine Optimization)λ κ²μ μμ§μ΄ μΉνμ΄μ§μ μλ£λ₯Ό μμ§νκ³ μμλ₯Ό 맀길 λ, μΉνμ΄μ§κ° κ²μ κ²°κ³Όμμ μμμ λ ΈμΆλ μ μλλ‘ κ΅¬μ±νλ νμλ₯Ό λ§νλ€.
SEOλ₯Ό μν΄μλ μ μ ν κ²μμ΄(ν€μλ)λ₯Ό νμ΄μ§μ μ λ΅μ μΌλ‘ λ°°μΉνλ κ²μ΄ μ€μνλ€.
κ²μ μμ§μ μΉνμ΄μ§λ₯Ό λΆμν λ HTML νκ·Έμ κ·Έ ꡬ쑰λ₯Ό νκ°νλ©°, μ΄ κ³Όμ μμ μ맨ν±ν λ§ν¬μ μ μ¬μ©ν λ¬Έμλ κ²μ μμ§μ΄ νμ΄μ§μ λ΄μ©μ λ μ μ΄ν΄νκ³ , λ μλ―Έ μλ κ²°κ³Όλ₯Ό 보μ¬μ€ μ μκ² νλ€.
μΉ μ κ·Όμ±
μΉ μ κ·Όμ±: λͺ¨λ μ¬λ (λΉμ₯μ μΈ, μ₯μ μΈ, λ ΈμΈ λ±)μ΄ μ°¨λ³ μμ΄ μΉ μ¬μ΄νΈλ₯Ό μμ λ‘κ² μ΄μ©ν μ μκ² νλ κΆλ¦¬
- μΉ μ κ·Όμ±μ λ§λ λ§ν¬μ
μμ
- μ΄λ―Έμ§μ alt μμ± μΆκ°νμ¬ ν μ€νΈ λ체 μ€λͺ μ 곡
- λμμμ μλ§ λ° λλ³Έ μ 곡, μλμ¬μ κΈμ§
- input νκ·Έμ label μ 곡
- tableμ captionμ μ¬μ©ν΄ ν μ΄λΈμ λͺ©μ μ λͺ νν νκ³ , thead, tbody, th λ₯Ό μ¬μ©ν΄ ꡬ쑰λ₯Ό λͺ νν ν¨.
- 컨ν μΈ λ μμμ μλλ‘ μ ν ꡬ쑰 μ μ§
data- μμ±
μ λ°μ΄νΈ μμ
local storage vs session storage vs cookie
μ λ°μ΄νΈ μμ
script vs script async vs script defer
μ λ°μ΄νΈ μμ
SVG
μ λ°μ΄νΈ μμ
μ°Έκ³ λ ν¬μ§ν 리
https://github.com/junh0328/prepare_frontend_interview/blob/main/html_css.md
prepare_frontend_interview/html_css.md at main · junh0328/prepare_frontend_interview
π νλ‘ νΈμλ κΈ°μ λ©΄μ μ μν νΈλλΆ λ§λ€κΈ°. Contribute to junh0328/prepare_frontend_interview development by creating an account on GitHub.
github.com
https://github.com/baeharam/Must-Know-About-Frontend?tab=readme-ov-file
GitHub - baeharam/Must-Know-About-Frontend: :mortar_board: μ·¨μ€μμ΄λΌλ©΄ μλ©΄ μ’μ νλ‘ νΈμλ κ΄λ ¨ μ§μλ€
:mortar_board: μ·¨μ€μμ΄λΌλ©΄ μλ©΄ μ’μ νλ‘ νΈμλ κ΄λ ¨ μ§μλ€. Contribute to baeharam/Must-Know-About-Frontend development by creating an account on GitHub.
github.com
