diff --git a/README.md b/README.md
index b2b3eaf..108ac1d 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,87 @@
-# Html examples
\ No newline at end of file
+# 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)와의 조화  
diff --git a/doc/http/01_http.md b/doc/http/01_http.md
index d0c2ad2..efd4bf8 100644
--- a/doc/http/01_http.md
+++ b/doc/http/01_http.md
@@ -42,7 +42,7 @@ HTTP는 지속적으로 발전하고 있으며, 현재 주로 사용되는 버
 * 헤더: 추가적인 정보를 제공합니다. (User-Agent, Accept 등)
 * 본문: 서버로 전송할 데이터 (POST 메서드에서 주로 사용)
 
-```
+```http
 GET /products HTTP/1.1
 Host: www.example.com
 User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36
@@ -56,7 +56,7 @@ Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
 * 헤더: 추가적인 정보를 제공합니다. (Content-Type, Content-Length 등)
 * 본문: 요청한 데이터
 
-```
+```http
 HTTP/1.1 200 OK
 Content-Type: text/html; charset=utf-8
 Content-Length: 1234
diff --git a/doc/http/02_url.md b/doc/http/02_url.md
new file mode 100644
index 0000000..d86cfd9
--- /dev/null
+++ b/doc/http/02_url.md
@@ -0,0 +1,182 @@
+# URL (Uniform Resource Locator, 통합 자원 식별자)
+
+URL은 웹에서 **특정 자원의 위치를 식별**하고 접근할 수 있도록 하는 주소 체계입니다.  
+우리가 브라우저 주소창에 입력하는 **웹사이트 주소**가 바로 URL입니다.  
+
+예를 들어,  
+```
+https://www.example.com:8080/path/to/page?query=hello#section
+```
+이 URL을 분석하면, 각 요소가 특정한 의미를 가집니다.
+
+
+## URL의 구성 요소
+
+URL은 다음과 같은 주요 구성 요소로 이루어집니다.  
+
+```
+<프로토콜>://<호스트>:<포트>/<경로>?<쿼리>#<프래그먼트>
+```
+
+| 구성 요소 | 설명 | 예시 |
+|-----------|--------|-------------------------|
+| **프로토콜 (Scheme)** | 통신 방식 지정 | `http`, `https`, `ftp`, `file` |
+| **호스트 (Host, 도메인 또는 IP)** | 서버 주소 | `www.example.com`, `192.168.1.1` |
+| **포트 (Port, 선택사항)** | 서버 접속을 위한 포트 번호 | `80`, `443`, `21` |
+| **경로 (Path)** | 서버 내 특정 리소스 위치 | `/products/item1` |
+| **쿼리 스트링 (Query String)** | 추가 정보 전달 (Key-Value) | `?search=apple&page=2` |
+| **프래그먼트 (Fragment, 해시)** | 문서 내 특정 위치 지정 | `#section1` |
+
+
+### 프로토콜 (Scheme)
+URL의 맨 앞 부분으로, **자원에 접근하는 방법(통신 방식)을 정의**합니다.
+
+| 프로토콜 | 설명 |
+|----------|----------------------------------|
+| `http://` | 일반 웹사이트 접속 (보안 X) |
+| `https://` | 보안 웹사이트 접속 (SSL/TLS 사용) |
+| `ftp://` | 파일 전송 프로토콜 |
+| `file://` | 로컬 파일 시스템 접근 |
+| `mailto:` | 이메일 전송 |
+| `tel:` | 전화 걸기 |
+
+> **보안이 중요한 경우 HTTPS 사용이 필수** (HTTP는 데이터가 암호화되지 않음).  
+
+
+### 호스트 (Host)
+서버의 주소를 나타내며, **도메인 이름 또는 IP 주소**를 사용할 수 있습니다.  
+
+도메인 예시:
+```
+https://www.google.com
+```
+- `www.google.com`은 호스트(도메인)입니다.  
+
+IP 주소 예시:
+```
+http://192.168.1.1
+```
+- `192.168.1.1`은 호스트(IP 주소)입니다.  
+
+
+
+### 포트 (Port, 선택 사항)
+서버에서 특정 서비스가 실행되는 네트워크 포트를 지정합니다.  
+포트를 생략하면 기본값이 사용됩니다.
+
+| 프로토콜 | 기본 포트 |
+|----------|----------|
+| HTTP | `80` |
+| HTTPS | `443` |
+| FTP | `21` |
+
+포트 지정 예시:
+```
+http://example.com:8080
+```
+➡️ `8080` 포트에서 실행 중인 웹 애플리케이션에 접근  
+
+> 일반적으로 80(HTTP)과 443(HTTPS)은 생략 가능
+
+
+
+### 경로 (Path)
+서버 내 특정 리소스의 위치를 나타냅니다.
+
+예시
+```
+https://example.com/products/item1
+```
+* `products/item1`은 서버 내 특정 파일이나 페이지의 경로를 의미  
+
+> 웹사이트에서는 `/about` 같은 경로가 **파일 경로일 수도 있고, 동적 라우팅일 수도 있음**.  
+
+
+### 쿼리 스트링 (Query String)
+`?key=value&key2=value2` 형식으로, **추가적인 데이터를 서버에 전달**하는 데 사용됩니다.
+
+예시
+```
+https://example.com/search?query=phone&page=2
+```
+* `query=phone` → 검색어 "phone"  
+* `page=2` → 2페이지 요청  
+
+> 쿼리 스트링은 `&`로 여러 개의 값을 연결 가능
+
+> RESTful API에서는 쿼리 스트링 대신 URL 경로를 활용하는 경우가 많음
+> ```
+> https://api.example.com/users/123
+> ```
+> * `123`은 특정 사용자의 ID  
+
+
+
+### 프래그먼트 (Fragment, 해시)
+`#` 이후의 값으로, **웹페이지 내 특정 위치를 지정**합니다.  
+서버에는 전달되지 않으며, 브라우저에서만 사용됩니다.
+
+예시:
+```
+https://example.com/docs#section3
+```
+* `#section3`은 문서 내 특정 섹션으로 이동  
+
+> 단일 페이지 애플리케이션(SPA)에서 해시 라우팅에 사용될 수 있음.  
+> 예: `https://myapp.com/#/dashboard`
+
+
+## URL의 동작 과정
+URL을 입력하면 다음 과정이 이루어집니다.
+
+1️. **DNS 조회** : 도메인(`www.google.com`)을 IP 주소(`142.250.190.46`)로 변환  
+2️. **TCP/UDP 연결** : 클라이언트와 서버가 연결됨 (HTTPS의 경우 SSL/TLS 핸드셰이크 포함)  
+3️. **HTTP 요청 전송** : 브라우저가 서버에 HTTP 요청을 보냄 (`GET /index.html HTTP/1.1`)  
+4️. **서버 응답** : 서버가 HTML, JSON 등의 데이터를 반환  
+5️. **브라우저 렌더링** : HTML, CSS, JavaScript를 해석하여 화면에 표시  
+
+
+## URL과 URI의 차이
+| 구분 | URL (Uniform Resource Locator) | URI (Uniform Resource Identifier) |
+|------|-------------------------------|-------------------------------|
+| 의미 | 리소스의 "위치"를 나타냄 | 리소스를 "식별"하는 모든 방식 포함 |
+| 예시 | `https://example.com/page.html` | `mailto:user@example.com`, `isbn:978-3-16-148410-0` |
+| 포함 관계 | URI의 한 종류 | URI의 더 넓은 개념 |
+
+* 즉, 모든 URL은 URI이지만, 모든 URI가 URL은 아님.  
+
+
+## URL 인코딩 (Percent Encoding)
+URL에는 **특수 문자(공백, &, ?, = 등)를 포함할 수 없음**.  
+따라서, 특정 문자를 **URL 인코딩(Percent Encoding)** 해야 합니다.
+
+예시:
+| 문자 | URL 인코딩 |
+|------|-----------|
+| 공백 (` `) | `%20` |
+| `&` | `%26` |
+| `?` | `%3F` |
+| `=` | `%3D` |
+
+인코딩 예제:
+```
+https://example.com/search?query=hello world
+```
+* URL 인코딩 후:  
+```
+https://example.com/search?query=hello%20world
+```
+
+> 브라우저와 서버는 자동으로 URL 디코딩(복원)함.  
+
+
+## URL 단축 서비스
+긴 URL을 짧게 줄여주는 서비스도 많이 사용됩니다.  
+예시:
+```
+https://bit.ly/3A4Bx5C
+```
+* 원래 긴 URL을 짧게 변환하여 사용  
+
+> Google의 `goo.gl`, Bitly, TinyURL 같은 서비스가 존재
+
diff --git a/doc/http/02_http_method.md b/doc/http/03_http_method.md
similarity index 100%
rename from doc/http/02_http_method.md
rename to doc/http/03_http_method.md
diff --git a/doc/http/03_status_code.md b/doc/http/04_status_code.md
similarity index 100%
rename from doc/http/03_status_code.md
rename to doc/http/04_status_code.md
diff --git a/doc/http/04_http_header.md b/doc/http/05_http_header.md
similarity index 100%
rename from doc/http/04_http_header.md
rename to doc/http/05_http_header.md
diff --git a/doc/http/05_cookie_session.md b/doc/http/06_cookie_session.md
similarity index 100%
rename from doc/http/05_cookie_session.md
rename to doc/http/06_cookie_session.md
diff --git a/doc/http/06_restful.md b/doc/http/07_restful.md
similarity index 100%
rename from doc/http/06_restful.md
rename to doc/http/07_restful.md
diff --git a/doc/webcomponent/01_webcomponent.md b/doc/webcomponent/01_webcomponent.md
new file mode 100644
index 0000000..2621c7d
--- /dev/null
+++ b/doc/webcomponent/01_webcomponent.md
@@ -0,0 +1,163 @@
+# 웹 컴포넌트(Web Components)
+
+## 웹 컴포넌트(Web Components)란?
+웹 컴포넌트(Web Components)는 **재사용 가능한 UI 요소를 캡슐화하여 웹 애플리케이션에서 독립적으로 사용할 수 있는 기술**입니다.  
+HTML, CSS, JavaScript를 **하나의 독립된 컴포넌트**로 묶어, 다른 프레임워크(React, Vue, Angular) 없이도 사용할 수 있습니다.
+
+* 웹 컴포넌트의 핵심 목표
+    - **재사용성** : 여러 프로젝트에서 동일한 컴포넌트를 재사용  
+    - **캡슐화** : 내부 스타일과 동작을 외부로부터 보호  
+    - **프레임워크 독립적** : React, Vue, Angular 없이도 동작  
+    - **모듈화** : HTML 요소를 조합하여 더 복잡한 UI 요소를 생성  
+
+
+## 웹 컴포넌트를 구성하는 3가지 핵심 기술
+웹 컴포넌트는 다음 세 가지 핵심 기술을 기반으로 동작합니다.  
+
+### 1. Custom Elements (사용자 정의 요소)
+HTML에서 `<my-button>` 같은 새로운 태그를 직접 정의하여 사용할 수 있게 해주는 기술입니다.  
+
+#### 새로운 HTML 요소 정의 예시
+```javascript
+class MyButton extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `<button>Click Me</button>`;
+  }
+}
+customElements.define("my-button", MyButton);
+```
+사용 방법
+```html
+<my-button></my-button>
+```
+➡️ `my-button` 태그가 자동으로 버튼으로 렌더링됨.
+
+
+
+### 2. Shadow DOM (캡슐화)
+웹 컴포넌트 내부의 스타일과 구조를 **외부 영향 없이 독립적으로 유지하는 기능**입니다.  
+CSS 충돌을 방지하고, 외부에서 변경할 수 없도록 **컴포넌트 내부를 보호**합니다.
+
+#### Shadow DOM 사용 예시
+```javascript
+class ShadowButton extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" }); // Shadow DOM 활성화
+    this.shadowRoot.innerHTML = `
+      <style>
+        button {
+          background: blue;
+          color: white;
+          border: none;
+          padding: 10px;
+        }
+      </style>
+      <button>Shadow Button</button>
+    `;
+  }
+}
+customElements.define("shadow-button", ShadowButton);
+```
+사용 방법
+```html
+<shadow-button></shadow-button>
+```
+> Shadow DOM이 적용되면 외부 CSS가 이 버튼에 영향을 주지 않음.
+
+
+### 3. HTML Templates (템플릿 & 슬롯)
+컴포넌트에서 **반복해서 사용할 HTML 구조를 정의하고, 동적으로 채울 수 있도록 해주는 기능**입니다.  
+
+템플릿을 이용한 컴포넌트 예시
+```html
+<template id="card-template">
+  <style>
+    .card {
+      border: 1px solid #ddd;
+      padding: 10px;
+      border-radius: 5px;
+    }
+  </style>
+  <div class="card">
+    <slot name="title"></slot>
+    <slot name="content"></slot>
+  </div>
+</template>
+
+<script>
+class MyCard extends HTMLElement {
+  constructor() {
+    super();
+    const template = document.getElementById("card-template").content;
+    this.attachShadow({ mode: "open" }).appendChild(template.cloneNode(true));
+  }
+}
+customElements.define("my-card", MyCard);
+</script>
+
+<my-card>
+  <span slot="title"><h2>웹 컴포넌트</h2></span>
+  <span slot="content"><p>웹 컴포넌트 예제입니다.</p></span>
+</my-card>
+```
+> `slot`을 사용하여 컴포넌트 내부에 동적으로 콘텐츠를 삽입 가능.
+
+
+## 3. 웹 컴포넌트의 장점 & 단점
+* 장점
+    - **프레임워크 독립적** : 모든 브라우저에서 동작  
+    - **재사용성** : 한 번 만든 컴포넌트를 여러 프로젝트에서 활용 가능  
+    - **스타일 격리** : Shadow DOM을 이용해 CSS 충돌 방지  
+    - **성능 향상** : 네이티브 브라우저 지원으로 최적화됨  
+
+* 단점
+    - **구형 브라우저 지원 부족** : IE11 등에서는 폴리필 필요  
+    - **데이터 바인딩 부족** : React/Vue처럼 상태 관리 기능이 없음 (별도로 구현 필요)  
+    - **초기 학습 비용** : 기존 프레임워크 사용자에게는 생소할 수 있음  
+
+
+## 4. 웹 컴포넌트 vs 프레임워크 비교
+| 비교 항목 | 웹 컴포넌트 | React/Vue/Angular |
+|-----------|------------|-------------------|
+| **기술 종속성** | 없음 | 특정 프레임워크 필요 |
+| **재사용성** | 네이티브 지원 | 같은 프레임워크 내에서만 가능 |
+| **렌더링 성능** | 브라우저 최적화 | 가상 DOM 사용 (추가 오버헤드) |
+| **스타일 격리** | Shadow DOM 사용 | 기본적으로 없음 (Scoped CSS 사용 가능) |
+| **데이터 바인딩** | 직접 구현해야 함 | 내장 기능 제공 |
+
+➡️ 웹 컴포넌트는 특정 프레임워크에 종속되지 않는 강력한 기능을 제공하지만, 상태 관리 및 데이터 바인딩이 부족하므로 필요에 따라 프레임워크와 함께 사용할 수도 있음.
+
+---
+
+## 5. 웹 컴포넌트 활용 사례
+* 디자인 시스템 (Design System) 구축
+* 대규모 프로젝트의 UI 모듈화
+* 프레임워크 간 호환이 필요한 경우
+
+
+## 6. 웹 컴포넌트 배포 및 사용
+웹 컴포넌트는 **NPM 패키지**로 배포하거나, **CDN을 통해 웹사이트에서 직접 사용**할 수 있습니다.
+
+### CDN을 활용한 웹 컴포넌트 로드
+```html
+<script type="module" src="https://your-cdn.com/my-component.js"></script>
+<my-component></my-component>
+```
+
+### NPM으로 배포 후 사용
+```bash
+npm install my-web-component
+```
+```javascript
+import "my-web-component";
+```
+
+
+## 7. 결론
+웹 컴포넌트는 모든 웹 애플리케이션에서 재사용 가능한 UI 요소를 만들기 위한 표준 기술입니다.  
+* 프레임워크 독립적이며, 캡슐화된 UI 컴포넌트를 쉽게 만들고 재사용할 수 있음.
+* Shadow DOM을 활용하여 스타일 충돌을 방지하고, HTML 템플릿으로 동적 콘텐츠를 관리 가능.  
+* 프레임워크 없이도 UI 컴포넌트를 사용할 수 있어, 현대적인 웹 개발에서 점점 더 많이 활용됨.  
+
+웹 컴포넌트를 활용하면 프로젝트의 유지보수성과 확장성을 크게 높일 수 있습니다!
\ No newline at end of file
