Files
html-examples/README.md
2025-02-09 19:02:05 +09:00

2.4 KiB

Html examples


목차

1. HTML5 개요

1.1 HTML의 역사
1.2 HTML5의 주요 특징
1.3 브라우저 지원 및 호환성

2. 기본 구조

2.1 HTML 문서의 기본 구조
2.2 <html> 태그
2.3 <head> 태그
2.4 <body> 태그

3. 콘텐츠 구조화

3.1 제목 태그: <h1> ~ <h6>
3.2 문단 태그: <p>
3.3 목록 태그: <ul>, <ol>, <li>
3.4 구분선: <hr>
3.5 블록 및 인라인 요소: <div>, <span>

4. 멀티미디어 요소

4.1 이미지 삽입: <img>
4.2 비디오 삽입: <video>
4.3 오디오 삽입: <audio>
4.4 미디어 컨트롤 속성

5. 링크와 내비게이션

5.1 하이퍼링크: <a>
5.2 네비게이션 태그: <nav>
5.3 앵커와 북마크

6. 폼과 사용자 입력

6.1 폼 기본 태그: <form>, <input>, <textarea>
6.2 폼 컨트롤: <button>, <select>, <option>
6.3 폼 속성과 검증: required, pattern, novalidate
6.4 데이터 전송 방식: GET과 POST

7. 표와 데이터 표현

7.1 표 태그: <table>, <tr>, <td>
7.2 제목과 요약: <caption>, <thead>, <tfoot>
7.3 병합 및 스타일링

8. 시맨틱 태그

8.1 의미론적 구조: <header>, <footer>, <section>, <article>
8.2 보조 구조 태그: <aside>, <main>
8.3 시맨틱 태그와 접근성

9. 스크립트와 데이터

9.1 스크립트 삽입: <script>
9.2 데이터 템플릿: <template>
9.3 JSON 데이터 삽입: <script type="application/json">

10. 스타일링과 디자인

10.1 내장 스타일: <style>
10.2 외부 CSS 연결: <link>
10.3 HTML5와 CSS3의 통합

11. Canvas와 그래픽

11.1 <canvas> 개요와 기본 사용법
11.2 2D 그리기 API
11.3 애니메이션 및 상호작용

12. SVG (Scalable Vector Graphics)

12.1 SVG 개요
12.2 SVG 태그: <svg>, <circle>, <rect>
12.3 SVG와 CSS/JavaScript의 통합

13. 웹스토리지와 데이터 관리

13.1 웹스토리지 API: localStorage, sessionStorage
13.2 <meta>를 활용한 데이터 정보
13.3 쿠키와 비교

14. HTML5와 웹 접근성

14.1 ARIA 속성
14.2 접근성 모범 사례
14.3 폼 및 시맨틱 태그의 활용

15. HTML5의 미래와 확장

15.1 최신 태그와 기능
15.2 웹 표준의 미래
15.3 HTML5와 다른 기술 (CSS3, JavaScript)와의 조화