νλ‘ νΈμλ κΈ°μ μ€νμ λ¨κ³λ³λ‘ νμ΅νλ μ μ₯μμ λλ€.
μΉ κ°λ°μ νμν κΈ°λ³ΈκΈ°λΆν° μ€μ κΈ°μ κΉμ§, νλ‘ νΈμλ κ°λ° μ λ°μ νμ΅νκ³ μ€μ΅νλ κ³Όμ μ κΈ°λ‘νκ³ μμ΅λλ€. κ° λ¨κ³λ³ μμ μ½λμ μ€μ΅ μλ£, κ·Έλ¦¬κ³ μ€μ νλ‘μ νΈλ₯Ό ν΅ν΄ νμ΅ λ΄μ©μ μ μ©ν΄λ΄ λλ€.
- VS Code κΈ°λ³Έ μ€μ λ° λ¨μν€
- Claude Code μ€μΉ λ° νμ©
- HTML κΈ°μ΄ κ΅¬μ‘° λ° μ£Όμ νκ·Έ
- μλ§¨ν± λ§ν¬μ μ νμ©ν μΉ νμ΄μ§ ꡬ쑰
- ν μ€νΈ μμ, λ§ν¬, μ΄λ―Έμ§ μ²λ¦¬
- ν μ΄λΈ, νΌ μμ±
- λ©ν°λ―Έλμ΄ μμ(
<video>,<audio>) μ½μ - Emmetμ νμ©ν ν¨μ¨μ μΈ μ½λ μμ±
- λΈλΌμ°μ κ°λ°μλꡬ νμ©
- CSS κΈ°μ΄ μ νμ(μμ, ν΄λμ€, ID)
- μ νμ μ°μ μμμ νΉμ΄μ±(Specificity)
- CSS μ½λ μμ± μμ κ΄λ‘ λ° λͺ¨λ² μ¬λ‘
- μ νμ μ‘°ν©κ³Ό νμ© λ°©λ²
- Stylelintλ₯Ό νμ©ν μμ± μμ μλ μ λ ¬
- λ°μ€ λͺ¨λΈ(Box Model)κ³Ό Flexbox λ μ΄μμ κΈ°μ΄
- CSS μ°κ²° λ°©λ² 3κ°μ§(μΈλΆ, λ΄λΆ, μΈλΌμΈ)μ κ°μ ν΄λμ€
- transformμ μ΄μ©ν 3D μΉ΄λ λ€μ§κΈ°, hover μ λλ©μ΄μ
- @keyframesλ₯Ό νμ©ν μλ μ λλ©μ΄μ
- μΈμ νμ μ νμ(~)λ₯Ό μ΄μ©ν μν κΈ°λ° μ€νμΌλ§
- position(relative/absolute/fixed/sticky) μμ λ°°μΉ
- CSS Gridλ₯Ό μ΄μ©ν 격μ λ μ΄μμ
- νμ΅ν HTML κΈ°μ μ νμ©ν κ°μΈ ν¬νΈν΄λ¦¬μ€ μΉμ¬μ΄νΈ
κ° μμ λ λΈλΌμ°μ μμ μ΄μ΄ μ€μ΅ν μ μμ΅λλ€:
open hancom/02_html/34_index.html1μΌμ°¨ β HTML κΈ°λ³Έ νκ·Έμ μΉ νμ΄μ§ ꡬ쑰
2μΌμ°¨ β ν, νΌ, μλ§¨ν± νκ·Έ
3μΌμ°¨ β μμ, μμ±, Emmet, κ°λ°μλꡬ
4μΌμ°¨ β CSS κΈ°μ΄ μ νμ λ° μ½λ μμ κ΄λ‘
5μΌμ°¨ β CSS κ³ κΈ μ νμ, λ°μ€λͺ¨λΈ/Flex, μ λλ©μ΄μ
Β·ν¬μ§μ
λ, Grid λ μ΄μμ
Author: ndopy
Last Updated: 2026-07-02