2025-02-09T19:02:05

2025-02-09 19:02:05 +09:00
parent b7ea981588
commit 129046ec26
9 changed files with 434 additions and 3 deletions
--- a/README.md
+++ b/README.md
@@ -1 +1,87 @@
-# Html examples
+# 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)와의 조화