`: 텍스트의 특정 부분에 하이라이트를 적용하여 눈에 띄게 하고 싶을 때 사용합니다.
+
+```html
+저는 웹 개발 을 배우고 있습니다. 특히 HTML 과 CSS 가 재미있습니다.
+ JavaScript 도 배우고 싶은데, 아직 어렵네요.
+ 함께 공부할 사람 을 찾고 있습니다.
+```
+
+* strong과 b: 둘 다 텍스트를 굵게 표현하지만, strong은 의미적으로 중요한 부분을 강조하는 데 사용하는 것이 좋습니다.
+* em과 i: 둘 다 텍스트를 기울여 표현하지만, em은 논리적으로 강조하는 부분에 사용하고, i는 외국어, 기술 용어 등을 표현하는 데 사용하는 것이 일반적입니다.
+
+## 그 외
+
+* ``: 텍스트의 들여쓰기, 줄 바꿈 등을 그대로 유지하여 출력합니다. 주로 코드 블록을 표현할 때 사용합니다.
+ ```html
+
+ function factorial(n) {
+ if (n === 0) {
+ return 1;
+ }
+ return n * factorial(n - 1);
+ }
+ `: 문서의 저자 또는 연락처 정보를 표시합니다.
+ ```html
+
+ Written by: John Doejohn@example.com
+
+ ```
+* ``: 약어를 표시하고, 마우스를 올리면 전체 단어를 보여줄 수 있습니다.
+ ```html
+ HTML은 HyperText Markup Language 의 약자입니다.
+ ```
+* ``: 컴퓨터 코드를 표시합니다. 일반적으로 `` 태그와 함께 사용하여 코드 블록을 형성합니다.
+* ``: 삭제된 텍스트를 표시합니다.
+ ```html
+ 이 문장에서 삭제된 부분은 더 이상 필요하지 않습니다.
+ ```
+* ``: 어떤 글이나 문서에서 처음 등장하는 용어를 설명하거나 정의할 때 사용합니다.
+ ```html
+ HTML에서 요소 는 특정 용어를 정의할 때 사용합니다.
+ ```
+* ``: 추가된 텍스트를 표시합니다.
+ ```html
+ 원래 문장은 다음과 같았습니다. 추가된 부분
+ ```
+* ``: 작은 글자로 표시합니다.
+ ```html
+ 본문 내용(저작권 정보)
+ ```
+* ``: 아래 첨자를 표시합니다. 주로 화학식이나 수학 공식에서 사용됩니다.
+ ```html
+ 물의 화학식은 H2 O입니다.
+ ```
+* ``: 위 첨자를 표시합니다. 주로 지수 표현이나 단위 표현에서 사용됩니다.
+ ```html
+ 10의 3승은 103 입니다.
+ ```
+* `` : 변수를 나타내는 태그입니다. 주로 수학 공식이나 프로그래밍 코드에서 변수를 표시할 때 사용됩니다.
+ ```html
+ 피타고라스의 정리: a ² + b ² = c ²
+ ```
+* `` : 키보드 입력을 나타내는 태그입니다. 사용자가 직접 입력해야 하는 키를 표시할 때 사용됩니다.
+ ```html
+ 파일을 저장하려면 Ctrl+S 를 누르세요.
+ ```
+* `` : 컴퓨터 프로그램의 샘플 출력이나 인용된 출력을 나타내는 태그입니다.
+ ```html
+ 프로그램 실행 결과: Hello, world!
+ ```
+* `` : 특정 시간 또는 기간을 나타내는 태그입니다. 검색 엔진이나 보조 기술이 시간 정보를 더 잘 이해할 수 있도록 돕습니다.
+ - datetime 속성: 정확한 시간 정보를 ISO 8601 형식으로 표기합니다.
+ ```html
+ 2023년 12월 31일
+ ```
+
+## 루비
+루비(Ruby) 태그는 주로 동아시아 언어, 특히 일본어에서 한자어의 발음을 표기하는 데 사용되는 HTML 태그입니다.
+* ``: 루비 주석 전체를 감싸는 요소입니다.
+* ``: 루비 기본 문자(루비를 붙일 문자)를 나타냅니다.
+* ``: 루비 주석(발음)을 나타냅니다.
+* ``: 브라우저가 루비를 지원하지 않을 경우 표시될 괄호를 나타냅니다.
+
+```html
+私は日本語にほんご が大好きです。
+```
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/doc/html5/03_목록.md b/doc/html5/03_목록.md
new file mode 100644
index 0000000..b689108
--- /dev/null
+++ b/doc/html5/03_목록.md
@@ -0,0 +1,52 @@
+# 목록
+
+HTML에서 목록을 표현하는 데 사용되는 태그들은 웹 페이지의 가독성을 높이고 정보를 체계적으로 구성하는 데 중요한 역할을 합니다.
+
+목록 안에 다른 목록을 중첩하여 복잡한 구조를 만들 수 있습니다.
+
+## 순서 없는 목록 (Unordered List) - ul, li
+목록의 항목들 간에 특별한 순서가 없을 때 사용합니다. 각 항목 앞에 불렛(bullet) 마커가 표시됩니다.
+
+```html
+
+ 첫 번째 항목
+ 두 번째 항목
+ 세 번째 항목
+
+```
+
+* `` 태그는 `` 또는 `` 태그 안에서만 사용되며, 각 목록 항목을 나타냅니다.
+
+## 순서 있는 목록 (Ordered List) - ol, li
+목록의 항목들 간에 순서가 있을 때 사용합니다. 각 항목 앞에 숫자나 알파벳 등이 자동으로 부여됩니다.
+```html
+
+ 첫 번째 항목
+ 두 번째 항목
+ 세 번째 항목
+
+```
+
+## 목록에 스타일 적용하기
+```css
+ul {
+ list-style-type: square; /* 마커를 네모로 변경 */
+}
+ol {
+ list-style-position: inside; /* 숫자를 항목 안쪽으로 이동 */
+}
+```
+
+## 정의 목록 (Definition List) - dl, dt, dd
+용어와 설명을 짝으로 나타낼 때 사용합니다.
+```html
+
+ HTML
+ HyperText Markup Language의 약자로 웹 페이지를 만드는 언어입니다.
+ CSS
+ Cascading Style Sheets의 약자로 웹 페이지의 스타일을 정의하는 언어입니다.
+
+```
+* `` 태그는 정의 목록에서 용어를 나타내고, ` ` 태그는 해당 용어에 대한 설명을 나타냅니다.
+
+
diff --git a/doc/html5/04_링크.md b/doc/html5/04_링크.md
new file mode 100644
index 0000000..404bc9f
--- /dev/null
+++ b/doc/html5/04_링크.md
@@ -0,0 +1,36 @@
+# 링크 태그
+
+## a
+
+HTML에서 링크를 생성하는 데 가장 기본적으로 사용되는 태그는 `` 태그입니다. 앵커(anchor) 태그라고도 불리며, 다른 페이지, 특정 위치, 파일, 또는 이메일 주소로 연결하는 하이퍼링크를 만들 수 있습니다.
+
+```html
+ 링크 텍스트
+```
+
+* ``: 앵커 태그의 시작과 끝을 나타냅니다.
+* href: 링크할 페이지의 URL 주소를 지정합니다. URL은 상대 경로 또는 절대 경로를 사용할 수 있습니다.
+* target: 링크를 클릭했을 때 링크가 열리는 방식을 지정합니다.
+ - _blank: 새로운 창에서 열림
+ - _self: 현재 창에서 열림 (기본값)
+ - _parent: 부모 프레임에서 열림
+ - _top: 최상위 창에서 열림
+* rel 속성: 링크와 대상 간의 관계를 나타냅니다. (예: rel="nofollow": 검색 엔진에게 링크를 따라가지 말라고 지시)
+* title 속성: 마우스를 올려놓았을 때 표시되는 도구 설명을 지정합니다.
+
+```html
+ Example 웹사이트
+이메일 보내기
+페이지 내의 section2로 이동
+```
+```html
+
+버튼 클릭
+
+문서 다운로드
+
+```
+
+
diff --git a/doc/html5/05_멀티미디어.md b/doc/html5/05_멀티미디어.md
new file mode 100644
index 0000000..01ef8ba
--- /dev/null
+++ b/doc/html5/05_멀티미디어.md
@@ -0,0 +1,115 @@
+# 미디어
+
+## img
+웹 페이지에 이미지를 삽입하는 가장 기본적인 태그입니다.
+
+```html
+
+
+ Your browser does not support the video tag.
+
+```
+* controls: 사용자가 동영상을 재생, 일시 정지, 볼륨 조절 등을 할 수 있는 컨트롤을 표시합니다.
+* source: 동영상 파일의 경로와 형식을 지정합니다.
+* autoplay: 페이지 로드 시 자동으로 재생합니다.
+* muted: 음소거 상태로 재생합니다.
+* loop: 동영상이 끝나면 반복 재생합니다.
+* poster: 동영상이 로딩되기 전에 표시되는 이미지입니다.
+
+## audio
+HTML5부터 지원되는 태그로, 웹 페이지에 오디오 파일을 삽입할 수 있습니다.
+```html
+
+
+ Your browser does not support the audio element.
+
+```
+* controls: 사용자가 오디오를 재생, 일시 정지, 볼륨 조절 등을 할 수 있는 컨트롤을 표시합니다.
+* source: 오디오 파일의 경로와 형식을 지정합니다.
+* autoplay: 페이지 로드 시 자동으로 재생합니다.
+* loop: 오디오가 끝나면 반복 재생합니다.
+* preload: 브라우저가 미리 오디오 파일을 불러올지 여부를 지정합니다.
+
+## canvas
+자바스크립트를 사용하여 동적으로 그래픽을 그릴 수 있는 캔버스를 생성하는 태그입니다. 자바스크립트 API를 통해 다양한 그래픽 효과를 구현할 수 있습니다.
+게임, 데이터 시각화 등에 활용됩니다.
+```html
+
+
+```
+
+## picture
+다양한 화면 크기와 해상도에 맞는 이미지를 제공하기 위한 태그입니다. `` 태그를 사용하여 여러 이미지를 정의하고, 미디어 쿼리를 통해 적절한 이미지를 선택합니다.
+반응형 웹 디자인에 유용합니다.
+```html
+
+
+
+
+```
+
+## figure, figcaption
+이미지, 차트, 그래프 등의 콘텐츠와 캡션을 함께 묶어서 표현할 때 사용합니다.
+```html
+
+ 설명 텍스트
+
+```
+
+## map, area
+이미지의 특정 영역을 클릭했을 때 다른 페이지로 이동하거나 특정 기능을 실행하도록 설정할 수 있습니다.
+```html
+
+
+```
+* usemap: 이미지 맵의 이름을 지정합니다.
+* area: 이미지 맵의 각 영역을 정의합니다.
+* shape: 영역의 모양을 지정합니다. (rect: 사각형, circle: 원, poly: 다각형 등)
+* coords: 영역의 좌표를 지정합니다.
+
+## iframe
+Inline Frame의 약자로, HTML 문서 내에 또 다른 HTML 문서를 삽입하여 표시할 수 있도록 하는 태그입니다. 마치 웹 페이지 안에 작은 창을 띄워 다른 웹 페이지를 보여주는 것과 같습니다.
+* 다른 웹 페이지 삽입: 다른 웹사이트의 콘텐츠를 자신의 웹 페이지에 삽입하여 보여줄 수 있습니다. (예: 유튜브 동영상, 구글 지도 등)
+* 독립적인 콘텐츠 표시: 메인 페이지와 별도로 독립적인 콘텐츠를 표시할 수 있습니다.
+* 광고 노출: 광고 배너를 삽입하여 수익을 창출할 수 있습니다.
+
+```html
+
+```
+* src: 삽입할 문서의 URL을 지정합니다.
+* width: iframe의 너비를 지정합니다.
+* height: iframe의 높이를 지정합니다.
+* frameborder: iframe 테두리의 유무를 지정합니다.
+* scrolling: iframe 내부의 콘텐츠 스크롤 여부를 지정합니다.
+* name: iframe에 이름을 부여하여 자바스크립트에서 제어할 수 있도록 합니다.
+
+
+## embed, object
+주로 플러그인이나 액티브X 컨트롤을 삽입하는 데 사용되었습니다. 브라우저 호환성 문제가 많고, 보안 문제의 위험이 있어 최근에는 잘 사용되지 않습니다.
+* embed : 외부 콘텐츠를 웹 페이지에 포함시키는 데 사용되는 일반적인 태그입니다.
+* object : 다양한 형식의 데이터를 표현하는 데 사용되는 태그입니다. 이미지, 플러그인, 미디어 등을 포함할 수 있습니다.
+```html
+
+```
+```html
+`: 테이블 전체를 감싸는 최상위 태그입니다.
+* ``: 테이블의 한 행을 나타냅니다.
+* ``: 테이블의 헤더 셀(제목)을 나타냅니다. 일반적으로 굵은 글씨로 표시되며 가운데 정렬됩니다.
+* ` `: 테이블의 데이터 셀을 나타냅니다.
+* ``: 테이블 전체에 대한 설명이나 제목을 추가합니다.
+* ` `: 테이블 헤더 부분을 감싸는 태그입니다.
+* ` `: 테이블 본문 부분을 감싸는 태그입니다.
+* ` `: 테이블 푸터 부분을 감싸는 태그입니다.
+* ``: 여러 열에 대한 속성을 그룹으로 정의합니다.
+
+```html
+
+
+ 이름
+ 나이
+ 성별
+
+
+ 홍길동
+ 30
+ 남자
+
+
+ 김순이
+ 25
+ 여자
+
+
+```
+
+* 테이블은 데이터를 표 형식으로 정렬하여 보여주는 데 효과적입니다.
+* 복잡한 레이아웃을 구현하기 위해 테이블을 사용하는 것은 권장되지 않습니다. CSS Grid나 Flexbox를 사용하는 것이 더 적합합니다.
+* 모바일 환경에서 테이블이 제대로 표시되지 않을 수 있으므로, 반응형 웹 디자인을 고려해야 합니다.
+
+
+## 셀 병합하기
+* rowspan: 셀을 여러 행에 걸쳐 병합합니다.
+* colspan: 셀을 여러 열에 걸쳐 병합합니다.
+
+```html
+
+
+ 개인 정보
+
+
+ 이름
+ 홍길동
+
+
+ 연락처
+ 010-1234-5678
+
+
+ hong@example.com
+
+
+```
+
+## 테이블 스타일링
+CSS를 사용하여 테이블의 모양과 레이아웃을 다양하게 변경할 수 있습니다. 예를 들어, 테이블 테두리, 배경색, 글꼴 등을 설정할 수 있습니다.
+
+```css
+table {
+ border-collapse: collapse;
+}
+
+td, th {
+ border: 1px solid black;
+ padding: 10px;
+}
+```
+
diff --git a/doc/html5/07_폼.md b/doc/html5/07_폼.md
new file mode 100644
index 0000000..449338e
--- /dev/null
+++ b/doc/html5/07_폼.md
@@ -0,0 +1,95 @@
+# 폼
+HTML 폼은 사용자로부터 데이터를 입력받아 서버로 전송하는 데 사용됩니다. 다양한 종류의 입력 요소와 함께 사용하여 다양한 형태의 폼을 만들 수 있습니다.
+
+## form
+폼 전체를 감싸는 태그입니다.
+```html
+
+```
+* action: 폼 데이터를 전송할 서버 측 스크립트의 URL을 지정합니다.
+* method: 데이터를 전송하는 방법을 지정합니다 (get 또는 post).
+
+## input
+사용자 입력을 받는 다양한 종류의 입력 요소를 생성합니다.
+```html
+사용자 이름:
+
+ 한국
+ 미국
+ 일본
+
+```
+
+## option
+`` 태그 안에서 선택할 수 있는 옵션을 정의합니다.
+
+## button
+버튼을 생성합니다.
+```html
+제출
+초기화
+```
+* type: 버튼의 종류를 지정합니다.
+ - submit
+ - reset
+ - button
+
+## fieldset
+관련된 입력 요소들을 그룹화합니다.
+```html
+
+ 개인 정보
+
+```
+
+## legend
+`` 그룹에 대한 설명을 제공합니다.
diff --git a/doc/html5/08_섹션.md b/doc/html5/08_섹션.md
new file mode 100644
index 0000000..23a138a
--- /dev/null
+++ b/doc/html5/08_섹션.md
@@ -0,0 +1,83 @@
+# 섹션
+HTML5에서 웹 페이지의 구조를 논리적으로 나누고 의미를 부여하기 위해 다양한 섹션 태그가 도입되었습니다. 이러한 섹션 태그들은 웹 페이지의 가독성을 높이고, 검색 엔진 최적화(SEO)에도 긍정적인 영향을 미칩니다.
+
+```html
+
+
+
+ 주요 콘텐츠
+ 본문 내용
+
+
+
+```
+
+## section
+문서의 독립적인 섹션을 나타냅니다. 주제별로 내용을 구분할 때 사용합니다.
+```html
+
+ 첫 번째 섹션
+ 이 섹션은 첫 번째 내용을 담고 있습니다.
+
+```
+
+## article
+독립적인 콘텐츠 블록을 나타냅니다. 블로그 게시글, 뉴스 기사 등과 같이 재사용 가능한 콘텐츠에 사용합니다.
+```html
+
+ 블로그 게시글
+ 오늘의 날씨는 맑습니다.
+
+```
+
+## nav
+네비게이션 링크를 모아놓은 섹션을 나타냅니다.
+```html
+
+
+
+```
+
+## aside
+본문과 관련된 부가적인 정보를 담는 사이드바를 나타냅니다.
+```html
+
+ 광고
+
+```
+
+## header
+섹션의 헤더 부분을 나타냅니다. 제목, 검색창 등을 포함할 수 있습니다.
+```html
+
+```
+
+## main
+HTML5에서 도입된 태그로, HTML 문서의 주요 콘텐츠를 감싸는 역할을 합니다.
+* 유일성: 하나의 HTML 문서에 main 태그는 하나만 사용해야 합니다.
+* 위치: body 태그 안에 위치해야 합니다.
+* 내용: main 태그 안에는 웹 페이지의 주요 내용만 포함해야 합니다.
+* 헤더와 푸터: header와 footer 태그는 main 태그의 외부에 위치해야 합니다.
+
+## footer
+섹션의 푸터 부분을 나타냅니다. 저작권 정보, 연락처 등을 포함할 수 있습니다.
+```html
+
+```
diff --git a/Writerside/topics/Input.md b/doc/html5/Input.md
similarity index 100%
rename from Writerside/topics/Input.md
rename to doc/html5/Input.md
diff --git a/Writerside/topics/Interaction.md b/doc/html5/Interaction.md
similarity index 100%
rename from Writerside/topics/Interaction.md
rename to doc/html5/Interaction.md
diff --git a/Writerside/topics/Shadow-DOM.md b/doc/html5/Shadow-DOM.md
similarity index 100%
rename from Writerside/topics/Shadow-DOM.md
rename to doc/html5/Shadow-DOM.md
diff --git a/Writerside/topics/Template-and-Slot.md b/doc/html5/Template-and-Slot.md
similarity index 100%
rename from Writerside/topics/Template-and-Slot.md
rename to doc/html5/Template-and-Slot.md
diff --git a/Writerside/topics/Web-Forms.md b/doc/html5/Web-Forms.md
similarity index 100%
rename from Writerside/topics/Web-Forms.md
rename to doc/html5/Web-Forms.md
diff --git a/doc/http/01_http.md b/doc/http/01_http.md
new file mode 100644
index 0000000..d0c2ad2
--- /dev/null
+++ b/doc/http/01_http.md
@@ -0,0 +1,72 @@
+# HTTP
+
+**HTTP(HyperText Transfer Protocol)**는 웹에서 정보를 주고받기 위해 사용되는 기본적인 통신 규약입니다. 우리가 웹 브라우저를 통해 웹페이지를 보거나, 이미지를 다운로드하거나, 온라인 쇼핑을 할 때 모두 HTTP 프로토콜이 사용됩니다.
+
+## HTTP 프로토콜의 역할
+* 웹 페이지 요청: 사용자가 웹 브라우저의 주소창에 URL을 입력하면 브라우저는 해당 URL에 대한 HTTP 요청을 서버로 보냅니다.
+* 서버의 응답: 서버는 요청받은 내용을 처리하고, 요청된 웹 페이지의 HTML 코드, 이미지, CSS 파일 등을 포함하는 HTTP 응답을 브라우저로 보냅니다.
+* 브라우저의 렌더링: 브라우저는 받은 응답을 해석하여 우리가 보는 웹 페이지로 렌더링합니다.
+
+## HTTP 프로토콜의 특징
+* 클라이언트-서버 구조: HTTP는 클라이언트(브라우저)가 서버에 요청을 보내고, 서버가 응답하는 클라이언트-서버 구조를 기반으로 합니다.
+* 무상태(Stateless): 각 요청은 독립적이며, 서버는 이전 요청에 대한 정보를 저장하지 않습니다.
+* 비연결성(Connectionless): 한 번의 요청-응답이 이루어지면 연결이 끊어집니다.
+* 단순성: HTTP는 비교적 간단한 구조로 되어 있어 구현하기 쉽고, 다양한 플랫폼에서 사용될 수 있습니다.
+
+## HTTP 메서드
+HTTP 메서드는 클라이언트가 서버에 요청하는 작업의 종류를 나타냅니다. 주요 HTTP 메서드는 다음과 같습니다.
+
+* GET: 특정 자원을 요청합니다. (예: 웹 페이지 조회)
+* POST: 서버에 새로운 데이터를 전송합니다. (예: 회원 가입, 게시글 작성)
+* PUT: 특정 자원을 업데이트합니다.
+* DELETE: 특정 자원을 삭제합니다.
+
+## HTTP 상태 코드
+HTTP 상태 코드는 서버가 클라이언트의 요청에 대해 어떻게 처리했는지를 나타내는 숫자 코드입니다.
+
+* 200 OK: 요청이 성공적으로 처리되었습니다.
+* 404 Not Found: 요청한 자원이 없습니다.
+* 500 Internal Server Error: 서버에서 오류가 발생했습니다.
+
+## HTTP와 HTTPS의 차이점
+* HTTP: 일반적인 HTTP는 데이터를 암호화하지 않기 때문에 통신 내용이 도청될 위험이 있습니다.
+* HTTPS: HTTPS는 HTTP에 SSL/TLS 암호화를 추가하여 데이터를 안전하게 보호합니다. 따라서 개인정보나 금융 정보를 다루는 웹사이트에서는 HTTPS를 사용하는 것이 필수적입니다.
+
+## HTTP 버전
+HTTP는 지속적으로 발전하고 있으며, 현재 주로 사용되는 버전은 HTTP/1.1과 HTTP/2입니다. HTTP/2는 HTTP/1.1보다 더 빠르고 효율적인 통신을 지원합니다.
+
+## HTTP 요청 (HTTP Request)
+클라이언트가 서버에 보내는 메시지를 의미합니다. 요청에는 요청 메서드, 요청 URL, 헤더, 본문 등이 포함됩니다.
+* 요청 메서드: 수행하고자 하는 작업을 나타냅니다. (GET, POST, PUT, DELETE 등)
+* 요청 URL: 요청하려는 자원의 위치를 나타냅니다.
+* 헤더: 추가적인 정보를 제공합니다. (User-Agent, Accept 등)
+* 본문: 서버로 전송할 데이터 (POST 메서드에서 주로 사용)
+
+```
+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
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+```
+
+## HTTP 응답 ( HTTP Response)
+서버가 클라이언트에게 보내는 메시지를 의미합니다. 응답에는 상태 코드, 헤더, 본문 등이 포함됩니다.
+
+* 상태 코드: 요청 처리 결과를 나타냅니다. (200 OK, 404 Not Found 등)
+* 헤더: 추가적인 정보를 제공합니다. (Content-Type, Content-Length 등)
+* 본문: 요청한 데이터
+
+```
+HTTP/1.1 200 OK
+Content-Type: text/html; charset=utf-8
+Content-Length: 1234
+
+
+
+
+ 제품 목록
+
+
+
+
+```
diff --git a/doc/http/02_http_method.md b/doc/http/02_http_method.md
new file mode 100644
index 0000000..03dd193
--- /dev/null
+++ b/doc/http/02_http_method.md
@@ -0,0 +1,47 @@
+# HTTP 메서드
+
+HTTP 메서드는 웹 서버에 요청을 보낼 때 수행하고자 하는 작업의 종류를 명시하는 명령어입니다. 각 메서드는 서버에 특정한 동작을 요구하며, 이를 통해 웹 애플리케이션의 다양한 기능을 구현할 수 있습니다.
+
+## GET
+특정 자원을 요청하여 읽기 위한 메서드입니다.
+서버에 있는 데이터나 리소스를 가져오는 데 사용됩니다. 예를 들어, 웹 페이지를 조회하거나 이미지 파일을 다운로드할 때 사용합니다.
+
+* 요청 URL에 파라미터를 포함하여 서버에 추가적인 정보를 전달할 수 있습니다.
+* 요청 결과는 캐시될 수 있습니다.
+안전한 메서드로 간주되어 데이터를 변경하지 않습니다.
+
+## POST
+서버에 새로운 데이터를 생성하기 위한 메서드입니다.
+새로운 사용자를 등록하거나, 게시글을 작성할 때 사용됩니다.
+
+* 요청 본문에 데이터를 포함하여 서버로 전송합니다.
+* 데이터를 변경하기 때문에 안전하지 않은 메서드로 간주됩니다.
+
+## PUT
+특정 자원을 전체적으로 업데이트하기 위한 메서드입니다.
+기존 자원을 완전히 새로운 데이터로 대체할 때 사용됩니다.
+
+* 요청 본문에 새로운 데이터를 포함하여 서버로 전송합니다.
+* 자원이 존재하지 않으면 새로 생성될 수도 있습니다.
+
+## DELETE
+특정 자원을 삭제하기 위한 메서드입니다.
+더 이상 필요 없는 데이터를 삭제할 때 사용됩니다.
+
+## PATCH
+특정 자원을 부분적으로 업데이트하기 위한 메서드입니다.
+특정 필드만 변경하고 싶을 때 사용됩니다.
+
+* 요청 본문에 변경할 부분만 포함하여 서버로 전송합니다.
+
+## HEAD
+GET과 유사하지만, 응답 본문 없이 헤더 정보만 받아옵니다.
+
+## OPTIONS
+서버가 지원하는 HTTP 메서드를 확인합니다.
+
+## CONNECT
+HTTP를 통해 다른 프로토콜(예: HTTPS)을 사용하는 터널을 생성합니다.
+
+## TRACE
+요청 메시지를 그대로 서버로 보내고, 서버에서 받은 메시지를 그대로 클라이언트로 반환합니다.
diff --git a/doc/http/03_status_code.md b/doc/http/03_status_code.md
new file mode 100644
index 0000000..badc62a
--- /dev/null
+++ b/doc/http/03_status_code.md
@@ -0,0 +1,31 @@
+# 상태 코드
+
+HTTP 응답 코드는 웹 서버가 클라이언트의 요청에 대해 어떻게 처리했는지를 알려주는 3자리 숫자 코드입니다. 이 코드는 요청의 성공 여부, 오류 발생 시 원인 등 다양한 정보를 담고 있어 웹 개발 과정에서 매우 중요한 역할을 합니다.
+
+HTTP 응답 코드는 크게 다음과 같은 5가지 카테고리로 나눌 수 있습니다.
+
+* 1xx (정보): 요청이 받아졌으며 처리가 계속되고 있음을 나타냅니다.
+ - 100 Continue: 서버가 요청을 받았으며, 클라이언트가 요청 본문을 보내도 된다는 의미입니다.
+ - 101 Switching Protocols: 프로토콜을 변경해야 한다는 의미입니다. (예: HTTP에서 WebSocket으로 전환)
+* 2xx (성공): 요청이 성공적으로 처리되었음을 나타냅니다.
+ - 200 OK: 요청이 성공적으로 처리되었습니다.
+ - 201 Created: 새로운 자원이 생성되었습니다.
+ - 202 Accepted: 요청이 수락되었지만 아직 처리되지 않았습니다.
+ - 204 No Content: 요청은 성공했지만, 응답 본문에 내용이 없습니다.
+* 3xx (리다이렉션): 요청을 완료하기 위해 추가적인 조치가 필요함을 나타냅니다.
+ - 301 Moved Permanently: 요청한 자원이 영구적으로 다른 URL로 이동했습니다.
+ - 302 Found: 요청한 자원이 임시로 다른 URL로 이동했습니다.
+ - 304 Not Modified: 요청한 자원이 변경되지 않았습니다.
+ - 307 Temporary Redirect: 302와 유사하지만, HTTP 메서드를 유지합니다.
+* 4xx (클라이언트 오류): 클라이언트 측에서 오류가 발생했음을 나타냅니다.
+ - 400 Bad Request: 요청이 잘못되었습니다. (예: 잘못된 문법, 누락된 필드)
+ - 401 Unauthorized: 인증이 필요합니다.
+ - 403 Forbidden: 권한이 없습니다.
+ - 404 Not Found: 요청한 자원이 없습니다.
+ - 405 Method Not Allowed: 허용되지 않은 HTTP 메서드를 사용했습니다.
+* 5xx (서버 오류): 서버 측에서 오류가 발생했음을 나타냅니다.
+ - 500 Internal Server Error: 서버에서 예상치 못한 오류가 발생했습니다.
+ - 502 Bad Gateway: 게이트웨이 또는 프록시 서버에서 잘못된 응답을 받았습니다.
+ - 503 Service Unavailable: 서버가 일시적으로 오버로드되거나 유지보수 중입니다.
+ - 504 Gateway Timeout: 게이트웨이 또는 프록시 서버가 타임아웃되었습니다.
+
diff --git a/doc/http/04_http_header.md b/doc/http/04_http_header.md
new file mode 100644
index 0000000..63f4111
--- /dev/null
+++ b/doc/http/04_http_header.md
@@ -0,0 +1,38 @@
+# HTTP 헤더
+
+HTTP 헤더는 클라이언트(보통 웹 브라우저)와 서버 간의 통신에서 추가적인 정보를 주고받기 위해 사용되는 메타데이터입니다. HTTP 요청과 응답 메시지에 포함되어 있으며, 요청이나 응답의 내용, 전송되는 데이터의 형식, 캐싱 정보 등 다양한 정보를 담고 있습니다.
+
+## HTTP 헤더의 역할
+* 요청 헤더: 클라이언트가 서버에 요청할 때, 어떤 종류의 데이터를 원하는지, 어떤 브라우저를 사용하는지 등의 정보를 전달합니다.
+* 응답 헤더: 서버가 클라이언트에게 응답할 때, 응답 데이터의 종류, 콘텐츠 길이, 캐싱 관련 정보 등을 전달합니다.
+
+## HTTP 헤더의 종류
+HTTP 헤더는 크게 다음과 같은 종류로 나눌 수 있습니다.
+
+* General Header: 요청과 응답 모두에 사용되며, 메시지 자체에 대한 일반적인 정보를 포함합니다.
+ - Date: 메시지가 생성된 시간을 나타냅니다.
+ - Cache-Control: 캐싱 관련 지시를 포함합니다. (예: no-cache, max-age)
+* Request Header: 요청 메시지에만 사용되며, 클라이언트에 대한 정보나 요청하는 리소스에 대한 정보를 포함합니다.
+ - User-Agent: 클라이언트(브라우저)의 종류와 버전 정보를 나타냅니다.
+ - Accept: 클라이언트가 수용할 수 있는 콘텐츠 형식(MIME type)을 나타냅니다.
+ - Accept-Language: 클라이언트가 선호하는 언어를 나타냅니다.
+ - Accept-Encoding: 클라이언트가 지원하는 인코딩 방식을 나타냅니다.
+ - Authorization: 인증 정보를 포함합니다.
+ - Cookie: 서버가 클라이언트의 브라우저에 저장한 쿠키 정보를 포함합니다.
+ - Referer: 현재 요청된 페이지의 이전 페이지 URL을 나타냅니다.
+* Response Header: 응답 메시지에만 사용되며, 서버에 대한 정보나 응답 데이터에 대한 정보를 포함합니다.
+ - Content-Type: 응답 데이터의 형식(MIME type)을 나타냅니다.
+ - Content-Length: 응답 데이터의 크기를 바이트 단위로 나타냅니다.
+ - Last-Modified: 자원이 마지막으로 수정된 시간을 나타냅니다.
+ - ETag: 자원의 버전을 나타내는 문자열입니다.
+ Location: 리소스가 다른 URL로 이동했을 때 새로운 URL을 나타냅니다.
+ - Set-Cookie: 클라이언트의 브라우저에 새로운 쿠키를 설정합니다.
+* Entity Header: 메시지 본문(entity-body)에 대한 정보를 포함합니다.
+ - Content-Encoding: 응답 데이터가 압축된 방식을 나타냅니다.
+ - Content-Language: 응답 데이터의 언어를 나타냅니다.
+
+## HTTP 헤더의 활용
+* 캐싱: Last-Modified, ETag 헤더를 이용하여 브라우저에서 자원을 캐싱하고, 불필요한 데이터 전송을 줄일 수 있습니다.
+* 인증: Authorization 헤더를 이용하여 사용자를 인증하고, 권한을 부여할 수 있습니다.
+* 콘텐츠 협상: Accept 헤더를 이용하여 클라이언트가 선호하는 콘텐츠 형식을 선택할 수 있습니다.
+* 웹 크롤링: User-Agent 헤더를 변경하여 다른 브라우저처럼 행동할 수 있습니다.
diff --git a/doc/http/05_cookie_session.md b/doc/http/05_cookie_session.md
new file mode 100644
index 0000000..985be0b
--- /dev/null
+++ b/doc/http/05_cookie_session.md
@@ -0,0 +1,46 @@
+# 쿠키와 세션
+
+웹 서핑을 하다 보면 자주 접하게 되는 용어인 쿠키와 세션은 웹 애플리케이션에서 사용자 상태를 관리하는 데 필수적인 요소입니다. 둘 다 사용자 정보를 저장하고, 이를 바탕으로 맞춤형 서비스를 제공하는 데 사용되지만, 저장 위치와 용도에 따라 차이점이 있습니다.
+
+## 쿠키 (Cookie)
+웹 서버가 클라이언트(웹 브라우저)에 보내는 작은 크기의 데이터 파일입니다. 클라이언트는 이 파일을 로컬 디스크에 저장하고, 이후 같은 서버에 요청을 보낼 때마다 함께 전송합니다.
+
+### 특징
+* 저장 위치: 클라이언트 측 (브라우저)
+* 용도
+ - 사용자 식별 (로그인 상태 유지)
+ - 사용자 설정 저장 (테마, 언어 설정)
+ - 사이트 방문 기록 추적
+ - 장바구니 정보 저장
+* 종류
+ - 세션 쿠키: 브라우저를 닫으면 자동으로 삭제됩니다.
+ - 영구 쿠키: 만료 날짜가 설정되어 해당 날짜까지 유효합니다.
+
+### 장점
+* 서버 부담 감소: 서버에 사용자 정보를 저장하지 않아 서버 자원을 절약할 수 있습니다.
+
+### 단점
+* 보안 취약성: 클라이언트 측에 저장되므로, 해킹이나 악성 코드에 노출될 위험이 있습니다.
+* 용량 제한: 저장할 수 있는 데이터의 크기가 제한적입니다.
+* 사용자의 프라이버시 침해 가능성: 사용자의 행동을 추적하는 데 악용될 수 있습니다.
+
+## 세션 (Session)
+사용자와 서버 간의 연결 상태를 유지하기 위한 일련의 상호 작용을 의미합니다.
+
+### 특징
+* 저장 위치: 서버 측
+* 용도
+ - 사용자 세션 관리 (로그인 상태 유지, 장바구니 정보 관리)
+ - 사용자 활동 기록
+* 작동 방식
+ - 서버는 각 사용자에게 고유한 세션 ID를 부여하고, 이를 쿠키를 통해 클라이언트에 전달합니다.
+ - 클라이언트는 이후 요청 시 세션 ID를 함께 보내고, 서버는 해당 ID를 통해 사용자 정보를 조회합니다.
+
+### 장점
+* 보안성 향상: 서버 측에 저장되므로 쿠키보다 보안성이 높습니다.
+* 대용량 데이터 저장 가능: 쿠키보다 더 많은 양의 데이터를 저장할 수 있습니다.
+
+### 단점
+* 서버 부담 증가: 서버에 사용자 정보를 저장해야 하므로 서버 자원을 소모합니다.
+* 세션 만료 문제: 세션 유효 시간이 지나면 사용자 정보가 사라질 수 있습니다.
+
diff --git a/doc/http/06_restful.md b/doc/http/06_restful.md
new file mode 100644
index 0000000..8417d8c
--- /dev/null
+++ b/doc/http/06_restful.md
@@ -0,0 +1,40 @@
+# RESTful
+
+RESTful API는 웹 서비스를 설계하는 데 사용되는 아키텍처 스타일 중 하나입니다. Representational State Transfer의 약자로, HTTP 프로토콜을 기반으로 자원(resource)을 표현하고, 이 자원에 대한 CRUD(Create, Read, Update, Delete) 작업을 수행하는 방식을 의미합니다.
+
+## 특징
+* 자원 중심: 각각의 데이터는 자원(resource)으로 취급되며, URI(Uniform Resource Identifier)를 통해 고유하게 식별됩니다.
+* HTTP 메서드 활용:
+ - GET: 자원 조회
+ - POST: 새로운 자원 생성
+ - PUT: 기존 자원 전체 업데이트
+ - DELETE: 자원 삭제
+ - PATCH: 자원 부분 업데이트
+* Stateless: 각 요청은 독립적이며, 서버는 이전 요청에 대한 정보를 저장하지 않습니다.
+* Client-Server: 클라이언트와 서버는 분리되어 있으며, 각자의 역할을 수행합니다.
+* Cacheable: 응답을 캐싱하여 시스템 성능을 향상시킬 수 있습니다.
+* Uniform Interface: 일관된 인터페이스를 제공하여 다양한 클라이언트에서 쉽게 사용할 수 있습니다.
+
+## 장점
+* 단순성: HTTP 프로토콜을 기반으로 하므로 이해하기 쉽고 구현하기 간편합니다.
+* 확장성: 새로운 자원을 추가하거나 기존 자원을 수정하는 것이 용이합니다.
+* 다양한 플랫폼 지원: HTTP 프로토콜을 지원하는 모든 플랫폼에서 사용 가능합니다.
+* 캐싱: 응답을 캐싱하여 시스템 성능을 향상시킬 수 있습니다.
+* RESTful API는 JSON 또는 XML 형식의 데이터를 주고받는 방식으로, 다양한 프로그래밍 언어와 플랫폼에서 쉽게 사용할 수 있습니다.
+
+## 설계 시 고려 사항
+* URI 설계: 자원을 명확하게 표현하고, 계층적인 구조를 유지합니다.
+ - URI의 마지막에는 '/'를포함하지 않습니다.
+ - 언더바(\_)는 사용하지 않습니다. 대신 하이픈(-)을 사용합니다.
+ - URI에는 행위(동사)가 아닌 결과(명사)를 포함합니다. 행위는 HTTP 메서드로 표현할 수 있어야 합니다.
+ - URI는 소문자로 작성해야 합니다.
+ - 파일의 확장자는 URI에 포함하지 않습니다. 대신 HTTP의 Accept 헤더를 사용하는 것이 좋습니다.
+* HTTP 메서드 활용: 각 메서드의 의미를 정확하게 이해하고 적절하게 사용합니다.
+* 응답 코드: HTTP 상태 코드를 활용하여 요청 결과를 명확하게 전달합니다.
+* 에러 처리: 예외 상황 발생 시 적절한 에러 메시지를 반환합니다.
+* 버전 관리: API 변경 시 버전을 관리하여 호환성 문제를 해결합니다.
+
+## RESTful API를 사용하는 이유
+* 다양한 클라이언트 지원: 웹 브라우저, 모바일 앱, IoT 장치 등 다양한 클라이언트에서 사용 가능합니다.
+* 데이터 공유: 서로 다른 시스템 간에 데이터를 쉽게 공유할 수 있습니다.
+* 마이크로서비스 아키텍처: 각 서비스를 RESTful API로 구현하여 시스템을 분산하고 확장성을 높일 수 있습니다.
diff --git a/html-examples.iml b/html-examples.iml
deleted file mode 100644
index 9a5cfce..0000000
--- a/html-examples.iml
+++ /dev/null
@@ -1,8 +0,0 @@
-
-
-
-
-
\ No newline at end of file
diff --git a/src/boiler-plate.html b/src/boiler-plate.html
new file mode 100644
index 0000000..200814b
--- /dev/null
+++ b/src/boiler-plate.html
@@ -0,0 +1,12 @@
+
+
+
+
-
- 
-
```를 갖습니다.
-
-```html
-