πCrucial : Understanding what HTML5 Actually is, Block vs inline Elements, <span> and <div> elements, Semantic Elements
π Nice to have : <sub> elements, <hr> elements, <br> elements, <sup> elements, VScode Emmet
HTML5λ?
βͺοΈ HTML5λ μλ‘μ΄ μμ, μμ±, νλμ κ°μ§ μλ‘μ΄ λ²μ μ HTML μΈμ΄, λ λ§μ μΌλ ¨μ κΈ°λ₯, μλ‘μ΄ ννμ HTML
βͺοΈ HTMLμ μ μνλ κ°μ₯ μ΅μ μ, λ°μ λ νμ€ , HTMLμ μλ λ°©μμ λν νμ€,
βͺοΈ λ€μ΄λ‘λλ μ λ°μ΄νΈ νλ μλ‘μ΄ λ²μ μ΄ μλλΌ κ·Έμ μ΄ λ¬Έμμ ν λ²μ μ
βͺοΈ λΈλΌμ°μ κ° κ΅¬ννλ μ¬μμ νμ€ -> HTML5λ λκ³ μΆλ€κ³ λκ±°λ λ°κΏ μ μλ κ² μλ
μΈλΌμΈκ³Ό λΈλ‘ μμ
βͺοΈ μ£Όμ΄μ§ elementκ° λ¬Έμμ μ½ν μΈ νλ¦μ λ€μ΄κ°κ² νλ λ°©λ²
βͺοΈ inline : μΌλΆλΆλ§ μ°¨μ§ν΄μ μ¬λ¬ μμλ₯Ό μΌμλ‘(κ°λ‘λ‘) λμ΄λμ μ μμ.
βͺοΈ block : h1, h2μ²λΌ νμ€μ λͺ¨λ μ°¨μ§ν¨
<span>κ³Ό <div>
λ νκ·Έ λͺ¨λ μΌμ’ μ μ λ€λ¦ 컨ν μ΄λ (무μΈκ°λ₯Ό κ·Έλ£Ήνν΄μ λ€λ₯Έ μ€νμΌμ μ μ©νλ λ°©λ²)
βοΈ <div> : division(λΆν ), block level, μμλ₯Ό κ·Έλ£Ήννλ μ λ€λ¦ 컨ν μ΄λ, μ¬λ¬ μ½ν μΈ λ₯Ό νλμ κ·Έλ£ΉμΌλ‘ λ¬Άλ λ°©λ²,
βοΈ <span> : inline level, divμ λ€λ₯΄κ² μΈλΌμΈμ΄λΌ μμ μμ μΌλΆλΆμ κ·Έλ£Ήννλλ° μμ£Ό μ¬μ©
<hr>, <br>, <sup>, <sub>
βοΈ <hr> : horizontal rule, λ«λ νκ·Έκ° λ°λ‘ μμ, λ¬Έμλ₯Ό κ°λ‘μ§λ₯΄λ μ μ μ½μ , κ°λ‘μ€
βοΈ <br> : line break element, μ€λ°κΏ νκ·Έ, κ·Έλ₯ μν°μΉλ κ²μ μ€λ°κΏμ΄ μλκΈ° λλ¬Έμ μ΄ νκ·Έλ‘ μ€λ°κΏ
βοΈ <sup> : Superscript, μ첨μ, κΈ°μ€ μ λ³΄λ€ λ μμ λ μλ μ«μ, μ κ³±κ°μ νμ ν λ μ¬μ©
βοΈ <sub> : Subscript, μλ«μ²¨μ, κΈ°μ€ μ λ³΄λ€ λ μλμ μλ μ«μ. ννμ μΈ λ μ²λΌ μ¬μ©
Entities Code
βͺοΈ HTML λμ μΈ μ μλ νΉμν μ½λ λλ μνμ€, HTMLμμ λ€λ₯Έ κΈμκ° νμλκ² νλ κ²
βͺοΈ λͺ¨λ μν°ν° μ½λλ &λ‘ μμν΄μ ;λ‘ λλ¨ , μν°ν° λ€μκ³Ό μ«μ λλ€ μ¬μ© κ°λ₯
βͺοΈ μμ½ λ¬Έμ(reserved character) : HTML ꡬ문μ μΈ λ μ¬μ©λκΈ° μν΄ λ―Έλ¦¬ μμ½λμ΄ μκΈ° λλ¬Έμ κ·Έλ₯ μ¬μ©μ μ€λ₯λ¨
β < : < (less than)
β > : > (greater than)
β & : &
Exercise - Snowman Logo Exercise

