들어가며

머리말과 저자목록

Notion 링크, PDF 파일 및 QR 코드

01. 시맨틱 마크업 재료준비

1. 마크업
2. 시맨틱 마크업
3. 검색 엔진 최적화
4. 웹 표준

02. 시맨틱 마크업 재료 다듬기

1. 콘텐츠 섹셔닝

   1.1 <address>

   1.2 <article>

   1.3 <aside>

   1.4 <footer>

   1.5 <header>

   1.6 <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

   1.7 <main>

   1.8 <nav>

   1.9 <section>

2. 텍스트 콘텐츠

   2.1 <blockquote>

   2.2 <figure>, <figcaption>

   2.3 <p>

   2.4 <ol>, <ul>

   2.5 <li>

   2.6 <pre>

   2.7 <hr>

   2.8 <menu>

3. 인라인 텍스트 시맨틱

   3.1 <a>

   3.2 <em>, <b>

   3.4 <u>

   3.5 <mark>

   3.6 <small>

   3.7 <cite>

   3.8 <q>

   3.9 <dfn>

   3.10 <abbr>

   3.11 <div>

   3.12 <span>

   3.13 <time>

   3.14 <data>

   3.15 <sub>, <sup>

   3.16 <br>

   3.17 <wbr>

   3.18 <kbd>

   3.19 <code>

   3.20 <samp>

   3.21 <cite>

4. 이미지 / 멀티미디어

4.1 <img>

4.2 <map>

4.3 <area>

4.4 <map>, <area>, <img>

4.5 <audio>

4.6 <video>

4.7 <track>

1. 수정사항 표시

   5.1 <del>

   5.2 <ins>

   5.3 <del>, <ins>

2. 대화형 요소

   6.1 <details>

   6.2 <summary>

   6.3 <details>, <summary>

   6.4 <dialog>

3. 양식

   7.1 <button>

   7.2 <datalist>

   7.3 <form>

   7.4 <fieldset>

   7.5 <label>

   7.6 <input>

   7.7 <legend>

   7.8 <meter>

   7.9 <select>

   7.10 <optgroup>

   7.11 <option>

   7.12 <progress>

   7.13 <textarea>

03. 시맨틱 마크업 요리하기

1. 헤더

   1.1 구역 나누기

   1.2 로고

   1.3 검색창

   1.4 탐색 메뉴

   1.5 전체 마크업

2. 회원가입 폼

   2.1 구역 나누기

   2.2 로고

   2.3 회원가입 목록과 정보 입력

   2.4 전체 마크업

3. 카트리스트

   3.1 구역 나누기

   3.2 상품 목록 만들기

   3.3 상품 정보 표시하기

   3.4 전체 마크업