2025-01-24T01:44:03

2025-01-24 01:44:03 +09:00
parent 297ea8abaf
commit 3d30ee3192
68 changed files with 1128 additions and 1079 deletions
--- a/doc/Boiler-Plate.md
+++ b/doc/Boiler-Plate.md
@@ -0,0 +1,132 @@
+# HTML 5
+
+## HTML 5 Boiler Plate
+
+```html
+<!doctype html>
+<html lang="ko">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta name="description" content="">
+        <title></title>
+    </head>
+    <body>
+
+    </body>
+</html>
+```
+
+
+## HTML 기본 {id="basic_structure"}
+
+HTML 파일의 확장자는 *.html* 또는 *.htm*을 사용합니다.
+
+### 요소 (Element)
+
+HTML 문서는 여러 개의 HTML 요소로 이루어집니다.
+
+```html
+<p class = "attr">
+    This is a text content.
+</p>
+```
+
+요소는 **여는 태그**(opening tag, ```<p>```)로 시작하고, **닫는 태그**(closing tag, ```</p>```)로 끝납니다. 태그는 용도에 따라 여러 개의 키워드가 정의되어 있습니다. 여는 태그와 닫는 태그 사이에는 텍스트 내용이나 다른 요소들이 올 수 있으며, 여는 태그에는 **속성**(attribute)을 ```name = "value"``` 형식으로 지정할 수 있습니다.
+
+HTML에서 태그의 이름과 속성의 이름은 대소문자를 구분하지 않습니다. 즉, ```<p>```와 ```<P>```는 같습니다. 하지만, 가급적 소문자를 사용하는 것이 좋습니다.
+
+일반적으로, 여는 태그와 닫는 태그가 쌍을 이루지만, 몇몇 태그는 닫는 태그를 필요로 하지 않습니다. 이를 **빈 요소**(empty element)라고 부릅니다. 빈 요소는 여는 태그와 닫는 태그 사이에 다른 요소나 텍스트를 지정할 수 없습니다. 예를 들면, ```<br>```, ```<img>```, ```<input>```, ```<link>```, ```<meta>```, ```<hr>``` 등이 있습니다.
+
+```html
+<p>This paragraph contains <br> a line break.</p>
+```
+
+HTML에서는 ```<br>```과 같이 사용하지만, XHTML에서는 ```<br />```처럼 끝에 '/'를 추가합니다.
+
+#### 블록 레벨 vs 인라인 레벨
+
+**블록 레벨**(block level) 요소는 가능한 한 최대 너비를 차지하며 시작과 끝에 줄 바꿈이 적용됩니다. ```<div>```, ```<p>```, ```<h1>``` ~ ```<h6>```, ```<form>```, ```<ol>```, ```<ul>```, ```<li>``` 등이 블록 레벨 요소입니다.
+
+반면, **인라인 레벨**(inline level) 요소는 다른 요소의 안에 사용되며 줄 바꿈이 적용되지 않습니다. ```<img>```, ```<a>```, ```<span>```, ```<strong>```, ```<b>```, ```<em>```, ```<i>```, ```<code>```, ```<input>```, ```<button>``` 등이 대표적인 인라인 레벨 요소입니다.
+
+인라인 레벨 요소의 안에 블록 레벨 요소를 지정해서는 안됩니다.
+
+### 속성 (Attribute)
+
+요소에 부가적인 속성을 지정할 때 ```name="value"``` 형식으로 사용합니다. 속성의 값은 따옴표로 둘러 싸는데, 이중 따옴표(") 또는 단일 따옴표(')를 모두 사용할 수 있지만, 일반적으로 "를 많이 사용합니다.
+
+부울(bool) 값을 갖는 속성들은 속성 값 없이 속성의 이름만 지정합니다.
+
+```html
+<input type="checkbox" checked> 
+```
+
+어떤 요소들은 반드시 지정해야 하는 속성이 있습니다. 예를 들면, ```<a>```에는 _src_와 _alt_를, ```<img>```에는 _href_를 반드시 지정해야 합니다.
+
+#### 일반적인 속성
+
+```html
+<p id="paragraph-1" class="paragraph center" title="Sample Text" style="border: 0;">
+    This is a paragraph.
+</p>
+```
+
+- id
+
+  요소에 고유한 이름을 지정합니다. 한 문서 내에서 두 개 이상의 요소가 동일한 id 값을 가질 수 없습니다.
+
+- class
+
+  요소가 특정 집단에 속한 것을 의미합니다. 스타일을 정의하여 동시에 여러 개의 비슷하거나 관련된 요소를 제어할 수 있습니다. 여러 요소들이 동일한 클래스 이름을 사용할 수 있으며, 한 개의 요소가 두 개 이상의 클래스에 속할 수도 있습니다. 이때, 속성값은 공백으로 구분된 클래스 이름들의 리스트로 나타냅니다.
+
+- title
+
+  요소에 타이틀을 부여합니다. 일부 브라우저에서는 마우스를 요소 위에 올려놓을 경우 요소의 타이틀을 "툴팁"으로 보여줍니다.
+
+- style
+
+  특정 경우에 사용할 수 있도록 저자가 인라인 스타일을 정의할때 사용됩니다. 이런 경우 클래 스 스타일 정의보다 우선하여 요소에 적용됩니다. 문서의 구조와 표현의 분리라는 측면에서 가급적 자제하는 것이 좋습니다.
+
+
+### 주석 (Comment)
+
+`\<!--`로 시작하고 `\-->`로 끝나는 부분은 주석입니다.
+
+```html
+<!-- 
+    This is a comment.
+-->
+```
+
+## HTML 페이지 구조
+
+```html
+<!DOCTYPE html>
+<html lang="ko">
+    <head>
+        <title>Hello, World</title>
+    </head>
+    <body>
+        Hello, World.
+    </body>
+</html>
+```
+
+### DOCTYPE
+
+HTML 문서가 HTML 5 버전으로 작성되었음을 웹 브라우저에게 알려주는 역할을 합니다. 반드시 모든 HTML 문서의 맨 앞에 있어야 하지만, ```<!DOCTYPE>```은 HTML 문서의 구성 요소는 아닙니다.
+
+HTML 5에서는 다음과 같이 간단히 지정합니다. 대소문자를 구분하지는 않습니다.
+
+```html
+<!DOCTYPE html>
+```
+
+### 문서 헤드 \<head>
+
+헤드에는 HTML 문서에 대한 정보를 기술합니다. ```<title>```을 반드시 포함해야 합니다.
+
+### 문서 바디 \<body>
+
+바디에는 웹 브라우저에 표시되는 실제 내용을 기술합니다.
--- a/doc/etc/Atom.md
+++ b/doc/etc/Atom.md
@@ -0,0 +1,59 @@
+# Atom
+
+```xml
+<?xml version="1.0" encoding="utf-8"?>
+<feed xmlns="http://www.w3.org/2005/Atom">
+  <title>Example Feed</title>
+  <link href="http://example.org/"/>
+  <updated>2003-12-13T18:30:02Z</updated>
+  <author>
+    <name>John Doe</name>
+  </author>
+  <id>urn:uuid:60a76c80-d399-11d9-b93C-0003939e0af6</id>
+  <entry>
+    <title>Atom-Powered Robots Run Amok</title>
+    <link href="http://example.org/2003/12/13/atom03"/>
+    <id>urn:uuid:1225c695-cfb8-4ebb-aaaa-80da344efa6a</id>
+    <updated>2003-12-13T18:30:02Z</updated>
+    <summary>Some text.</summary>
+  </entry>
+</feed>
+```
+
+- feed
+    - id
+    - title
+    - updated
+    - author
+    - link
+    - category
+    - contributor
+        - name
+        - url
+        - email
+    - generator
+    - icon
+    - logo
+    - rights
+    - subtitle
+- entry
+    - id
+    - title
+    - updated
+    - author
+        - name
+        - url
+        - email
+    - content
+    - link
+    - summary
+    - category
+    - contributor
+        - name
+        - url
+        - email
+    - published
+    - rights
+    - source
+
+https://validator.w3.org/feed/docs/atom.html
--- a/doc/etc/Composing-Email.md
+++ b/doc/etc/Composing-Email.md
@@ -0,0 +1,335 @@
+# HTML Email Development Cheatsheet
+
+## Sources:
+
+- https://frontendmasters.com/courses/html-email-v2/background-images/
+- https://github.com/rodriguezcommaj/frontendmasters
+- https://codepen.io/collection/21b7ddd5c58aafc450c35c46e7cba9b5?grid_type=list
+
+## Table of Contents
+
+- [Basics](#basics)
+- - [Basic HTML Email](#basic-html-email)
+- - [CSS Resets](#css-resets)
+- - [Email friendly HTML](#email-friendly-html)
+- - [Email friendly CSS](#email-friendly-css)
+- [Links & Buttons](#links-&-buttons)
+- [Images](#images)
+- - [Responsive Images](#responsive-images)
+- - [Background Images](#background-images)
+- [Accessibility](#accessibility)
+- [Layouts](#layouts)
+- [Mobile Emails](#mobile-emails)
+- [Interactivity](#interactivity)
+
+## Basics
+
+- Marketing emails should have unsubscribe links
+- Use email testing tools like [email on acid](https://www.emailonacid.com/) or [litmus](https://www.litmus.com/extension/)
+- Use [Putsmail](https://putsmail.com) to enter html and it will send it out as an email
+- Use [Can I Email](https://caniemail.com) or [Campaign Monitor](https://campaignmonitor.com) or [Fresh Inbox](https://freshinbox.com) to see what's supported in which email clients. just like `caniuse.com`.
+- You can use tools to help you build emails like `Litmus builder`, `mjml.io`, `Inky` (from foundation.zurb), `Maizzle` to help you.
+- Support channels: `email.geeks.chat`, `litmus.com/community`, `thebetter.email`
+
+### Basic HTML Email
+
+The basic HTML for Emails looks pretty much like the basic HTML for a website
+
+```HTML
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>Document</title>
+  <style type="text/css">
+
+  </style>
+</head>
+<body id="body" style="margin: 0 !important; padding: 0 !important;">
+
+</body>
+</html>
+```
+
+- `lang` make sure to pass the proper lang for screen readers to know in which language tho read the text
+- `body style=` we want to reset the margins and paddings to make sure that the email client does not add something weird to our emails
+
+### CSS Resets
+
+- Email clients add CSS to parts of the email on their own. I.e. highlighting times, phones, dates etc (to add to the calendar or call)
+- We want to keep the behavior but improve it's styling
+
+```
+/* CLIENT-SPECIFIC STYLES */
+body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
+table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
+img { -ms-interpolation-mode: bicubic; }
+
+/* RESET STYLES */
+img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
+table { border-collapse: collapse !important; }
+body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }
+
+/* iOS BLUE LINKS */
+a[x-apple-data-detectors] {
+    color: inherit !important;
+    text-decoration: none !important;
+    font-size: inherit !important;
+    font-family: inherit !important;
+    font-weight: inherit !important;
+    line-height: inherit !important;
+}
+
+/* GMAIL BLUE LINKS */
+u + #body a {
+    color: inherit;
+    text-decoration: none;
+    font-size: inherit;
+    font-family: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+}
+
+/* SAMSUNG MAIL BLUE LINKS */
+#MessageViewBody a {
+    color: inherit;
+    text-decoration: none;
+    font-size: inherit;
+    font-family: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+}
+```
+
+Taken from [Rodrigues Commajs example](https://github.com/rodriguezcommaj/frontendmasters/blob/master/Code%20Examples/Background-Image.html)
+
+- Text size 100%: to make sure that they don't adjust the font-size settings (i.e. ios automatically bumps up small font-sizes to minimum 14px)
+- mso-table: makes sure that there is no spacing around tables
+- interpolation-mode: improves quality of imagery
+- style resets: make sure the doc. renders as intended
+- Link overrides: to make sure that the links that are automatically added by the email client don't get custom styling
+
+### Email friendly HTML
+
+- Use these for most things: `div`, `span`, `h1`-`h6`, `p`, `strong`, `em`, `img` (simple html tags)
+- Most structuring is done with `table`s
+- All URLs should be absolute URIs that also contain the protocol, not relative. So `https://google.com/image.jpg` instead of `/image.jpg` or `google.com/image.jpg`.
+- `<center></center>` is completely deprecated but can be used to centering parts in outlook.
+
+### Email friendly CSS
+
+- Don’t use Linked Stylesheets. A lot of email clients will remove those. Use embedded styles or even better inline styles.
+- For text: `color`, `font-family`, `font-size`, `font-style`, `font-weight`, `line-height`, `text-align`.
+- For block-level: `margin`, `padding`, `width`, `max-width` (might not always work), `border`.
+- Make sure to search online to see what CSS properties are supported in what email client.
+- Use pixel sizing `px` instead of relative units etc.
+- You can use shorthands. i,e, `margin: 40px 0;` or `margin: 0 auto` to center the content
+
+## Links & Buttons
+
+- Don't use images for buttons
+- Use descriptive links (not this "click here", use "read the article" for example)
+- Embrace link conventions (i.e. blue and underlined text for links)
+- Don't just rely on color. Don't underline things that are not links (might frustrate the user into thinking it's a link)
+
+### Bulletproof buttons
+
+- from https://buttons.cm/ (most reliable):
+
+  ```html
+  <div><!--[if mso]>
+  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="10%" strokecolor="#1e3650" fill="t">
+    <v:fill type="tile" src="https://i.imgur.com/0xPEf.gif" color="#556270" />
+    <w:anchorlock/>
+    <center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Show me the button!</center>
+  </v:roundrect>
+  <![endif]--><a href="http://"
+  style="background-color:#556270;background-image:url(https://i.imgur.com/0xPEf.gif);border:1px solid #1e3650;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;mso-hide:all;">Show me the button!</a></div>
+  ```
+
+- Padding based:
+
+  ```html
+  <table width="100%" border="0" cellspacing="0" cellpadding="0">
+    <tr>
+        <td align="center" style="padding: 60px;">
+            <table border="0" cellspacing="0" cellpadding="0">
+                <tr>
+                    <td brcolor="#229efd" style="padding: 12px 18px 12px 18px; border-radius: 3px" align="center">
+                        <a href="…" target="_blank" style="font-size: 18px; text-decoration: none; display: inline-block;">Button</a>
+                    </td>
+                </tr>
+            </table>
+        </td>
+    </tr>
+  </table>
+  ```
+
+- Border based
+
+  ```html
+  <table width="100%" border="0" cellspacing="0" cellpadding="0">
+    <tr>
+        <td align="center" style="padding: 60px;">
+            <table border="0" cellspacing="0" cellpadding="0">
+                <tr>
+                    <td>
+                        <a href="…" target="_blank" style="font-size: 18px; text-decoration: none; display: inline-block; color: #ffffff; background-color: #229efd; border-top: 12px solid #229efd; border-bottom: 12px solid #229efd; border-right: 18px solid #229efd;border-left: 18px solid #229efd;">Button</a>
+                    </td>
+                </tr>
+            </table>
+        </td>
+    </tr>
+  </table>
+  ```
+
+
+## Images
+
+- Make them responsive by default
+- Use alt text describing the image
+- Stick to standards: jpg, png, gif
+
+### Responsive Images
+
+- Set a fixed width for outlook `<img … width="600" border="0" … >`
+- `display: block; max-width: 100%; min-width: 100px; width: 100%;` to make them adjust across screen sizes
+
+i.e.
+
+```html
+<img width="600" border="0" style="display: block; max-width: 100%; min-width: 100px; width: 100%" src="img/image.jpg" alt="puppy licking ice-cream">
+```
+
+### Background Images
+
+- Most reliable on table cells (td)
+- Use both: HTML attributes and inline CSS
+
+i.e.
+
+```html
+<td background="image/bg.jpg" bgcolor="#229efd" style="background: #229efd url('image/bg.jpg')">
+```
+
+## Accessibility
+
+- Left align longer text (center align only short text/headings etc.)
+- Keep color contrast high
+- Create a strong visual hierarchy
+- Focus on readability
+- Keep layouts simple and usable
+- Use real text instead of images
+- Keep tables quiet using `role="presentation"`
+- Include text alternatives for images
+- Include the language of an email `lang="de"`
+
+### Testing
+
+- Close your eyes and use a real screen reader: NVDA, VoiceOver, JAWS, Browser Extensions (NoCoffeee Vision Simulator, silktide, toadly, lighthouse), Litmus accessibility checker.
+
+## Layouts
+
+- Think in modules
+- Use `role="presentation"` on any table
+- Don't use table headers, body, footer
+- Each component lives in their own rows/tables
+- Override defaults using HTML attributes
+- Most styles should be included in table tags
+
+Boilerplate:
+
+```html
+<!-- Outer Fluid Container Table -->
+<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+    <tr>
+        <td>
+            <!-- Inner Fixed Container Table -->
+            <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="600">
+                <!-- Each TR is it's own email "module", i.e. logo, headline, hero image, etc. -->
+                <tr>
+                    <td>
+                        <!-- logo -->
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <!-- headline -->
+                    </td>
+                </tr>
+            </table>
+
+        </td>
+    </tr>
+</table>
+```
+
+- Basic structure is: Fluid table => Fixed table => Fluid table => Fixed table
+
+## Mobile Emails
+
+- For emails it makes sense to design in desktop first because otherwise you'd get the mobile version on the desktop as the queries don't always work.
+- You can use media queries
+- Still work with tables but make those responsive
+
+i.e.
+
+```css
+@media screen and (max-width: 600px) {
+    .mobile { width: 100% !important }
+    .block { display: block !important; width: 100% !important; }
+}
+```
+
+And add them to the tables i.e. to make them stack.
+
+### Hybrid/Spongy Coding
+
+- Fluid by default
+
+- max-width
+
+- MSO ghost tables:
+
+  ```
+  <!--[if (gte mso 9)|(IE)]>
+  <table cellspacing="0" cellpadding="0" border="0" width="600" align="center" role="presentation"><tr><td>
+  <![endif]>
+  ```
+
+
+…content here…
+
+<!--[if (gte mso 9)|(IE)]>
+</td></tr></table>
+<![endif]>
+```
+- This will wrap the whole content in tables for Outlook
+- `gte` = greater than or equal, `gt` = greater than, `lte` = less than equal to, `lt` = less than.
+- `9` = Outlook 2000, `10` = 2002, …, `15` = Outlook 2013
+## Interactivity
+- `:hover` pseudo selector works (only when included in the header)
+- gifs
+- movableink (using images that are generated when requested via GET requests. i.e. countdown timer etc.)
+- “The checkbox hack” to create state (by using input labels to toggle checkboxes that changes display with sibling selectors to create interactivity):
+```html
+<input type="radio" class="slide-input" name="slides" id="slide1" checked>
+<input type="radio" class="slide-input" name="slides" id="slide2">
+<input type="radio" class="slide-input" name="slides" id="slide3">
+<label for="slide1" class="slide-label">Slide 1</label>
+<label for="slide2" class="slide-label">Slide 2</label>
+<label for="slide3" class="slide-label">Slide 3</label>
+<div class="slide-content" id="content1">Content 1</div>
+<div class="slide-content" id="content2">Content 2</div>
+<div class="slide-content" id="content3">Content 3</div>
+```
+```css
+.slide-input { display: 'none' }
+.slide-label { cursor: 'pointer' }
+.slide-input ~ .slide-content { display: 'none' }
+#slide1:checked ~ #content1 { display: 'block' }
+#slide2:checked ~ #content2 { display: 'block' }
+#slide3:checked ~ #content3 { display: 'block' }
+```
--- a/doc/etc/Json-Rpc.md
+++ b/doc/etc/Json-Rpc.md
@@ -0,0 +1,41 @@
+# JSON-RPC
+
+## 요청
+
+```json
+{
+    "jsonrpc": "2.0",
+    "method": "doSomething",
+    "params": {
+        ...
+    },
+    "id": ...
+}
+```
+
+## 응답
+
+```json
+{
+    "jsonrpc": "2.0",
+    "result" : {
+        ...
+    },
+    "id": xxx
+}
+```
+
+### 오류 응답
+
+```json
+{
+    "jsonrpc": "2.0",
+    "error" : {
+        "code": xx,
+        "message": "xxx"
+    },
+    "id": xxx
+}
+```
+
+https://www.jsonrpc.org/
--- a/doc/etc/Linkback.md
+++ b/doc/etc/Linkback.md
@@ -0,0 +1,3 @@
+# Linkback
+
+Start typing here...
--- a/doc/etc/Pingback.md
+++ b/doc/etc/Pingback.md
@@ -0,0 +1,114 @@
+# Pingback
+
+만일 CMS에 다음과 같은 글이 작성되었다고 가정해 봅시다.
+
+```html
+<article>
+    <p>
+        <a href="http://example.com/some-post">여기</a> 완전 좋아요.
+    </p>
+</article>
+```
+
+## 엔드포인트 찾기
+
+CMS 소프트웨어에서는 작성된 글에서 외부 링크들을 추출해서 각각의 링크마다 HTTP HEAD/GET으로 조회를 합니다. 그러면 다음과 유사한 응답을 받을 겁니다.
+
+```
+GET /some-post HTTP/1.1
+Host: example.com
+
+------
+HTTP/1.1 200 OK
+X-Pingback: http://example.com/pingback
+
+<html><head> ...
+<link href="http://example.com/pingback" rel="pingback" /> ...
+```
+
+HTTP 헤더 혹은 `link` 태그에서 웹 멘션 주소를 찾을 수 있습니다.
+
+## 서버 엔드포인트로 메시지 전송
+
+CMS에서는 대상 서버의 엔드 포인트로 XML-RPC 형식으로 메시지를 전송합니다. 메시지에는 `sourceURI`와 `targetURI`가 포함되어야 합니다.
+
+```
+POST /http://example.com/webmention HTTP/1.1
+Host: example.com
+Content-Type: text/xml
+
+<?xml version="1.0">
+<methodCall>
+    <methodName>doSomething</methodName>
+    <params>
+        <param>
+            <value><string>소스URI</string></value>
+        </param>
+        <param>
+            <value><string>타겟URI</string></value>
+        </param>
+    </params>
+</methodCall>
+
+------
+HTTP/1.1 200 OK
+```
+
+## XML-RPC 오류 코드
+
+- 0
+
+  일반적인 오류
+
+- 0x0010
+
+  소스 URI가 없음
+
+- 0x0011
+
+  소스 URI가 타겟 URI를 포함하고 있지 않음
+
+- 0x0020
+
+  타겟 URI가 없음
+
+- 0x0021
+
+  타겟 URI에 핑백을 사용할 수 없음
+
+- 0x0030
+
+  이미 핑백이 등록 되었음
+
+- 0x0031
+
+  접근 거부
+
+- 0x0032
+
+  서버와 통신할 수 없음
+
+
+## 한편, 메시지를 받은 서버에서는
+
+전달 받은 데이터를 작업 큐에 등록하고, 작업 진행 내역을 보여주는 포에지 주소를 포함하는 `201` 또는 `202`를 응답합니다.
+
+```
+HTTP/1.1 201 Created
+Location: http://aaronpk.example/webmention/DEhB9Jme
+```
+
+```
+HTTP/1.1 202 Accepted
+```
+
+검증에 실패한 경우에는 `400 Bad Request`를 응답합니다.
+
+## 검증
+
+- source와 target이 모두 유효한 Url인지 여부 확인
+- source와 target이 동일하면 거부
+
+https://en.wikipedia.org/wiki/Linkback
+
+http://www.hixie.ch/specs/pingback/pingback
--- a/doc/etc/Refback.md
+++ b/doc/etc/Refback.md
@@ -0,0 +1,3 @@
+# Refback
+
+https://en.wikipedia.org/wiki/Refback
--- a/doc/etc/Robots.md
+++ b/doc/etc/Robots.md
@@ -0,0 +1,5 @@
+# Robots.txt
+
+http://www.robotstxt.org/
+
+http://humanstxt.org/
--- a/doc/etc/Rss.md
+++ b/doc/etc/Rss.md
@@ -0,0 +1,56 @@
+# RSS
+
+```xml
+<rss version="2.0">
+    <channel>
+        <title></title>
+        <link></link>
+        <description></description>
+        <item>
+            <title></title>
+            <link></link>
+            <description></description>
+        </item>
+    </channel>
+</rss>
+```
+
+- channel
+    - title
+    - link
+    - description
+    - language
+    - copyright
+    - managingEditor
+    - webMaster
+    - pubDate
+    - lastBuildDate
+    - category
+    - generator
+    - docs
+    - cloud
+    - ttl
+    - image
+        - url
+        - title
+        - link
+    - textInput
+        - title
+        - description
+        - name
+        - link
+    - skipHours
+    - skipDays
+- item
+    - title
+    - link
+    - description
+    - author
+    - catogory
+    - comments
+    - enclosure
+    - guid
+    - pubDate
+    - source
+
+https://validator.w3.org/feed/docs/rss2.html
--- a/doc/etc/Seo.md
+++ b/doc/etc/Seo.md
@@ -0,0 +1,5 @@
+# SEO
+
+https://developers.google.com/search/docs/advanced/guidelines/get-started?hl=ko
+
+https://searchadvisor.naver.com/guide
--- a/doc/etc/Sitemap.md
+++ b/doc/etc/Sitemap.md
@@ -0,0 +1,37 @@
+# sitemap.xml
+
+```xml
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+   <url>
+      <loc>http://www.example.com/</loc>
+      <lastmod>2005-01-01</lastmod>
+      <changefreq>monthly</changefreq>
+      <priority>0.8</priority>
+   </url>
+</urlset> 
+```
+
+- urlset
+
+  필수.
+
+- url
+
+  필수.
+
+- loc
+
+  필수.
+
+- lastmod
+
+  ISO 8601
+
+- changefreq
+
+- priority
+
+    0. 0~ 1.0
+
+https://www.sitemaps.org/ko/protocol.html
--- a/doc/etc/Syndication.md
+++ b/doc/etc/Syndication.md
@@ -0,0 +1,3 @@
+# Syndication
+
+Start typing here...
--- a/doc/etc/Trackback.md
+++ b/doc/etc/Trackback.md
@@ -0,0 +1,49 @@
+# Trackback
+
+## 주소 찾기
+
+```html
+<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+         xmlns:dc="http://purl.org/dc/elements/1.1/"
+         xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/">
+    <rdf:Description
+                     rdf:about="http://www.foo.com/archive.html#foo"
+                     dc:identifier="http://www.foo.com/archive.html#foo"
+                     dc:title="Foo Bar"
+                     trackback:ping="http://www.foo.com/tb.cgi/5" />
+</rdf:RDF>
+```
+
+## 전송
+
+```
+POST /trackback HTTP/1.1
+Host: example.com
+Content-Type: application/x-www-form-urlencoded; charset-utf-8
+
+title=Foo+Bar&url=http://www.bar.com/&excerpt=My+Excerpt&blog_name=Foo
+```
+
+- title
+- excerpt
+- url
+- blog_name
+
+## 응답
+
+```xml
+<?xml version="1.0" encoding="utf-8"?>
+<response>
+    <error>0</error>
+</response>
+```
+
+### 오류 응답
+
+```xml
+<?xml version="1.0" encoding="utf-8"?>
+<response>
+    <error>1</error>
+    <message>The error message</message>
+</response>
+```
--- a/doc/etc/Url.md
+++ b/doc/etc/Url.md
@@ -0,0 +1,3 @@
+# Url
+
+Start typing here...
--- a/doc/etc/WebComponents.md
+++ b/doc/etc/WebComponents.md
@@ -0,0 +1,20 @@
+# 웹 컴포넌트
+
+
+## 프로젝트 셋업
+
+
+```bash
+mkdir my-project
+cd my-project
+yarn init
+mkdir src
+touch index.js
+```
+
+```bash
+yarn add webpack webpack-cli webpack-dev-server --dev
+yarn add @babel/core @babel/preset-env babel-loader --dev
+또는
+npx webpack-cli init
+```
--- a/doc/etc/Webmention.md
+++ b/doc/etc/Webmention.md
@@ -0,0 +1,70 @@
+# Webmention
+
+만일 CMS에 다음과 같은 글이 작성되었다고 가정해 봅시다.
+
+```html
+<article>
+    <p>
+        <a href="http://example.com/some-post">여기</a> 완전 좋아요.
+    </p>
+</article>
+```
+
+## 엔드포인트 찾기
+
+CMS 소프트웨어에서는 작성된 글에서 외부 링크들을 추출해서 각각의 링크마다 HTTP HEAD/GET으로 조회를 합니다. 그러면 다음과 유사한 응답을 받을 겁니다.
+
+```
+GET /some-post HTTP/1.1
+Host: example.com
+
+------
+HTTP/1.1 200 OK
+Link: <http://example.com/webmention>; rel="webmention"
+
+<html><head> ...
+<link href="http://example.com/webmention" rel="webmention" /> ...
+```
+
+HTTP 헤더 혹은 `link` 태그에서 웹 멘션 주소를 찾을 수 있습니다.
+
+## 서버 엔드포인트로 메시지 전송
+
+CMS에서는 대상 서버의 엔드 포인트로 `application/x-www-form-urlencoded` 형식의 POST 메시지를 전송합니다. 메시지에는 `source`와 `target`이 포함되어야 합니다.
+
+```
+POST /http://example.com/webmention HTTP/1.1
+Host: example.com
+Content-Type: application/x-www-form-urlencoded
+
+source=https://client.example.com/new-post&target=http://example.com/some-post
+
+------
+HTTP/1.1 202 Accepted
+```
+
+메시지를 받은 서버는 `201 Created` 혹은 `202 Accepted`를 응답합니다.
+
+## 한편, 메시지를 받은 서버에서는
+
+전달 받은 데이터를 작업 큐에 등록하고, 작업 진행 내역을 보여주는 포에지 주소를 포함하는 `201` 또는 `202`를 응답합니다.
+
+```
+HTTP/1.1 201 Created
+Location: http://aaronpk.example/webmention/DEhB9Jme
+```
+
+```
+HTTP/1.1 202 Accepted
+```
+
+검증에 실패한 경우에는 `400 Bad Request`를 응답합니다.
+
+## 검증
+
+- source와 target이 모두 유효한 Url인지 여부 확인
+- source와 target이 동일하면 거부
+
+https://en.wikipedia.org/wiki/Linkback
+
+https://www.w3.org/TR/webmention/
--- a/doc/etc/XML-Rpc.md
+++ b/doc/etc/XML-Rpc.md
@@ -0,0 +1,139 @@
+# XML-RPC
+
+**XML-RPC**는 HTTP POST를 통해서 XML 메시지를 주고 받습니다.
+
+## 요청
+
+```
+POST /xml-rpc HTTP/1.0
+Host: example.com
+Content-Type: text/xml
+
+<?xml version="1.0">
+<methodCall>
+    <methodName>doSomething</methodName>
+    <params>
+        <param>
+            <value><integer>100</integer></value>
+        </param>
+    </params>
+</methodCall>
+```
+
+## 응답
+
+서버 오류 등이 아닌 경우에는 `200OK`를 응답해야 합니다.
+
+```
+HTTP/1.1 200 OK
+Content-Type: text/xml
+
+<?xml version="1.0">
+<methodResponse>
+    <params>
+        <param><string>Hello</string></param>
+    </params>
+</methodResponse>
+```
+
+### 오류 응답
+
+```
+HTTP/1.1 200 OK
+Content-Type: text/xml
+
+<?xml version="1.0">
+<methodResponse>
+    <fault>
+        <value>
+            <struct>
+                <member>
+                    <name>faultCode</name>
+                    <value><int>4</int></value>
+                </member>
+                <member>
+                    <name>faultString</name>
+                    <value><string>Too many parameters.</string></value>
+                </member>
+            </struct>
+        </value>
+    </fault>
+</methodResponse>
+```
+
+## 자료형
+
+자료형이 생략된 경우에는 `string`으로 간주합니다.
+
+- array
+
+  ```xml
+  <array>
+      <data>
+          <value><int>100</int></value>
+          <value><int>101</int></value>
+          <value><int>102</int></value>
+      </data>
+  </array>
+  ```
+
+- base64
+
+  ```xml
+  <base64>aW9...cyE=</base64>
+  ```
+
+- boolean
+
+  ```xml
+  <boolean>1</boolean>
+  ```
+
+- dateTime.iso8601
+
+  ```xml
+  <dateTime.iso8601>2021-01-01T00:12:00</dateTime.iso8601>
+  ```
+
+- double
+
+  ```xml
+  <double>100.0</double>
+  ```
+
+- integer
+
+  ```xml
+  <int>100</int>
+  <i4>100</i4>
+  ```
+
+- string
+
+  ```xml
+  <string>Hello</string>
+  ```
+
+- struct
+
+  ```xml
+  <struct>
+      <member>
+          <name>foo</name>
+          <value><int>100</int></value>
+      </member>
+      <member>
+          <name>bar</name>
+          <value><string>Hello</string></value>
+      </member>
+  </struct>
+  ```
+
+- nil
+
+  ```xml
+  <nil />
+  ```
+
+
+http://xmlrpc.com/
--- a/doc/html5/00_HTML5.md
+++ b/doc/html5/00_HTML5.md
@@ -0,0 +1,51 @@
+# HTML 5
+HTML 태그는 웹 페이지의 구조와 내용을 정의하는 데 사용되는 기본 요소입니다. 다양한 기능을 가진 태그들이 있으며, 이들을 기능별로 분류하면 다음과 같이 나눌 수 있습니다.
+
+## 1. 문서 구조 태그
+* `<html>`: HTML 문서 전체를 감싸는 최상위 태그로, HTML 문서의 시작과 끝을 나타냅니다.
+* `<head>`: 문서의 메타데이터를 포함하는 부분입니다. 문서의 제목, 스타일 시트, 스크립트 등을 연결하는 곳입니다.
+* `<body>`: 실제로 보이는 웹 페이지의 내용이 들어가는 부분입니다.
+* `<title>`: 브라우저 탭에 표시되는 문서의 제목입니다.
+* `<meta>`: 문서에 대한 추가적인 정보를 제공하는 태그입니다.
+
+## 2. 텍스트 콘텐츠 태그
+* `<h1>` ~ `<h6>`: 제목을 나타내는 태그입니다. `<h1>`이 가장 큰 제목이고 `<h6>`이 가장 작은 제목입니다.
+* `<p>`: 단락을 나타냅니다.
+* `<span>`: 텍스트의 일부분을 묶어서 스타일을 적용하거나 스크립트를 연결할 때 사용합니다.
+* `<strong>`: 텍스트를 강조할 때 사용합니다.
+* `<em>`: 텍스트를 기울여 표시할 때 사용합니다.
+
+## 3. 목록 태그
+* `<ul>`: 불러온 목록(unordered list)을 나타냅니다.
+* `<ol>`: 순서가 있는 목록(ordered list)을 나타냅니다.
+* `<li>`: 목록의 각 항목을 나타냅니다.
+
+## 4. 링크 태그
+* `<a>`: 하이퍼링크를 생성하여 다른 페이지나 웹사이트로 이동할 수 있도록 합니다.
+
+## 5. 멀티미디어 태그
+* `<img>`: 이미지를 웹 페이지에 삽입합니다.
+* `<figure>`: 이미지, 차트, 짧은 비디오 클립 등의 콘텐츠와 캡션을 함께 묶어서 나타냅니다.
+* `<figcaption>`: `<figure>` 요소의 캡션을 나타냅니다.
+
+## 6. 테이블 태그
+* `<table>`: 테이블을 생성합니다.
+* `<tr>`: 테이블의 행을 나타냅니다.
+* `<td>`: 테이블의 셀을 나타냅니다.
+
+## 7. 폼 태그
+* `<form>`: 사용자 입력을 받는 폼을 생성합니다.
+* `<input>`: 다양한 종류의 입력 필드를 생성합니다 (텍스트, 비밀번호, 라디오 버튼, 체크박스 등).
+* `<button>`: 버튼을 생성합니다.
+
+## 8. 섹션 태그
+* `<div>`: 콘텐츠를 논리적으로 구분하는 섹션을 생성합니다.
+* `<main>`: 문서의 주요 내용을 담는 부분을 나타냅니다.
+* `<header>`: 섹션의 헤더 부분을 나타냅니다.
+* `<nav>`: 네비게이션 링크를 모아놓은 섹션을 나타냅니다.
+* `<section>`: 문서의 독립적인 섹션을 나타냅니다.
+* `<article>`: 독립적인 콘텐츠 블록을 나타냅니다.
+* `<aside>`: 본문과 관련된 부가적인 정보를 담는 사이드바를 나타냅니다.
+* `<footer>`: 섹션의 푸터 부분을 나타냅니다.
+
+
--- a/doc/html5/01_문서_구조.md
+++ b/doc/html5/01_문서_구조.md
@@ -0,0 +1,144 @@
+# 문서 구조
+HTML 문서의 기본적인 뼈대를 이루는 문서 구조 태그에 대해 자세히 알아보겠습니다. 이 태그들은 웹 페이지의 내용을 논리적으로 구분하고, 브라우저에게 문서의 구조를 알려주는 중요한 역할을 합니다.
+
+```html
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <title>HTML 문서 구조 예시</title>
+</head>
+<body>
+  <h1>제목입니다</h1>
+  <p>이것은 단락입니다.</p>
+</body>
+</html>
+```
+
+* `<!DOCTYPE html>`: HTML 문서의 유형을 선언하는 부분으로, 항상 문서의 맨 처음에 위치해야 합니다.
+
+
+## html
+HTML 문서 전체를 감싸는 최상위 태그입니다. 문서가 HTML 문서임을 선언하는 역할을 합니다.
+```html
+<html>
+</html>
+```
+* lang 속성: `<html>` 태그에 lang 속성을 추가하여 문서의 언어를 지정할 수 있습니다. (예: lang="ko")
+
+## head
+문서의 메타데이터를 포함하는 부분입니다. 문서의 제목, 스타일 시트 연결, 스크립트 연결 등이 이곳에 들어갑니다. 실제로 보이는 부분은 아니지만, 검색 엔진이나 브라우저에게 중요한 정보를 제공합니다.
+```html
+<head>
+  <title>HTML 문서 예시</title>
+  <meta charset="UTF-8">
+</head>
+```
+
+## title
+`<head>` 태그 안에 위치하며, 브라우저의 탭이나 검색 결과에 표시되는 문서의 제목을 설정합니다.
+
+## meta
+문서에 대한 추가적인 정보를 제공하는 태그입니다. 문서의 인코딩, 설명, 키워드 등을 설정할 수 있습니다.
+```html
+<meta charset="UTF-8"> <meta name="description" content="이 문서는 HTML 문서 구조에 대한 설명입니다.">
+```
+* charset: 문서의 문자 인코딩을 지정합니다. (예: UTF-8)
+* name: 추가적인 정보를 제공하기 위한 이름을 지정합니다.
+* content: name 속성에 해당하는 정보의 내용을 지정합니다.
+    - http-equiv: HTTP 헤더와 동일한 의미를 가지는 메타 태그를 정의합니다.
+    - X-UA-Compatible: IE 호환 모드 설정
+* refresh: 페이지 자동 새로 고침
+* expires: 캐시 유효 기간 설정
+* viewport: 모바일 기기에서 웹 페이지가 표시되는 방식을 제어합니다.
+    - width: viewport의 너비를 설정
+    - initial-scale: 초기 확대 비율 설정
+    - user-scalable: 사용자가 페이지를 확대/축소할 수 있는지 여부 설정
+* robots: 검색 엔진 크롤러에게 웹 페이지를 어떻게 처리할지 지시합니다. (index, noindex, follow, nofollow 등)
+* author: 문서의 저자를 지정합니다.
+* copyright: 저작권 정보를 지정합니다.
+* date: 문서의 생성 또는 수정 날짜를 지정합니다.
+
+```html
+<!-- 검색 엔진 최적화 (SEO) -->
+<meta name="description" content="웹 페이지에 대한 간략한 설명">
+<meta name="keywords" content="웹 페이지와 관련된 키워드">
+<!-- 소셜 미디어 공유 -->
+<meta property="og:title" content="페이스북 공유 시 표시되는 제목">
+<meta property="og:description" content="페이스북 공유 시 표시되는 설명">
+<meta property="og:image" content="페이스북 공유 시 표시되는 이미지 URL">
+<!-- 모바일 웹 -->
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<!-- 호환성 -->
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+```
+
+## base
+`<base>` 태그는 HTML 문서 내에서 모든 상대적인 URL의 기본 경로를 설정하는 데 사용됩니다. 즉, `<base>` 태그를 이용하면 문서 내의 모든 링크가 지정된 기본 경로를 기준으로 해석됩니다.
+HTML 문서 내에 `<base>` 태그는 한 번만 사용해야 하며, 반드시 `<head> `태그 안에 위치해야 합니다.
+```html
+<base href="https://example.com/images/" />
+```
+* href 속성: 기본 경로를 지정하는 필수 속성입니다. 절대 URL 또는 상대 URL을 사용할 수 있습니다.
+
+## link
+`<link>` 태그는 HTML 문서 내에서 현재 문서와 외부 리소스 간의 관계를 정의하는 데 사용됩니다. 즉, 외부 스타일 시트, 아이콘, RSS 피드 등 다양한 종류의 외부 파일을 연결하는 역할을 합니다.
+```html
+<!-- CSS 파일 연결 -->
+<link rel="stylesheet" href="styles.css">
+<!-- favicon 연결 -->
+<link rel="icon" href="favicon.ico">
+<!-- RSS 피드 연결 -->
+<link rel="alternate" type="application/rss+xml" title="RSS 피드" href="feed.xml">
+```
+* rel 속성: 링크의 관계를 나타내는 필수 속성입니다. (예: stylesheet, icon, alternate 등)
+* href 속성: 연결할 리소스의 URL을 지정하는 필수 속성입니다.
+* type: 리소스의 MIME 타입을 지정합니다.
+* media: 특정 미디어에만 적용할 스타일 시트를 지정합니다.
+* sizes: 아이콘의 크기를 지정합니다.
+
+## body
+실제로 웹 페이지에 보이는 모든 내용이 들어가는 부분입니다. 텍스트, 이미지, 링크 등 웹 페이지의 모든 콘텐츠는 `<body>` 태그 안에 위치합니다.
+```html
+<body>
+  <h1>제목입니다</h1>
+  <p>이것은 단락입니다.</p>
+</body>
+```
+
+## style
+HTML 문서의 스타일을 정의하는 데 사용되는 태그입니다. CSS(Cascading Style Sheets)를 직접 작성하여 웹 페이지의 디자인을 제어할 수 있습니다.
+```html
+<style>
+  /* CSS 스타일 정의 */
+  body {
+    background-color: lightblue;
+  }
+  h1 {
+    color: navy;
+  }
+</style>
+```
+`<head>` 태그 안에 위치하는 것이 일반적입니다.
+`<body>` 태그 안에 위치할 수도 있지만, `<head>` 태그 안에 위치하는 것이 권장됩니다.
+
+## script
+JavaScript 코드를 포함하여 웹 페이지에 동적인 기능을 추가하는 데 사용되는 태그입니다. 클릭 이벤트, 페이지 로딩 시 실행되는 기능 등 다양한 동작을 구현할 수 있습니다.
+```html
+<script>
+  // JavaScript 코드
+  alert("Hello, world!");
+</script>
+```
+`<head>` 태그 안 또는 `<body>` 태그 안에 위치할 수 있습니다.
+`<head>` 태그 안에 위치하면 페이지 로딩 시 스크립트가 실행되고, `<body>` 태그 안에 위치하면 페이지의 다른 콘텐츠가 모두 로드된 후에 스크립트가 실행됩니다.
+
+
+## noscript
+자바스크립트를 지원하지 않는 브라우저나 자바스크립트가 비활성화된 경우에 표시될 콘텐츠를 정의하는 태그입니다.
+```html
+<noscript>
+  자바스크립트가 지원되지 않습니다.
+</noscript>
+```
+`<body>` 태그 안에 위치하는 것이 일반적입니다.
--- a/doc/html5/02_텍스트
+++ b/doc/html5/02_텍스트
@@ -0,0 +1,180 @@
+# 텍스트 콘텐츠
+HTML에서 텍스트 콘텐츠를 표현하고 스타일링하는 데 사용되는 다양한 태그들을 살펴보겠습니다.
+
+## h1, h2, h3, h4, h5, h6
+
+웹 페이지의 제목이나 중요한 내용을 강조할 때 사용합니다. `<h1>`이 가장 큰 제목이고 `<h6>`이 가장 작은 제목입니다.
+
+```html
+<h1>최상위 제목</h1>
+<h2>중간 제목</h2>
+<h3>하위 제목</h3>
+```
+
+## p
+
+문단을 나눌 때 사용합니다. 브라우저는 자동으로 줄 바꿈을 하고 여백을 추가합니다.
+
+```html
+<p>이것은 첫 번째 단락입니다. <br>
+   두 번째 줄입니다.</p>
+```
+
+## 줄바꿈 : br, wbr
+
+* `<br>` : 한 줄을 강제로 바꿀 때 사용합니다. 블록 레벨 요소가 아니므로, 다른 블록 레벨 요소 안에 사용해야 합니다.
+* `<wbr>` : 단어 중간에 줄 바꿈이 가능한 위치를 지정하는 태그입니다.
+```html
+<p>첫 번째 줄<br>
+   두 번째 줄</p>
+<p>이것은매우긴단어입니다<wbr>!</p>
+```
+
+## div
+div 태그는 블록 레벨 요소로, 항상 새로운 줄에서 시작하여 전체 너비를 차지합니다.
+```html
+<div class="header">
+  <h1>웹 사이트 제목</h1>
+  <nav>
+    </nav>
+</div>
+```
+
+## span
+span 태그는 인라인 레벨 요소로, 주변 텍스트의 흐름을 방해하지 않고 특정 부분만 스타일을 적용할 수 있습니다.
+```html
+<p>이 문장에서 <span style="color: blue;">파란색</span> 부분만 색상을 변경했습니다.</p>
+```
+
+## hr
+
+구분선을 그을 때 사용합니다. 블록 레벨 요소입니다.
+
+```html
+<hr>
+```
+
+## 인용 : blockquote, q, cite
+
+* `<blockquote>` : 긴 인용문을 표시할 때 사용합니다.
+* `<q>` : 다른 출처에서 인용한 짧은 구절을 나타내는 데 사용됩니다. 
+
+```html
+<blockquote>
+  "인생은 짧고 예술은 길다."
+</blockquote>
+```
+```html
+<p>셰익스피어는 <q cite="https://www.example.com">To be, or not to be: that is the question.</q>라고 말했습니다.</p>
+```
+* `<cite>`: 인용문의 출처를 표시합니다.
+```html
+<p>“모든 지식은 경험에서 나온다.”는 <cite>존 로크</cite>의 말입니다.</p>
+```
+
+## 강조 태그: strong, b, em, i, mark
+
+* `<strong>`: 텍스트의 특정 부분을 매우 강조하고 싶을 때 사용합니다.
+* `<b>`: 텍스트를 굵게 표현하여 시각적으로 강조하고 싶을 때 사용합니다.
+* `<em>`: 텍스트의 특정 부분을 의미적으로 강조하고 싶을 때 사용합니다.
+* `<i>`: 텍스트를 기울여 표현하고 싶을 때 사용합니다.
+* `<mark>`: 텍스트의 특정 부분에 하이라이트를 적용하여 눈에 띄게 하고 싶을 때 사용합니다.
+
+```html
+<p>저는 <strong>웹 개발</strong>을 배우고 있습니다. 특히 <strong>HTML</strong>과 <strong>CSS</strong>가 재미있습니다. 
+  <i>JavaScript</i>도 배우고 싶은데, 아직 어렵네요. 
+  <mark>함께 공부할 사람</mark>을 찾고 있습니다.</p>
+```
+
+* strong과 b: 둘 다 텍스트를 굵게 표현하지만, strong은 의미적으로 중요한 부분을 강조하는 데 사용하는 것이 좋습니다.
+* em과 i: 둘 다 텍스트를 기울여 표현하지만, em은 논리적으로 강조하는 부분에 사용하고, i는 외국어, 기술 용어 등을 표현하는 데 사용하는 것이 일반적입니다.
+
+## 그 외
+
+* `<pre>`: 텍스트의 들여쓰기, 줄 바꿈 등을 그대로 유지하여 출력합니다. 주로 코드 블록을 표현할 때 사용합니다.
+    ```html
+    <pre><code>
+    function factorial(n) {
+    if (n === 0) {
+        return 1;
+    }
+    return n * factorial(n - 1);
+    }
+    </code></pre>
+    ```
+* `<address>`: 문서의 저자 또는 연락처 정보를 표시합니다.
+    ```html
+    <address>
+    Written by: John Doe<br>
+    Contact: <a href="mailto:john@example.com">john@example.com</a>
+    </address>
+    ```
+* `<abbr>`: 약어를 표시하고, 마우스를 올리면 전체 단어를 보여줄 수 있습니다.
+    ```html
+    <p>HTML은 <abbr title="HyperText Markup Language">HyperText Markup Language</abbr>의 약자입니다.</p>
+    ```
+* `<code>`: 컴퓨터 코드를 표시합니다. 일반적으로 `<pre>` 태그와 함께 사용하여 코드 블록을 형성합니다.
+* `<del>`: 삭제된 텍스트를 표시합니다.
+    ```html
+    <p>이 문장에서 <del>삭제된 부분</del>은 더 이상 필요하지 않습니다.</p>
+    ```
+* `<dfn>`: 어떤 글이나 문서에서 처음 등장하는 용어를 설명하거나 정의할 때 사용합니다.
+    ```html
+    <p>HTML에서 <dfn>요소</dfn>는 특정 용어를 정의할 때 사용합니다.</p>
+    ```
+* `<ins>`: 추가된 텍스트를 표시합니다.
+    ```html
+    <p>원래 문장은 다음과 같았습니다. <ins>추가된 부분</ins></p>
+    ```
+* `<small>`: 작은 글자로 표시합니다.
+    ```html
+    <p>본문 내용<small>(저작권 정보)</small></p>
+    ```
+* `<sub>`: 아래 첨자를 표시합니다. 주로 화학식이나 수학 공식에서 사용됩니다.
+    ```html
+    <p>물의 화학식은 H<sub>2</sub>O입니다.</p>
+    ```
+* `<sup>`: 위 첨자를 표시합니다. 주로 지수 표현이나 단위 표현에서 사용됩니다.
+    ```html
+    <p>10의 3승은 10<sup>3</sup>입니다.</p>
+    ```
+* `<var>` : 변수를 나타내는 태그입니다. 주로 수학 공식이나 프로그래밍 코드에서 변수를 표시할 때 사용됩니다.
+    ```html
+    <p>피타고라스의 정리: <var>a</var>² + <var>b</var>² = <var>c</var>²</p>
+    ```
+* `<kbd>` : 키보드 입력을 나타내는 태그입니다. 사용자가 직접 입력해야 하는 키를 표시할 때 사용됩니다.
+    ```html
+    <p>파일을 저장하려면 <kbd>Ctrl+S</kbd>를 누르세요.</p>
+    ```
+* `<samp>` : 컴퓨터 프로그램의 샘플 출력이나 인용된 출력을 나타내는 태그입니다.
+    ```html
+    <p>프로그램 실행 결과: <samp>Hello, world!</samp></p>
+    ```
+* `<time>` : 특정 시간 또는 기간을 나타내는 태그입니다. 검색 엔진이나 보조 기술이 시간 정보를 더 잘 이해할 수 있도록 돕습니다.
+    - datetime 속성: 정확한 시간 정보를 ISO 8601 형식으로 표기합니다.
+    ```html
+    <time datetime="YYYY-MM-DDTHH:MM:SS">2023년 12월 31일</time>
+    ```
+
+## 루비
+루비(Ruby) 태그는 주로 동아시아 언어, 특히 일본어에서 한자어의 발음을 표기하는 데 사용되는 HTML 태그입니다.
+* `<ruby>`: 루비 주석 전체를 감싸는 요소입니다.
+* `<rb>`: 루비 기본 문자(루비를 붙일 문자)를 나타냅니다.
+* `<rt>`: 루비 주석(발음)을 나타냅니다.
+* `<rp>`: 브라우저가 루비를 지원하지 않을 경우 표시될 괄호를 나타냅니다.
+
+```html
+<p>私は<ruby>日本語<rt>にほんご</rt></ruby>が大好きです。</p>
+```
+
+
+
+
+
+
+
+
+
+
+
+
--- a/doc/html5/03_목록.md
+++ b/doc/html5/03_목록.md
@@ -0,0 +1,52 @@
+# 목록
+
+HTML에서 목록을 표현하는 데 사용되는 태그들은 웹 페이지의 가독성을 높이고 정보를 체계적으로 구성하는 데 중요한 역할을 합니다.
+
+목록 안에 다른 목록을 중첩하여 복잡한 구조를 만들 수 있습니다.
+
+## 순서 없는 목록 (Unordered List) - ul, li
+목록의 항목들 간에 특별한 순서가 없을 때 사용합니다. 각 항목 앞에 불렛(bullet) 마커가 표시됩니다.
+
+```html
+<ul>
+  <li>첫 번째 항목</li>
+  <li>두 번째 항목</li>
+  <li>세 번째 항목</li>
+</ul>
+```
+
+* `<li>` 태그는 `<ul>` 또는 `<ol>` 태그 안에서만 사용되며, 각 목록 항목을 나타냅니다.
+
+## 순서 있는 목록 (Ordered List) - ol, li
+목록의 항목들 간에 순서가 있을 때 사용합니다. 각 항목 앞에 숫자나 알파벳 등이 자동으로 부여됩니다.
+```html
+<ol>
+  <li>첫 번째 항목</li>
+  <li>두 번째 항목</li>
+  <li>세 번째 항목</li>
+</ol>
+```
+
+## 목록에 스타일 적용하기
+```css
+ul {
+  list-style-type: square; /* 마커를 네모로 변경 */
+}
+ol {
+  list-style-position: inside; /* 숫자를 항목 안쪽으로 이동 */
+}
+```
+
+## 정의 목록 (Definition List) - dl, dt, dd
+용어와 설명을 짝으로 나타낼 때 사용합니다.
+```html
+<dl>
+  <dt>HTML</dt>
+  <dd>HyperText Markup Language의 약자로 웹 페이지를 만드는 언어입니다.</dd>
+  <dt>CSS</dt>
+  <dd>Cascading Style Sheets의 약자로 웹 페이지의 스타일을 정의하는 언어입니다.</dd>
+</dl>
+```
+* `<dt>` 태그는 정의 목록에서 용어를 나타내고, `<dd>` 태그는 해당 용어에 대한 설명을 나타냅니다.
+
+
--- a/doc/html5/04_링크.md
+++ b/doc/html5/04_링크.md
@@ -0,0 +1,36 @@
+# 링크 태그
+
+## a
+
+HTML에서 링크를 생성하는 데 가장 기본적으로 사용되는 태그는 `<a>` 태그입니다. 앵커(anchor) 태그라고도 불리며, 다른 페이지, 특정 위치, 파일, 또는 이메일 주소로 연결하는 하이퍼링크를 만들 수 있습니다.
+
+```html
+<a href="링크주소" target="_blank">링크 텍스트</a>
+```
+
+* `<a>`: 앵커 태그의 시작과 끝을 나타냅니다.
+* href: 링크할 페이지의 URL 주소를 지정합니다. URL은 상대 경로 또는 절대 경로를 사용할 수 있습니다.
+* target: 링크를 클릭했을 때 링크가 열리는 방식을 지정합니다.
+    - _blank: 새로운 창에서 열림
+    - _self: 현재 창에서 열림 (기본값)
+    - _parent: 부모 프레임에서 열림
+    - _top: 최상위 창에서 열림
+* rel 속성: 링크와 대상 간의 관계를 나타냅니다. (예: rel="nofollow": 검색 엔진에게 링크를 따라가지 말라고 지시)
+* title 속성: 마우스를 올려놓았을 때 표시되는 도구 설명을 지정합니다.
+
+```html
+<a href="https://www.example.com">Example 웹사이트</a>
+<a href="mailto:you@example.com">이메일 보내기</a>
+<a href="#section2">페이지 내의 section2로 이동</a>
+```
+```html
+<!-- 이미지 링크 -->
+<a href="https://www.example.com"><img src="image.jpg" alt="이미지 설명"></a>
+<!-- 버튼 링크 -->
+<a href="https://www.example.com" class="button">버튼 클릭</a>
+<!-- 다운로드 링크 -->
+<a href="document.pdf" download="document.pdf">문서 다운로드</a>
+
+```
+
+
--- a/doc/html5/05_멀티미디어.md
+++ b/doc/html5/05_멀티미디어.md
@@ -0,0 +1,115 @@
+# 미디어
+
+## img
+웹 페이지에 이미지를 삽입하는 가장 기본적인 태그입니다.
+
+```html
+<img src="image.jpg" alt="이미지 설명">
+```
+* src: 이미지 파일의 경로를 지정합니다.
+* alt: 이미지가 로드되지 않거나 시각 장애인을 위해 대체 텍스트를 제공합니다.
+
+## video
+HTML5부터 지원되는 태그로, 웹 페이지에 동영상을 삽입할 수 있습니다.
+```html
+<video controls>
+  <source src="movie.mp4" type="video/mp4">
+  Your browser does not support the video tag.
+</video>
+```
+* controls: 사용자가 동영상을 재생, 일시 정지, 볼륨 조절 등을 할 수 있는 컨트롤을 표시합니다.
+* source: 동영상 파일의 경로와 형식을 지정합니다.
+* autoplay: 페이지 로드 시 자동으로 재생합니다.
+* muted: 음소거 상태로 재생합니다.
+* loop: 동영상이 끝나면 반복 재생합니다.
+* poster: 동영상이 로딩되기 전에 표시되는 이미지입니다.
+
+## audio
+HTML5부터 지원되는 태그로, 웹 페이지에 오디오 파일을 삽입할 수 있습니다.
+```html
+<audio controls>
+  <source src="music.mp3" type="audio/mpeg">
+  Your browser does not support the audio element.
+</audio>
+```
+* controls: 사용자가 오디오를 재생, 일시 정지, 볼륨 조절 등을 할 수 있는 컨트롤을 표시합니다.
+* source: 오디오 파일의 경로와 형식을 지정합니다.
+* autoplay: 페이지 로드 시 자동으로 재생합니다.
+* loop: 오디오가 끝나면 반복 재생합니다.
+* preload: 브라우저가 미리 오디오 파일을 불러올지 여부를 지정합니다.
+
+## canvas 
+자바스크립트를 사용하여 동적으로 그래픽을 그릴 수 있는 캔버스를 생성하는 태그입니다. 자바스크립트 API를 통해 다양한 그래픽 효과를 구현할 수 있습니다.
+게임, 데이터 시각화 등에 활용됩니다.
+```html
+<canvas id="myCanvas" width="200" height="100"></canvas>
+```
+
+## svg
+확장 가능한 벡터 그래픽을 표현하는 언어로, HTML 문서에 직접 벡터 그래픽을 삽입할 수 있습니다.
+```html
+<svg width="200" height="100">
+  <circle cx="50" cy="50" r="40" fill="red" />
+</svg>
+```
+
+## picture
+다양한 화면 크기와 해상도에 맞는 이미지를 제공하기 위한 태그입니다. `<source>` 태그를 사용하여 여러 이미지를 정의하고, 미디어 쿼리를 통해 적절한 이미지를 선택합니다.
+반응형 웹 디자인에 유용합니다.
+```html
+<picture>
+  <source media="(min-width: 768px)" srcset="large.jpg">
+  <source media="(min-width: 480px)" srcset="medium.jpg">
+  <img src="small.jpg" alt="이미지">
+</picture>
+```
+
+## figure, figcaption
+이미지, 차트, 그래프 등의 콘텐츠와 캡션을 함께 묶어서 표현할 때 사용합니다.
+```html
+<figure>
+  <img src="image.jpg" alt="설명">
+  <figcaption>설명 텍스트</figcaption>
+</figure>
+```
+
+## map, area
+이미지의 특정 영역을 클릭했을 때 다른 페이지로 이동하거나 특정 기능을 실행하도록 설정할 수 있습니다.
+```html
+<img src="map.jpg" usemap="#mymap">
+<map name="mymap">
+  <area shape="rect" coords="0,0,80,80" href="link1.html" alt="Area 1">
+</map>
+```
+* usemap: 이미지 맵의 이름을 지정합니다.
+* area: 이미지 맵의 각 영역을 정의합니다.
+* shape: 영역의 모양을 지정합니다. (rect: 사각형, circle: 원, poly: 다각형 등)
+* coords: 영역의 좌표를 지정합니다.
+
+## iframe
+Inline Frame의 약자로, HTML 문서 내에 또 다른 HTML 문서를 삽입하여 표시할 수 있도록 하는 태그입니다. 마치 웹 페이지 안에 작은 창을 띄워 다른 웹 페이지를 보여주는 것과 같습니다.
+* 다른 웹 페이지 삽입: 다른 웹사이트의 콘텐츠를 자신의 웹 페이지에 삽입하여 보여줄 수 있습니다. (예: 유튜브 동영상, 구글 지도 등)
+* 독립적인 콘텐츠 표시: 메인 페이지와 별도로 독립적인 콘텐츠를 표시할 수 있습니다.
+* 광고 노출: 광고 배너를 삽입하여 수익을 창출할 수 있습니다.
+
+```html
+<iframe src="https://www.example.com"></iframe>
+```
+* src: 삽입할 문서의 URL을 지정합니다.
+* width: iframe의 너비를 지정합니다.
+* height: iframe의 높이를 지정합니다.
+* frameborder: iframe 테두리의 유무를 지정합니다.
+* scrolling: iframe 내부의 콘텐츠 스크롤 여부를 지정합니다.
+* name: iframe에 이름을 부여하여 자바스크립트에서 제어할 수 있도록 합니다.
+
+
+## embed, object
+주로 플러그인이나 액티브X 컨트롤을 삽입하는 데 사용되었습니다. 브라우저 호환성 문제가 많고, 보안 문제의 위험이 있어 최근에는 잘 사용되지 않습니다.
+* embed : 외부 콘텐츠를 웹 페이지에 포함시키는 데 사용되는 일반적인 태그입니다. 
+* object : 다양한 형식의 데이터를 표현하는 데 사용되는 태그입니다. 이미지, 플러그인, 미디어 등을 포함할 수 있습니다.
+```html
+<embed src="https://www.example.com/myplugin.swf" width="300" height="200">
+```
+```html
+<object data="image.svg" type="image/svg+xml"></object>
+```
--- a/doc/html5/06_테이블.md
+++ b/doc/html5/06_테이블.md
@@ -0,0 +1,76 @@
+# 테이블
+HTML에서 테이블을 만들고 데이터를 표 형식으로 정렬하여 보여주기 위해 다양한 태그들이 사용됩니다. 각 태그의 역할과 사용법을 자세히 알아보겠습니다.
+
+* `<table>`: 테이블 전체를 감싸는 최상위 태그입니다.
+* `<tr>`: 테이블의 한 행을 나타냅니다.
+* `<th>`: 테이블의 헤더 셀(제목)을 나타냅니다. 일반적으로 굵은 글씨로 표시되며 가운데 정렬됩니다.
+* `<td>`: 테이블의 데이터 셀을 나타냅니다.
+* `<caption>`: 테이블 전체에 대한 설명이나 제목을 추가합니다.
+* `<thead>`: 테이블 헤더 부분을 감싸는 태그입니다.
+* `<tbody>`: 테이블 본문 부분을 감싸는 태그입니다.
+* `<tfoot>`: 테이블 푸터 부분을 감싸는 태그입니다.
+* `<col>`: 테이블의 열에 대한 속성을 정의합니다.
+* `<colgroup>`: 여러 열에 대한 속성을 그룹으로 정의합니다.
+
+```html
+<table>
+  <tr>
+    <th>이름</th>
+    <th>나이</th>
+    <th>성별</th>
+  </tr>
+  <tr>
+    <td>홍길동</td>
+    <td>30</td>
+    <td>남자</td>
+  </tr>
+  <tr>
+    <td>김순이</td>
+    <td>25</td>
+    <td>여자</td>
+  </tr>
+</table>
+```
+
+* 테이블은 데이터를 표 형식으로 정렬하여 보여주는 데 효과적입니다.
+* 복잡한 레이아웃을 구현하기 위해 테이블을 사용하는 것은 권장되지 않습니다. CSS Grid나 Flexbox를 사용하는 것이 더 적합합니다.
+* 모바일 환경에서 테이블이 제대로 표시되지 않을 수 있으므로, 반응형 웹 디자인을 고려해야 합니다.
+
+
+## 셀 병합하기
+* rowspan: 셀을 여러 행에 걸쳐 병합합니다.
+* colspan: 셀을 여러 열에 걸쳐 병합합니다.
+
+```html
+<table>
+  <tr>
+    <th colspan="2">개인 정보</th>
+  </tr>
+  <tr>
+    <td>이름</td>
+    <td>홍길동</td>
+  </tr>
+  <tr>
+    <td rowspan="2">연락처</td>
+    <td>010-1234-5678</td>
+  </tr>
+  <tr>
+    <td>hong@example.com</td>
+  </tr>
+</table>
+```
+
+## 테이블 스타일링
+CSS를 사용하여 테이블의 모양과 레이아웃을 다양하게 변경할 수 있습니다. 예를 들어, 테이블 테두리, 배경색, 글꼴 등을 설정할 수 있습니다.
+
+```css
+table {
+  border-collapse: collapse;
+}
+
+td, th {
+  border: 1px solid black;
+  padding: 10px;
+}
+```
+
--- a/doc/html5/07_폼.md
+++ b/doc/html5/07_폼.md
@@ -0,0 +1,95 @@
+# 폼
+HTML 폼은 사용자로부터 데이터를 입력받아 서버로 전송하는 데 사용됩니다. 다양한 종류의 입력 요소와 함께 사용하여 다양한 형태의 폼을 만들 수 있습니다.
+
+## form
+폼 전체를 감싸는 태그입니다.
+```html
+<form action="submit.php" method="post">
+</form>
+```
+* action: 폼 데이터를 전송할 서버 측 스크립트의 URL을 지정합니다.
+* method: 데이터를 전송하는 방법을 지정합니다 (get 또는 post).
+
+## input
+사용자 입력을 받는 다양한 종류의 입력 요소를 생성합니다.
+```html
+<input type="text" name="username" placeholder="사용자 이름">
+<input type="password" name="password">
+<input type="email" name="email">
+<input type="submit" value="제출">
+```
+* type: 입력 필드의 종류를 지정합니다.
+    - text: 일반적인 텍스트 입력 (예: 이름, 이메일)
+    - password: 비밀번호 입력 (입력된 내용이 가려짐)
+    - email: 이메일 형식의 입력만 허용
+    - number: 숫자만 입력 가능
+    - date: 날짜 선택
+    - time: 시간 선택
+    - datetime-local: 날짜와 시간 선택
+    - search: 검색창
+    - url: URL 입력
+    - tel: 전화번호 입력
+    - checkbox : 체크박스
+    - radio : 라디오버튼
+    - file : 파일 업로드
+* name: 서버로 전송될 때 사용될 변수명을 지정합니다.
+* required 속성: 필수 입력 항목을 지정할 수 있습니다.
+* disabled: 입력을 비활성화
+* readonly: 입력 내용을 읽기 전용으로 설정
+* maxlength: 입력 가능한 최대 글자 수 지정
+* minlength: 입력 가능한 최소 글자 수 지정
+* pattern 속성: 입력 값의 형식을 제한할 수 있습니다.
+* placeholder 속성: 입력 필드에 미리 보여줄 텍스트를 설정할 수 있습니다.
+
+## label
+입력 요소에 대한 설명을 제공합니다.
+```html
+<label for="username">사용자 이름:</label>
+<input type="text" id="username" name="username">
+```
+* for 속성: 관련 input 요소의 id를 지정합니다.
+
+## textarea
+여러 줄의 텍스트를 입력받을 수 있는 영역을 생성합니다.
+```html
+<textarea name="message" rows="5" cols="30"></textarea>
+```
+* rows: 행의 수를 지정합니다.
+* cols: 열의 수를 지정합니다.
+
+## select
+드롭다운 목록을 생성합니다.
+```html
+<select name="country">
+  <option value="korea">한국</option>
+  <option value="usa">미국</option>
+  <option value="japan">일본</option>
+</select>
+```
+
+## option
+`<select>` 태그 안에서 선택할 수 있는 옵션을 정의합니다.
+
+## button
+버튼을 생성합니다.
+```html
+<button type="submit">제출</button>
+<button type="reset">초기화</button>
+```
+* type: 버튼의 종류를 지정합니다.
+    - submit
+    - reset
+    - button
+
+## fieldset
+관련된 입력 요소들을 그룹화합니다.
+```html
+<fieldset>
+  <legend>개인 정보</legend>
+  <input type="text" name="name">
+  <input type="email" name="email">
+</fieldset>
+```
+
+## legend
+`<fieldset>` 그룹에 대한 설명을 제공합니다.
--- a/doc/html5/08_섹션.md
+++ b/doc/html5/08_섹션.md
@@ -0,0 +1,83 @@
+# 섹션
+HTML5에서 웹 페이지의 구조를 논리적으로 나누고 의미를 부여하기 위해 다양한 섹션 태그가 도입되었습니다. 이러한 섹션 태그들은 웹 페이지의 가독성을 높이고, 검색 엔진 최적화(SEO)에도 긍정적인 영향을 미칩니다.
+
+```html
+<article>
+  <header>
+    <h1>제목</h1>
+    <time datetime="2023-11-23">2023년 11월 23일</time>
+  </header>
+  <main>
+    <h2>주요 콘텐츠</h2>
+    <p>본문 내용</p>
+    <img src="image.jpg" alt="이미지 설명">
+  </main>
+  <footer>
+    <p>작성자: 홍길동</p>
+  </footer>
+</article>
+```
+
+## section
+문서의 독립적인 섹션을 나타냅니다. 주제별로 내용을 구분할 때 사용합니다.
+```html
+<section>
+  <h2>첫 번째 섹션</h2>
+  <p>이 섹션은 첫 번째 내용을 담고 있습니다.</p>
+</section>
+```
+
+## article
+독립적인 콘텐츠 블록을 나타냅니다. 블로그 게시글, 뉴스 기사 등과 같이 재사용 가능한 콘텐츠에 사용합니다.
+```html
+<article>
+  <h2>블로그 게시글</h2>
+  <p>오늘의 날씨는 맑습니다.</p>
+</article>
+```
+
+## nav
+네비게이션 링크를 모아놓은 섹션을 나타냅니다.
+```html
+<nav>
+  <ul>
+    <li><a href="#">홈</a></li>
+    <li><a href="#">소개</a></li>
+    <li><a href="#">문의</a></li>
+  </ul>
+</nav>
+```
+
+## aside
+본문과 관련된 부가적인 정보를 담는 사이드바를 나타냅니다.
+```html
+<aside>
+  <h3>광고</h3>
+  <img src="ad.jpg" alt="광고 이미지">
+</aside>
+```
+
+## header
+섹션의 헤더 부분을 나타냅니다. 제목, 검색창 등을 포함할 수 있습니다.
+```html
+<header>
+  <h1>웹 사이트 제목</h1>
+  <nav>
+    </nav>
+</header>
+```
+
+## main
+HTML5에서 도입된 태그로, HTML 문서의 주요 콘텐츠를 감싸는 역할을 합니다. 
+* 유일성: 하나의 HTML 문서에 main 태그는 하나만 사용해야 합니다.
+* 위치: body 태그 안에 위치해야 합니다.
+* 내용: main 태그 안에는 웹 페이지의 주요 내용만 포함해야 합니다.
+* 헤더와 푸터: header와 footer 태그는 main 태그의 외부에 위치해야 합니다.
+
+## footer
+섹션의 푸터 부분을 나타냅니다. 저작권 정보, 연락처 등을 포함할 수 있습니다.
+```html
+<footer>
+  <p>&copy; 2023 모든 권리 보유</p>
+</footer>
+```
--- a/doc/html5/Input.md
+++ b/doc/html5/Input.md
@@ -0,0 +1,100 @@
+# Input
+
+```html
+<input
+  type="text"
+  id="comment"
+  name="comment"
+  value="저는 텍스트 필드입니다." />
+```
+## 텍스트 필드 타입
+
+* text : 단일 줄 텍스트 필드입니다. 줄 바꿈이 있는 텍스트를 입력하면 브라우저는 해당 데이터를 서버로 전송하기 전에 줄 바꿈을 제거합니다.
+* password
+* hidden : 사용자에게 보이지 않는, 하지만 서버에는 전송되는 양식 컨트롤을 만드는 데 사용됩니다.
+* search
+* url
+* tel
+* email
+* number
+* pattern
+
+## 체크 버튼 타입
+
+* checkbox
+* radio : 라디오 버튼의 name 속성에 동일한 이름을 사용하면 라디오 버튼을 그룹화 할 수 있습니다.
+
+```html
+<input type="checkbox" id="questionOne" name="subscribe" value="yes" checked />
+```
+
+```html
+<div>
+  <input type="checkbox" id="scales" name="scales"
+         checked>
+  <label for="scales">Scales</label>
+</div>
+```
+
+```html
+<div>
+  <input type="radio" id="huey" name="drone" value="huey"
+         checked>
+  <label for="huey">Huey</label>
+</div>
+
+<div>
+  <input type="radio" id="dewey" name="drone" value="dewey">
+  <label for="dewey">Dewey</label>
+</div>
+
+<div>
+  <input type="radio" id="louie" name="drone" value="louie">
+  <label for="louie">Louie</label>
+</div>
+```
+
+## 버튼 타입
+
+* submit
+* reset
+* button
+
+## 파일 선택 타입
+
+* file
+
+```html
+<input type="file" name="file" id="file" accept="image/*" multiple />
+<input type="file" accept="image/*;capture=camera" />
+```
+
+## 레인지 타입
+
+* range
+
+## 날짜와 시간 타입
+
+* datetime-local
+* month
+* time
+* week
+
+## 색상 선택 타입
+
+* color
+
+
+## 목록
+
+```html
+<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />
+
+<datalist id="ice-cream-flavors">
+    <option value="Chocolate">
+    <option value="Coconut">
+    <option value="Mint">
+    <option value="Strawberry">
+    <option value="Vanilla">
+</datalist>
+```
--- a/doc/html5/Interaction.md
+++ b/doc/html5/Interaction.md
@@ -0,0 +1,80 @@
+# 대화형 요소
+
+### details
+
+"open" 상태일 때만 내부 정보를 보여주는 정보 공개 위젯을 생성합니다.
+
+- open
+
+```html
+<details>
+    <summary>Details</summary>
+    Something small enough to escape casual notice.
+</details>
+```
+
+### summary
+
+`detail` 요소의 공개 상자에 대한 요약, 캡션 또는 범례를 지정합니다.
+
+### dialog
+
+닫을 수 있는 경고, 검사기, 창 등 대화 상자 및 기타 다른 상호작용 가능한 컴포넌트를 나타냅니다.
+
+- open
+
+  대화 상자가 활성 상태이며 상호작용할 수 있음을 나타냅니다. open 속성이 없을 때 대화 상자가 사용자에게 보여서는 안됩니다.
+
+
+```html
+<dialog open>
+  <p>여러분 안녕하세요!</p>
+</dialog>
+```
+
+### memu
+
+사용자가 수행하거나 하는 명령 묶음을 말합니다. 이것은 스크린 위에 나오는 목록 메뉴와 눌려진 버튼 아래에 나오는 것과 같은 맥락 메뉴를 포함합니다.
+
+- label
+
+- type
+
+  context | list
+
+
+```html
+<button type="menu" menu="dropdown-menu">
+  Dropdown
+</button>
+
+<menu type="context" id="dropdown-menu">
+  <menuitem label="Action">
+  <menuitem label="Another action">
+  <hr>
+  <menuitem label="Separated action">
+</menu>
+```
+
+```html
+<dialog id="favDialog">
+  <form method="dialog">
+    <p><label>좋아하는 동물:
+      <select>
+        <option></option>
+        <option>아르테미아</option>
+        <option>레서판다</option>
+        <option>거미원숭이</option>
+      </select>
+    </label></p>
+    <menu>
+      <button value="cancel">취소</button>
+      <button id="confirmBtn" value="default">확인</button>
+    </menu>
+  </form>
+</dialog>
+
+<menu>
+  <button id="updateDetails">상세정보 업데이트</button>
+</menu>
+```
--- a/doc/html5/Shadow-DOM.md
+++ b/doc/html5/Shadow-DOM.md
@@ -0,0 +1,3 @@
+# Shadow DOM
+
+Start typing here...
--- a/doc/html5/Template-and-Slot.md
+++ b/doc/html5/Template-and-Slot.md
@@ -0,0 +1,10 @@
+# Template and Slot
+
+## slot
+
+웹 컴포넌트 사용자가 자신만의 마크업으로 채워 별도의 DOM 트리를 생성하고, 컴포넌트와 함께 표현할 수 있는 웹 컴포넌트 내부의 플레이스홀더입니다.
+
+## template
+
+페이지를 불러온 순간 즉시 그려지지는 않지만, 이후 JavaScript를 사용해 인스턴스를 생성할 수 있는 HTML 코드를 담을 방법을 제공합니다.
+
--- a/doc/html5/Web-Forms.md
+++ b/doc/html5/Web-Forms.md
@@ -0,0 +1,183 @@
+# 웹 폼
+
+
+* button : 클릭할 수 있는 버튼입니다. 버튼은 양식 내부는 물론 간단한 표준 버튼 기능이 필요한 곳이라면 문서 어디에나 배치할 수 있습니다.
+  * autofocus
+  * disabled
+  * form : 요소가 속한 form을 나타냅니다.
+  * name, value
+  * type : submit | reset | button
+* input : 사용자 입력 폼입니다.
+  * accept : 파일 형식을 지정합니다. file 형식에만 적용할 수 있습니다.
+  * autocomplete : 웹 브라우저의 자동 완성 기능을 사용하는지 여부를 나타냅니다.
+  * autofocus
+  * checked : radio, chcekbox에만 적용할 수 있습니다.
+  * dirname
+  * disabled
+  * form
+  * list : 사전 정의된 옵션 목록입니다. ```<datalist>```와 연결합니다.
+  * min, max, step : number 타입에만 적용할 수 있습니다. 실수의 경우 ```step="0.1"``` 또는 ```step="any"``` 등으로 지정할 수 있습니다.
+  * maxlength, minlength
+  * multiple : email, file에만 적용할 수 있습니다. 여러 항목을 입력받을 때 사용합니다.
+  * name, value
+  * pattern
+  * placeholder
+  * readonly
+  * required
+  * size
+  * src
+  * type
+    * button | reset | submit | image
+    * checkbox | radio
+    * text | password | search | url | email | tel
+    * number | range
+    * datetime-local | month | date | time | week 
+    * color | file
+    * hidden
+  * usemap
+* textarea : 여러 줄 텍스트 편집기입니다.
+  * autofocus
+  * cols, rows
+  * dirname
+  * disabled
+  * form
+  * maxlength
+  * name, value
+  * placeholder
+  * readonly
+  * required
+  * wrap : soft | hard | wrap
+* select : 사용자가 선택할 수 있는 옵션 메뉴입니다.
+  * autofocus
+  * disabled
+  * form
+  * multiple
+  * name
+  * required
+  * size
+* option : select, optgroup, datalist 요소와 함께 사용됩니다.
+  * disabled
+  * selected
+  * value
+* optgroup : select 요소 내의 option 요소들을 그룹화합니다.
+  * disabled
+  * datalist
+
+```html
+<select name="pets" id="pet-select">
+    <option value="">--Please choose an option--</option>
+    <option value="dog">Dog</option>
+    <option value="cat">Cat</option>
+    <option value="hamster">Hamster</option>
+    <option value="parrot">Parrot</option>
+    <option value="spider">Spider</option>
+    <option value="goldfish">Goldfish</option>
+</select>
+
+<select id="dino-select">
+    <optgroup label="Theropods">
+        <option>Tyrannosaurus</option>
+        <option>Velociraptor</option>
+        <option>Deinonychus</option>
+    </optgroup>
+    <optgroup label="Sauropods">
+        <option>Diplodocus</option>
+        <option>Saltasaurus</option>
+        <option>Apatosaurus</option>
+    </optgroup>
+</select>
+```
+
+* label : 입력 폼에 대한 라벨입니다.
+  * for
+  * form
+
+```html
+<label for="name">Name:</label> <input type="text" id="name" name="user_name">
+
+<label for="name">
+  Name: <input type="text" id="name" name="user_name">
+</label>
+```
+
+* datalist : option과 함께 사용됩니다.
+* form : 사용자의 데이터를 서버로 전송하는 상호작용 부분을 나타냅니다.
+  * accept
+  * accept-charset
+  * action
+  * autocomplete : on | off
+  * enctype : POST 전송 데이터의 타입을 지정합니다. application/x-www-form-urlencoded | multipart/form-data | text/plain
+  * method : post | get
+  * name
+  * novalidate
+  * target
+* fieldset : 폼 안에서 여러 폼 요소들을 그룹화할 때 사용됩니다.
+  * disabled
+  * form
+  * name
+* legend : fieldset 요소를 위한 라벨입니다.
+
+
+```html
+<form action="/my-handling-form-page" method="post">
+ <ul>
+  <li>
+    <label for="name">Name:</label>
+    <input type="text" id="name" name="user_name">
+  </li>
+  <li>
+    <label for="mail">E-mail:</label>
+    <input type="email" id="mail" name="user_email">
+  </li>
+  <li>
+    <label for="msg">Message:</label>
+    <textarea id="msg" name="user_message"></textarea>
+  </li>
+ </ul>
+</form>
+```
+
+```html
+<form>
+  <fieldset>
+    <legend>Fruit juice size</legend>
+    <p>
+      <input type="radio" name="size" id="size_1" value="small">
+      <label for="size_1">Small</label>
+    </p>
+    <p>
+      <input type="radio" name="size" id="size_2" value="medium">
+      <label for="size_2">Medium</label>
+    </p>
+    <p>
+      <input type="radio" name="size" id="size_3" value="large">
+      <label for="size_3">Large</label>
+    </p>
+  </fieldset>
+</form>
+```
+
+
+* meter : 알려진 범위 내의 값을 나타냅니다.
+  * form
+  * high, low
+  * min, max
+  * optimum
+  * value
+* output : 계산 결과를 나타냅니다.
+  * for
+  * form
+  * name, value
+
+```html
+<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
+  <input type="range" id="b" name="b" value="50" /> +
+  <input type="number" id="a" name="a" value="10" /> =
+  <output name="result" for="a b">60</output>
+</form>
+```
+
+* progress : 작업 진행 상태를 나타냅니다.
+  * form
+  * max
+  * value
--- a/doc/http/01_http.md
+++ 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
+
+<!DOCTYPE html>
+<html>
+<head>
+  <title>제품 목록</title>
+</head>
+<body>
+  </body>
+</html>
+```
--- a/doc/http/02_http_method.md
+++ 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
+요청 메시지를 그대로 서버로 보내고, 서버에서 받은 메시지를 그대로 클라이언트로 반환합니다.
--- a/doc/http/03_status_code.md
+++ 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: 게이트웨이 또는 프록시 서버가 타임아웃되었습니다.
+
--- a/doc/http/04_http_header.md
+++ 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 헤더를 변경하여 다른 브라우저처럼 행동할 수 있습니다.
--- a/doc/http/05_cookie_session.md
+++ b/doc/http/05_cookie_session.md
@@ -0,0 +1,46 @@
+# 쿠키와 세션
+
+웹 서핑을 하다 보면 자주 접하게 되는 용어인 쿠키와 세션은 웹 애플리케이션에서 사용자 상태를 관리하는 데 필수적인 요소입니다. 둘 다 사용자 정보를 저장하고, 이를 바탕으로 맞춤형 서비스를 제공하는 데 사용되지만, 저장 위치와 용도에 따라 차이점이 있습니다.
+
+## 쿠키 (Cookie)
+웹 서버가 클라이언트(웹 브라우저)에 보내는 작은 크기의 데이터 파일입니다. 클라이언트는 이 파일을 로컬 디스크에 저장하고, 이후 같은 서버에 요청을 보낼 때마다 함께 전송합니다.
+
+### 특징
+* 저장 위치: 클라이언트 측 (브라우저)
+* 용도
+    - 사용자 식별 (로그인 상태 유지)
+    - 사용자 설정 저장 (테마, 언어 설정)
+    - 사이트 방문 기록 추적
+    - 장바구니 정보 저장
+* 종류
+    - 세션 쿠키: 브라우저를 닫으면 자동으로 삭제됩니다.
+    - 영구 쿠키: 만료 날짜가 설정되어 해당 날짜까지 유효합니다.
+
+### 장점
+* 서버 부담 감소: 서버에 사용자 정보를 저장하지 않아 서버 자원을 절약할 수 있습니다.
+
+### 단점
+* 보안 취약성: 클라이언트 측에 저장되므로, 해킹이나 악성 코드에 노출될 위험이 있습니다.
+* 용량 제한: 저장할 수 있는 데이터의 크기가 제한적입니다.
+* 사용자의 프라이버시 침해 가능성: 사용자의 행동을 추적하는 데 악용될 수 있습니다.
+
+## 세션 (Session)
+사용자와 서버 간의 연결 상태를 유지하기 위한 일련의 상호 작용을 의미합니다.
+
+### 특징
+* 저장 위치: 서버 측
+* 용도
+    - 사용자 세션 관리 (로그인 상태 유지, 장바구니 정보 관리)
+    - 사용자 활동 기록
+* 작동 방식
+    - 서버는 각 사용자에게 고유한 세션 ID를 부여하고, 이를 쿠키를 통해 클라이언트에 전달합니다.
+    - 클라이언트는 이후 요청 시 세션 ID를 함께 보내고, 서버는 해당 ID를 통해 사용자 정보를 조회합니다.
+
+### 장점
+* 보안성 향상: 서버 측에 저장되므로 쿠키보다 보안성이 높습니다.
+* 대용량 데이터 저장 가능: 쿠키보다 더 많은 양의 데이터를 저장할 수 있습니다.
+
+### 단점
+* 서버 부담 증가: 서버에 사용자 정보를 저장해야 하므로 서버 자원을 소모합니다.
+* 세션 만료 문제: 세션 유효 시간이 지나면 사용자 정보가 사라질 수 있습니다.
+
--- a/doc/http/06_restful.md
+++ 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로 구현하여 시스템을 분산하고 확장성을 높일 수 있습니다.