μλ§¨ν± (Semantic) μ "μλ―Έλ‘ μ μΈ" μ΄λ λ»μ΄κ³ ,
μλ§¨ν± λ§ν¬μ μ΄λ κ·Έ μλ―Έλ₯Ό μ μ λ¬νλλ‘ HTML λ¬Έμλ₯Ό μμ±νλ κ²μ λ§νλ€.
header
<header></header> // μΉ νμ΄μ§μ λμ
λΆ
μ£Όλ‘ νμ΄μ§ μλ¨μ μΉ μ¬μ΄νΈ λ‘κ³ μ λ΄λΉκ²μ΄μ
λ§ν¬λ₯Ό κ°μΈλ κ²μ μ¬μ©
nav
<nav></nav> // μ¬μ΄νΈ λ΄ λ§ν¬λ₯Ό λͺ¨μλ λ΄λΉκ²μ΄μ
μ λ§λλ νκ·Έ
μΉ μ¬μ΄νΈμ λμ μ μμ±ν΄μ£Όλ©° μμ νμ΄μ§μμ νμ νμ΄μ§λ‘ μ λνλ μν
main
<main></main> // μΉ μ¬μ΄νΈμ λ³Έλ¬Έ
λ©μΈ 컨ν
μΈ λ₯Ό ν¬κ² κ°μΈμ£Όλ μν λ‘, ν HTML λ΄μμ 1κ°λ§ μ‘΄μ¬
article
<article></article> // main νκ·Έ μμμ div λ체,
λ΄μ€λ λΈλ‘κ·Έ κΈκ³Ό κ°μ΄ λ
립μ μΌλ‘ 컨ν
μΈ κ·Έ μμ²΄κ° λ μ μλ 컨ν
μΈ
section
<section></section>
// main νκ·Έ μμμ div λ체, κ° μ»¨ν
μΈ μ μμμ ꡬννλ κ²μ μ£Όλ‘ μ¬μ©
aside
<aside></aside> // main νκ·Έ μμμ, λΆκ°μ μΈ μ½ν
μΈ λ κ΄κ³ λ±μ νμνκΈ° μν΄ μ¬μ©
footer
<footer></footer> // μΉ νμ΄μ§μ κ°μ₯ νλ¨,
μΉ μ¬μ΄νΈ νλ¨μ νμ¬ μ 보λ μ½κ΄ μ 보, μ¬μ΄νΈ 맡, μμ
λ―Έλμ΄ λ§ν¬ λ±μ 컨ν
μΈ λ₯Ό νμνλ κ²μ μ¬μ©
μ΄ν€λ¦μ²΄
<i></i> // μκ°μ μΌλ‘λ§ μ΄ν€λ¦μ²΄
<em></em> // κ°μ‘°νλ μλ―Έκ° λ΄κΈ΄ μ΄ν€λ¦μ²΄
λ³Όλ체
<b></b> // μκ°μ μΌλ‘λ§ λ³Όλ체
<strong></strong> // κ°μ‘°νλ μλ―Έκ° λ΄κΈ΄ λ³Όλ체
λμ΄ νκ·Έ
<ol></ol> // μμκ° μ€μν λͺ©λ‘μ μμ±ν λ(1, 2, 3...)
<ul></ul> // μμκ° μλ λͺ©λ‘μ μμ±ν λ
<dl></dl> // κ°λ
μ μ μλ μ€λͺ
λ±μ λͺ©λ‘μ μμ±ν λ
button / a
// νΉμ ν μ‘μ
(λ‘κ·ΈμΈ, μ μΆ λ±)μ μν ν΄λ¦ κ°λ₯ν λ²νΌ
<button type="button" class="start-button">μμ</button>
// νμ΄μ§μμ μ΄λκ°λ‘ μ΄λ(ν λ²νΌ λ±)νλ λ§ν¬μΌ λ μ¬μ©, λ§ν¬/λ¬Έμκ°μ μ΄λ
<a href="" class="start-button">μμ</a>
λ λ§μ νκ·Έλ€ π https://developer.mozilla.org/ko/docs/Web/HTML/Element
block
μ£Όλ‘ layoutμ©μΌλ‘ display : block μμ±μ κ°μ§
- div, h1, p λ±..
- μμ§μΌλ‘ μμ΄κ³ ν¬κΈ°λ₯Ό μ§μ ν μ μμ
- margin, padding κ°μ μνμ’μ° λͺ¨λ μ€μ ν μ μμ
inline
μ£Όλ‘ textμ©μΌλ‘ display : inline μμ±μ κ°μ§
- span, a, img, input, textarea, button λ±..
- νμν λ§νΌμ λλΉλ₯Ό μ¬μ©
- width:0; height:0; μΌλ‘ μμ
- margin, padding κ°μ μ’μ°λ§ μ€μ ν μ μμ