Semantic MarkUp
βͺοΈ Semantic : μλ―Έμ κ΄λ ¨λ -> μλ―Έκ° μλ λ§ν¬μ
βͺοΈ <div>λ§ κ³μ μ¬μ© -> μλ―Έκ° μλ λ§ν¬μ , λ¬΄μ¨ μν μ νλμ§ μ ν μ μ μμ
βͺοΈ λ§ν¬μ μ μλ―Έλ₯Ό λΆμ¬νλ κ²μ΄ μ€μν¨ (νμ§νμ μν )
- 첫λ²μ§Έ : ν¬λ‘€λ¬κ° λ μ½κ² μ½λλ₯Ό μΈμνκ² νκΈ° μν΄ -> λ€λ₯Έ μ΄ν리μΌμ΄μ λλ μ½λμ μ μ΅ν©
- λλ²μ§Έ : μ κ·Όμ±, μ€ν¬λ¦° 리λλ₯Ό μ°λ μ¬λλ€μ΄ λ μ½κ² μ κ·Όν μ μκ² νκΈ° μν΄μ
- μΈλ²μ§Έ : μμ±ν μ½λλ₯Ό κ°λ°μλ€μ΄ λ μ½κ² μ΄ν΄νκ³ μ°Ύμ μ μκ² νκΈ° μν΄
Semantic Elements
βοΈ <main> : λ¬Έμμ μ£Όμ λ΄μ©, λͺ¨λ νμ΄μ§μμ λ°λ³΅λλ λΆλΆμ λΉΌλ κ²μ΄ μμΉ(μ μκΆ νμ λ±)
βοΈ <nav> : νμ΄μ§μμ λ΄λΉκ²μ΄μ λ§ν¬λ₯Ό μ 곡νλ λΆλΆ,
βοΈ <section> : μΉνμ΄μ§λ μ ν리μΌμ΄μ μ λ 립μ μΈ λΆλΆ λνλ, λ±ν λ€λ₯Έ μν μ νμ§λ μμ, div λμ μ¬μ©
βοΈ <article> : λ¬Έμ λ΄ λ 립μ μΈ κ΅¬μ± λνλ, λ μ¨ μμ ―κ°μ κ±Έ λ§λ€ λ μ¬μ©
βοΈ <aside> : λ¬Έμμ νμμ μΌλ‘ νμν λΆλΆμ μλ κ²μ μ¬μ© (μλ§λ λ§λΆμ΄λ μ©λ)
βοΈ <header> : λ³΄ν΅ λ€λΉκ²μ΄μ μ ν¬ν¨ν΄μ(μν΄λ λ¨) νμ΄μ§λ₯Ό μκ°νλ μν , λ¨Έλ¦Ώλ§λ‘ μ¬μ©
βοΈ <footer> : λ§ν¬, λ€λΉκ²μ΄μ μ ν¬ν¨ν΄μ νμ΄μ§μ λ§μ§λ§μ λνλ, κΌ¬λ¦Ώλ§λ‘ μ¬μ©
βοΈ <time>, <datetime> : μκ°μ λνλ΄λ νκ·Έ
βοΈ <figure> : λ 립μ μΈ μμ, λ³΄ν΅ μ΄λ―Έμ§μ μ¬μ©, <figcaption>μ μ¬μ©νμ¬ μΊ‘μ λ λ¬ μ μμ
Screen Leader Memo
βͺοΈ Screen Leader : νΉμ μμλ₯Ό νμνκ±°λ μλ μΉ μ€ν μ€ν, λ€λΉκ²μ΄μ μ΄ μ΄λμλμ§ νμΈ(?)
-> μ΄ν΄κ° μ μκ°μ μ°Ύμ보λ μ»΄ν¨ν°μ νλ©΄ λλ μννΈμ¨μ΄λΌκ³ νλ€, μκ° μ₯μ μΈ λΆλ€μ΄ λ§μ΄ μ¬μ©νλ€κ³ ν¨
VScode Emmet
βͺοΈ μΆμ½λ ꡬ문μ μ΄μ©ν΄ htmlμ μ½κ² μμ±ν μ μμ,
β > : μμ κ΄κ³ νν
β + : νμ κ΄κ³ νν
β * : μ¬λ¬κ° μμ±ν λ μ¬μ©
β $ : λλ²λ§ ν λ μ¬μ©
β ^ : μμΉ κ΄κ³ νν
β {} : νκ·Έ μμ ν μ€νΈ μ½μ νκΈ°
β [] : νκ·Έ λ΄λΆμ ν μ€νΈ μ½μ νκΈ°
nav>ul>li*5>a[href=www.$.com]{Click me}'κ³΅λΆ κΈ°λ‘ > JavaScript' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
| [Udemy] The Web Developer Bootcamp 2022 : [7] CSS Selector (0) | 2022.07.11 |
|---|---|
| [Udemy] The Web Developer Bootcamp 2022 : [6] CSS κΈ°μ΄ (1) | 2022.07.09 |
| [Udemy] The Web Developer Bootcamp 2022 : [5] HTML form, table (0) | 2022.07.03 |
| [Udemy] The Web Developer Bootcamp 2022 : [3] HTML κΈ°μ΄ (0) | 2022.06.21 |
| [Udemy] The Web Developer Bootcamp 2022 : [2] μΉ κ°λ°μ΄λ? (1) | 2022.06.16 |