2024-06-21

2024-06-21 14:14:35 +09:00
parent 955bf1c64c
commit 8480fa7c8f
32 changed files with 2258 additions and 19 deletions
--- a/Writerside/topics/Atom.md
+++ b/Writerside/topics/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/Writerside/topics/Boiler-Plate.md
+++ b/Writerside/topics/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/Writerside/topics/Composing-Email.md
+++ b/Writerside/topics/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/Writerside/topics/Custom-Element.md
+++ b/Writerside/topics/Custom-Element.md
@@ -0,0 +1,3 @@
+# Custom Element
+
+Start typing here...
--- a/Writerside/topics/Embed.md
+++ b/Writerside/topics/Embed.md
@@ -0,0 +1,272 @@
+# Embedding
+
+## 이미지
+
+### img
+
+문서에 이미지를 넣습니다.
+
+- src
+
+- srcset
+
+- alt
+
+- width, height
+
+- title
+
+- loading
+
+  eager | lazy
+
+- usemap
+
+
+```html
+<img src="images/dinosaur.jpg"
+     alt="The head and torso of a dinosaur skeleton;
+          it has a large head with long sharp teeth">
+```
+
+### figure
+
+이미지와 캡션을 하나로 묶을 때 사용합니다. `<figcaption>` 요소를 사용해 설명을 붙일 수 있습니다.
+
+### figcaption
+
+부모 `<figure>` 요소가 포함하는 다른 콘텐츠에 대한 설명 혹은 범례를 나타냅니다.
+
+```html
+<figure>
+  <img src="images/dinosaur.jpg"
+       alt="The head and torso of a dinosaur skeleton;
+            it has a large head with long sharp teeth"
+       width="400"
+       height="341">
+
+  <figcaption>A T-Rex on display in the Manchester University Museum.</figcaption>
+</figure>
+```
+
+### picture
+
+장치나 화면 크기에 따라 여러 소스 중 하나의 이미지를 사용하고자할 때 사용합니다. ```<picture>```는 여러 개의 ```<source>```와 하나의 ```<img>```를 갖습니다.
+
+```html
+<picture>
+  <source srcset="logo-768.png 768w, logo-768-1.5x.png 1.5x" type="image/png">
+  <source srcset="logo-480.png, logo-480-2x.png 2x">
+  <img src="logo-320.png" alt="logo">
+</picture>
+```
+
+### map
+
+`<area>` 요소와 함께 이미지 맵(클릭 가능한 링크 영역)을 정의할 때 사용합니다.
+
+### area
+
+이미지의 핫스팟 영역을 정의하고, 하이퍼링크를 추가할 수 있습니다. ```<map>```안에서만 사용됩니다.
+
+- shape
+- coords
+- href
+- alt
+
+```html
+<map name="infographic">
+    <area shape="rect" coords="184,6,253,27"
+          href="https://mozilla.org"
+          target="_blank" alt="Mozilla" />
+    <area shape="circle" coords="130,136,60"
+          href="https://developer.mozilla.org/"
+          target="_blank" alt="MDN" />
+    <area shape="poly" coords="130,6,253,96,223,106,130,39"
+          href="https://developer.mozilla.org/docs/Web/Guide/Graphics"
+          target="_blank" alt="Graphics" />
+    <area shape="poly" coords="253,96,207,241,189,217,223,103"
+          href="https://developer.mozilla.org/docs/Web/HTML"
+          target="_blank" alt="HTML" />
+    <area shape="poly" coords="207,241,54,241,72,217,189,217"
+          href="https://developer.mozilla.org/docs/Web/JavaScript"
+          target="_blank" alt="JavaScript" />
+    <area shape="poly" coords="54,241,6,97,36,107,72,217"
+          href="https://developer.mozilla.org/docs/Web/API"
+          target="_blank" alt="Web APIs" />
+    <area shape="poly" coords="6,97,130,6,130,39,36,107"
+          href="https://developer.mozilla.org/docs/Web/CSS"
+          target="_blank" alt="CSS" />
+</map>
+<img usemap="#infographic" src="/media/examples/mdn-info.png" alt="MDN infographic" />
+```
+
+### SVG
+
+```html
+<img 
+    src="equilateral.svg" 
+    alt="triangle with all three sides equal"
+    height="87"
+    width="100" />
+<img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg">
+```
+
+```html
+<svg width="300" height="200">
+    <rect width="100%" height="100%" fill="green" />
+</svg>
+```
+
+## 비디오 / 오디오
+
+### video
+
+비디오 플레이백을 지원하는 미디어 플레이어를 문서에 삽입합니다.
+
+- src
+
+- height
+
+- width
+
+- controls
+
+- autoplay
+
+- loop
+
+- muted
+
+- poster
+
+- currentTime
+
+
+- source
+
+    - src
+    - srcset
+    - type
+- track
+
+  미디어 요소(`<audio>`, `<video>`)의 자식으로서, 자막 등 시간별 텍스트 트랙(시간 기반 데이터)를 지정할 때 사용합니다.
+
+    - src
+
+    - srclang
+
+    - label
+
+    - default
+
+    - kind
+
+      subtitles | captions | descriptions | chapters | metadata
+
+
+```html
+<video src="rabbit320.webm" controls>
+  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p> 
+</video>
+
+<video controls>
+  <source src="rabbit320.mp4" type="video/mp4">
+  <source src="rabbit320.webm" type="video/webm">
+  <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
+  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
+</video>
+```
+
+### audio
+
+문서에 소리 콘텐츠를 포함할 때 사용합니다.
+
+- src
+- autoplay
+- controls
+- currentTime
+- loop
+
+```html
+<audio controls>
+  <source src="viper.mp3" type="audio/mp3">
+  <source src="viper.ogg" type="audio/ogg">
+  <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
+</audio>
+```
+
+## 캔버스
+
+### canvas
+
+캔버스 스크립팅 API 또는 WebGL API와 함께 사용해 그래픽과 애니메이션을 그릴 수 있습니다.
+
+- width, height
+
+## 프레임
+
+### iframe
+
+중첩 브라우징 맥락을 나타내는 요소로, 현재 문서 안에 다른 HTML 페이지를 삽입합니다.
+
+- allowfullscreen
+- frameborder
+- src
+- width
+- height
+
+```html
+<iframe src="https://developer.mozilla.org/en-US/docs/Glossary"
+        width="100%" height="500" frameborder="0"
+        allowfullscreen sandbox>
+  <p> 
+    <a href="https://developer.mozilla.org/en-US/docs/Glossary">
+       Fallback link for browsers that don't support iframes
+    </a>
+  </p>
+</iframe>
+```
+
+## 그 외 객체
+
+### embed
+
+외부 어플리케이션이나 대화형 컨텐츠와의 통합점을 나타냅니다.
+
+- src
+- type
+- width, height
+
+### object
+
+이미지나, 중첩된 브라우저 컨텍스트, 플러그인에 의해 다뤄질수 있는 리소스와 같은 외부 리소스를 나타냅니다.
+
+- data
+- type
+- width, height
+
+### ~~param~~
+
+`<object>`의 매개 변수를 정의합니다.
+
+- name
+- value
+
+```html
+<embed src="whoosh.swf" quality="medium"
+       bgcolor="#ffffff" width="550" height="400"
+       name="whoosh" align="middle" allowScriptAccess="sameDomain"
+       allowFullScreen="false" type="application/x-shockwave-flash"
+       pluginspage="http://www.macromedia.com/go/getflashplayer">
+```
+
+```html
+<object data="mypdf.pdf" type="application/pdf"
+        width="800" height="1200" typemustmatch>
+  <p>You don't have a PDF plugin, but you can 
+    <a href="mypdf.pdf">download the PDF file.
+    </a>
+  </p>
+</object>
+```
--- a/Writerside/topics/HTTP.md
+++ b/Writerside/topics/HTTP.md
@@ -0,0 +1,3 @@
+# HTTP
+
+Start typing here...
--- a/Writerside/topics/Http-Request.md
+++ b/Writerside/topics/Http-Request.md
@@ -0,0 +1,55 @@
+# HTTP 요청
+
+HTTP 프로토콜은 텍스트 형식의 데이터입니다. HTTP 요청은 3 블록으로 구분할 수 있습니다. 첫 번째 줄에는 기본적인 정보가 포함됩니다. 그리고, HTTP 헤더가 키:값 형식으로 한 줄에 하나씩 나열됩니다. GET, HEAD, DELETE, OPTIONS는 서버에 추가 데이터를 전송할 필요가 없지만, POST 등과 같이 서버로 전송할 데이터가 있는 경우에는 한 줄을 띄우고, 메시지 본문이 이어집니다.
+
+```
+GET / HTTP/1.1
+Host: www.example.com
+Accept-Language: ko
+```
+
+```
+POST /hello HTTP/1.1
+Host: www.example.com
+Accept-Language: ko
+
+name=Charlie&messageId=100
+```
+
+## 시작줄
+
+HTTP 요청의 첫 번째 줄에는 다음 3가지 정보가 포함되어 있습니다.
+
+- HTTP 메서드
+
+    - GET
+    - HEAD
+    - POST
+    - PUT
+    - DELETE
+    - CONNECT
+    - OPTIONS
+    - TRACE
+    - PATCH
+- 경로
+
+- HTTP 버전
+
+  HTTP/1.1
+
+
+## 헤더
+
+## 메시지 본문
+
+# HTTP 응답
+
+## 시작줄
+
+- HTTP 버전
+- 상태 코드
+- 상태 메시지
+
+## 헤더
+
+## 메시지 본문
--- a/Writerside/topics/Input.md
+++ b/Writerside/topics/Input.md
@@ -28,6 +28,32 @@
 <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
@@ -56,4 +82,19 @@

 ## 색상 선택 타입

-* color
+* 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/Writerside/topics/Interaction.md
+++ b/Writerside/topics/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/Writerside/topics/Json-Rpc.md
+++ b/Writerside/topics/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/Writerside/topics/Linkback.md
+++ b/Writerside/topics/Linkback.md
@@ -0,0 +1,3 @@
+# Linkback
+
+Start typing here...
--- a/Writerside/topics/List.md
+++ b/Writerside/topics/List.md
@@ -0,0 +1,69 @@
+# 목록
+
+### ul
+
+정렬되지 않은 목록을 나타냅니다. 보통 불릿으로 표현합니다.
+
+### ol
+
+정렬된 목록을 나타냅니다. 보통 숫자 목록으로 표현합니다.
+
+### li
+
+목록의 항목을 나타냅니다.
+
+### dl
+
+설명 목록을 나타냅니다. `<dl>`은 `<dt>`로 표기한 용어와 `<dd>` 요소로 표기한 설명 그룹의 목록을 감싸서 설명 목록을 생성합니다. 주로 용어사전 구현이나 메타데이터(키-값 쌍 목록)를 표시할 때 사용합니다.
+
+### dt
+
+설명 혹은 정의 리스트에서 용어를 나타냅니다. `<dl>` 요소 안에 위치해야 합니다
+
+### dd
+
+정의 목록 요소(`<dl>`)에서 앞선 용어(`<dt>`)에 대한 설명, 정의, 또는 값을 제공합니다.
+
+```html
+<ul>
+  <li>milk</li>
+  <li>eggs</li>
+  <li>bread</li>
+  <li>hummus</li>
+</ul>
+```
+
+```html
+<ol>
+  <li>Drive to the end of the road</li>
+  <li>Turn right</li>
+  <li>Go straight across the first two roundabouts</li>
+  <li>Turn left at the third roundabout</li>
+  <li>The school is on your right, 300 meters up the road</li>
+</ol>
+```
+
+```html
+<ol>
+  <li>Remove the skin from the garlic, and chop coarsely.</li>
+  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
+  <li>Add all the ingredients into a food processor.</li>
+  <li>Process all the ingredients into a paste.
+    <ul>
+      <li>If you want a coarse "chunky" hummus, process it for a short time.</li>
+      <li>If you want a smooth hummus, process it for a longer time.</li>
+    </ul>
+  </li>
+</ol>
+```
+
+```html
+<dl>
+  <dt>soliloquy</dt>
+  <dd>In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)</dd>
+  <dt>monologue</dt>
+  <dd>In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.</dd>
+  <dt>aside</dt>
+  <dd>In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought, or piece of additional background information.</dd>
+</dl>
+```
--- a/Writerside/topics/Meta.md
+++ b/Writerside/topics/Meta.md
@@ -0,0 +1,86 @@
+# 루트 요소 및 메타데이터
+
+### html
+
+`<html>` 요소는 HTML 문서의 최상단 요소를 나타내며, "루트 요소"라고도 부릅니다. 모든 다른 요소는 `<html>`의 후손이어야 합니다.
+
+### head
+
+제목, 스크립트, 스타일 등 문서에 대한 메타 데이터 정보를 담습니다. HTML 문서에는 하나의 `<head>` 요소만 존재할 수 있습니다.
+
+### base
+
+문서 안의 모든 상대 URL이 사용할 기준 URL을 지정합니다. 문서에는 단 하나의 `<base>` 요소만 존재할 수 있습니다.
+
+### link
+
+현재 문서와 외부 리소스의 관계를 명시합니다. 일반적으로 CSS 문서를 연결하는데 사용되며, 파비콘 등의 아이콘을 연결하는데에도 사용됩니다.
+
+- href
+
+- hreflang
+
+- rel
+
+  alternate | author | bookmark | canonical | external | icon |license | manifest | nofollow | stylesheet | prev | next
+
+- type
+
+- media
+
+- disabled
+
+
+```html
+<link href="basic.css" rel="alternate stylesheet" title="Basic">
+<link rel="icon" href="favicon32.png">
+```
+
+### meta
+
+다른 메타관련 요소로 나타낼 수 없는 메타데이터를 나타냅니다.
+
+- charset
+
+- name
+
+  application-name | author | description | generator | keywords | referrer |theme-color | color-scheme |creator |robots | publisher | viewport
+
+- content
+
+- http-equiv
+
+
+```html
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="description" content="Describe about the document.">
+```
+
+### style
+
+문서나 문서 일부에 대한 스타일 정보를 포함합니다.
+
+```html
+<style type="text/css">
+    p {color: red;}
+</style>
+```
+
+### title
+
+브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목을 정의합니다. 요소 내에는 텍스트만 사용할 수 있으며, 태그는 무시됩니다.
+
+### body
+
+HTML 문서의 내용을 나타냅니다. 한 문서에 하나의 `<body>` 요소만 존재할 수 있습니다.
+
+### script
+
+실행 가능한 코드를 문서에 포함하거나 참조할 때 사용합니다. 보통 JavaScript 코드와 함께 쓰지만, WebGL의 GLSL 셰이더 프로그래밍 언어 등 다른 언어와도 사용할 수 있습니다.
+
+### noscript
+
+페이지의 스크립트 유형을 지원하지 않거나, 브라우저가 스크립트를 비활성화한 경우 보여줄 HTML 구획을 정의합니다.
+
+https://developer.mozilla.org/en-US/docs/Web/HTML/Element
--- a/Writerside/topics/Paragraph.md
+++ b/Writerside/topics/Paragraph.md
@@ -0,0 +1,318 @@
+# 텍스트
+
+## Headings
+
+### h1, h2, h3, h4, h5, h6
+
+구획 제목을 나타냅니다. 구획 단계는 `<h1>`이 가장 높고 `<h6>`은 가장 낮습니다.
+
+### hgroup
+
+문서 구획의 다단계 제목을 나타냅니다. 다수의 `<h1>` ~ `<h6>` 요소를 묶을 때 사용합니다.
+
+```html
+<hgroup>
+    <h1>Calculus I</h1>
+    <h2>Fundamentals</h2>
+</hgroup>
+<p>This course will start with a brief introduction about the limit of a function. Then we will describe how the idea of derivative emerges in the Physics and Geometry fields. After that, we will explain that the key to master calculus is …</p>
+```
+
+## Paragraph
+
+### p
+
+하나의 문단을 나타냅니다.
+
+### pre
+
+미리 서식을 지정한 텍스트를 나타내며, HTML에 작성한 내용 그대로 표현합니다.
+
+```html
+<p>Some species live in houses where they hunt insects attracted by artificial light.</p>
+```
+
+## 강조
+
+### em
+
+텍스트의 강조를 나타냅니다. `<em>` 요소를 중첩하면 더 큰 강세를 뜻하게 됩니다.
+
+### strong
+
+중대하거나 긴급한 콘텐츠를 나타냅니다. 보통 브라우저는 굵은 글씨로 표시합니다.
+
+### mark
+
+현재 맥락에 관련이 깊거나 중요해 표시 또는 하이라이트한 부분을 나타냅니다.
+
+### i
+
+텍스트에서 어떤 이유로 주위와 구분해야 하는 부분을 나타냅니다.
+
+### b
+
+독자의 주의를 요소의 콘텐츠로 끌기 위한 용도로 사용합니다. 그 외의 다른 특별한 중요도는 주어지지 않습니다.
+
+### u
+
+글자로 표현하지 않는 주석을 가진 것으로 렌더링 해야 하는 텍스트를 나타냅니다.
+
+### s
+
+글자에 취소선, 즉 글자를 가로지르는 선을 그립니다.
+
+### ~~strike~~
+
+글자에 취소선을 그립니다.
+
+## 수정
+
+### ins
+
+문서에 추가된 텍스트의 범위를 나타냅니다.
+
+### del
+
+문서에서 제거된 텍스트의 범위를 나타냅니다.
+
+### small
+
+덧붙이는 글이나, 저작권과 법률 표기 등의 작은 텍스트를 나타냅니다.
+
+```html
+<p>I am <em>glad</em> you weren't <em>late</em>.</p>
+```
+
+```html
+<p>This liquid is <strong>highly toxic</strong>.</p>
+```
+
+### ~~big~~
+
+포함된 텍스트를 주변 텍스트보다 한 수준 더 큰 글꼴 크기로 렌더링합니다.
+
+### ~~tt~~
+
+모노스페이스 글꼴을 사용하여 표시합니다.
+
+## 인용
+
+### blockquote
+
+안쪽의 텍스트가 긴 인용문임을 나타냅니다. 주로 들여쓰기를 한 것으로 그려집니다. 인용문의 출처 URL은 cite 속성으로, 출처 텍스트는 `<cite>` 요소로 제공할 수 있습니다.
+
+- cite
+
+```html
+<p>Here below is a blockquote..</p>
+<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
+  <p>The <strong>HTML <code><blockquote></code> Element</strong> (or <em>HTML Block
+  Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
+</blockquote>
+```
+
+### q
+
+둘러싼 텍스트가 짧은 인라인 인용문이라는것을 나타냅니다.
+
+- cite
+
+```html
+<p>The quote element — <code><q></code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
+for short quotations that don't require paragraph breaks.</q></p>
+```
+
+### cite
+
+저작물의 출처를 표기할 때 사용하며, 제목을 반드시 포함해야 합니다.
+
+- title
+
+```html
+<p>According to the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
+<cite>MDN blockquote page</cite></a>:
+</p>
+
+<p>The quote element — <code><q></code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
+for short quotations that don't require paragraph breaks.</q> -- <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">
+<cite>MDN q page</cite></a>.</p>
+```
+
+## 단축
+
+### abbr
+
+준말 또는 머리글자를 나타냅니다.
+
+- title
+
+```html
+<p>I think <abbr title="Reverend">Rev.</abbr> Green did it in the kitchen with the chainsaw.</p>
+```
+
+## ### ~~acronym~~
+
+단어의 두문자어 또는 약어를 표시합니다.
+
+## 정의
+
+### dfn
+
+현재 맥락이나 문장에서 정의하고 있는 용어를 나타냅니다. `<dfn>`에서 가장 가까운 `<p>`, `<dt>`/`<dd>` 쌍, `<section>` 조상 요소를 용어 정의로 간주합니다.
+
+```html
+<p>A <dfn id="def-validator">validator</dfn> is a program that checks for syntax errors in code or documents.</p>
+```
+
+## 루비
+
+### ruby
+
+루비 주석을 나타냅니다. 루비 주석은 동아시아 문자의 발음을 표기할 때 사용합니다.
+
+### ~~rb~~
+
+`<ruby>` 표기의 기반 텍스트 구성요소(루비 주석을 적용하려는 글자)를 나눌 때 사용합니다.
+
+### rt
+
+동아시아 문자의 루비 주석에서 발음, 번역 등을 나타내는 텍스트 부분을 지정합니다.
+
+### rp
+
+`<ruby>` 요소를 사용한 루비 주석을 지원하지 않는 경우 보여줄 괄호를 제공할 때 사용합니다.
+
+```html
+<ruby>
+明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp>
+</ruby>
+```
+
+## 첨자
+
+### sub
+
+활자 배치를 아래 첨자로 해야 하는 인라인 텍스트를 지정합니다.
+
+### sup
+
+활자 배치를 위 첨자로 해야 하는 인라인 텍스트를 지정합니다.
+
+```html
+<p>My birthday is on the 25<sup>th</sup> of May 2001.</p>
+<p>If x<sup>2</sup> is 9, x must equal 3 or -3.</p>
+```
+
+## 코드
+
+### code
+
+짧은 코드 조각을 나타내는 스타일을 사용해 자신의 콘텐츠를 표시합니다.
+
+### var
+
+수학 표현 또는 프로그래밍에서 변수의 이름을 나타냅니다.
+
+### kbd
+
+키보드 입력, 음성 입력 등 임의의 장치를 사용한 사용자의 입력을 나타냅니다.
+
+### samp
+
+컴퓨터 프로그램 출력의 예시(혹은 인용문)를 나타냅니다.
+
+```html
+<pre><code>var para = document.querySelector('p');
+
+para.onclick = function() {
+  alert('Owww, stop poking me!');
+}</code></pre>
+
+<p>Select all the text with <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p>
+
+<p>In the above JavaScript example, <var>para</var> represents a paragraph element.</p>
+```
+
+## 데이터
+
+### data
+
+주어진 콘텐츠를 기계가 읽을 수 있는 해석본과 연결합니다.
+
+- value
+
+```html
+<ul>
+    <li><data value="398">Mini Ketchup</data></li>
+    <li><data value="399">Jumbo Ketchup</data></li>
+    <li><data value="400">Mega Jumbo Ketchup</data></li>
+</ul>
+```
+
+## 시간
+
+### time
+
+시간의 특정 지점 또는 구간을 나타냅니다.
+
+- datetime
+
+```html
+<time datetime="2016-01-20">20 January 2016</time>
+<time datetime="2016-01-20T19:30+01:00">7.30pm, 20 January 2016 is 8.30pm in France</time>
+```
+
+## 주소 또는 연락처
+
+### address
+
+가까운 HTML요소의 주소나 연락처 정보를 나타냅니다.
+
+```html
+<address>
+  <a href="mailto:jim@rock.com">jim@rock.com</a><br>
+  <a href="tel:+13115552368">(311) 555-2368</a>
+</address>
+```
+
+## 링크
+
+### a
+
+다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만듭니다.
+
+- href
+
+  http: | mailto: | tel:
+
+- download
+
+  다운로드 할지를 묻는 대화상자가 표시됩니다.
+
+- target
+
+  _self | _blank | _parent | _top
+
+
+```html
+<p>I'm creating a link to
+<a href="https://www.mozilla.org/en-US/">the Mozilla homepage</a>.
+</p>
+```
+
+## 줄바꿈
+
+### br
+
+텍스트 안에 줄바꿈(캐리지 리턴)을 생성합니다. 주소나 시조 등 줄의 구분이 중요한 내용을 작성할 때 유용합니다.
+
+### wbr
+
+현재 요소의 줄 바꿈 규칙을 무시하고 브라우저가 줄을 바꿀 수 있는 위치를 나타냅니다.
+
+## 수평선
+
+### hr
+
+이야기 장면 전환, 구획 내 주제 변경 등, 문단 레벨 요소에서 주제의 분리를 나타냅니다.
--- a/Writerside/topics/Pingback.md
+++ b/Writerside/topics/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/Writerside/topics/Refback.md
+++ b/Writerside/topics/Refback.md
@@ -0,0 +1,3 @@
+# Refback
+
+https://en.wikipedia.org/wiki/Refback
--- a/Writerside/topics/Robots.md
+++ b/Writerside/topics/Robots.md
@@ -0,0 +1,5 @@
+# Robots.txt
+
+http://www.robotstxt.org/
+
+http://humanstxt.org/
--- a/Writerside/topics/Rss.md
+++ b/Writerside/topics/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/Writerside/topics/Section.md
+++ b/Writerside/topics/Section.md
@@ -0,0 +1,39 @@
+# Sections
+
+### header
+
+소개 및 탐색에 도움을 주는 콘텐츠를 나타냅니다. 제목, 로고, 검색 폼, 작성자 이름 등의 요소도 포함할 수 있습니다.
+
+### footer
+
+가장 가까운 구획 콘텐츠나 구획 루트의 푸터를 나타냅니다. 푸터는 일반적으로 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 담습니다.
+
+### nav
+
+문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획을 나타냅니다. 자주 쓰이는 예제는 메뉴, 목차, 색인입니다.
+
+### aside
+
+문서의 주요 내용과 간접적으로만 연관된 부분을 나타냅니다. 주로 사이드바 혹은 콜아웃 박스로 표현합니다.
+
+### main
+
+문서 `<body>`의 주요 콘텐츠를 나타냅니다. 주요 콘텐츠 영역은 문서의 핵심 주제나 앱의 핵심 기능에 직접적으로 연결됐거나 확장하는 콘텐츠로 이루어집니다.
+
+### article
+
+문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타냅니다.
+
+### section
+
+HTML 문서의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용합니다.
+
+## non-semantic wrappers
+
+### div
+
+플로우 콘텐츠를 위한 통용 컨테이너입니다. CSS로 꾸미기 전에는 콘텐츠나 레이아웃에 어떤 영향도 주지 않습니다.
+
+### span
+
+구문 콘텐츠를 위한 통용 인라인 컨테이너로, 본질적으로는 아무것도 나타내지 않습니다. 스타일을 적용하기 위해서, 또는 lang 등 어떤 특성의 값을 서로 공유하는 요소를 묶을 때 사용할 수 있습니다.
--- a/Writerside/topics/Seo.md
+++ b/Writerside/topics/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/Writerside/topics/Shadow-DOM.md
+++ b/Writerside/topics/Shadow-DOM.md
@@ -0,0 +1,3 @@
+# Shadow DOM
+
+Start typing here...
--- a/Writerside/topics/Sitemap.md
+++ b/Writerside/topics/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/Writerside/topics/Syndication.md
+++ b/Writerside/topics/Syndication.md
@@ -0,0 +1,3 @@
+# Syndication
+
+Start typing here...
--- a/Writerside/topics/Table.md
+++ b/Writerside/topics/Table.md
@@ -0,0 +1,62 @@
+# 테이블
+
+### table
+
+행과 열로 이루어진 표를 나타냅니다.
+
+### tr
+
+### th
+
+### td
+
+데이터를 포함하는 표의 셀을 정의합니다.
+
+### thead
+
+### tbody
+
+표의 여러 행(<tr>)을 묶어서 표 본문을 구성합니다.
+
+### tfoot
+
+### caption
+
+표의 설명 또는 제목을 나타냅니다.
+
+### colgroup
+
+표의 열을 묶는 그룹을 정의합니다.
+
+### col
+
+표의 열을 나타내며, 열에 속하는 칸에 공통된 의미를 부여할 때 사용합니다.
+
+```html
+<table>
+  <colgroup>
+    <col>
+    <col style="background-color: yellow">
+  </colgroup>
+  <tr>
+    <th>Data 1</th>
+    <th>Data 2</th>
+  </tr>
+  <tr>
+    <td>Calcutta</td>
+    <td>Pizza</td>
+  </tr>
+  <tr>
+    <td>Robots</td>
+    <td>Jazz</td>
+  </tr>
+</table>
+```
+
+```html
+<table>
+  <caption>Dinosaurs in the Jurassic period</caption>
+
+  ...
+</table>
+```
--- a/Writerside/topics/Template-and-Slot.md
+++ b/Writerside/topics/Template-and-Slot.md
@@ -0,0 +1,10 @@
+# Template and Slot
+
+## slot
+
+웹 컴포넌트 사용자가 자신만의 마크업으로 채워 별도의 DOM 트리를 생성하고, 컴포넌트와 함께 표현할 수 있는 웹 컴포넌트 내부의 플레이스홀더입니다.
+
+## template
+
+페이지를 불러온 순간 즉시 그려지지는 않지만, 이후 JavaScript를 사용해 인스턴스를 생성할 수 있는 HTML 코드를 담을 방법을 제공합니다.
+
--- a/Writerside/topics/Trackback.md
+++ b/Writerside/topics/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/Writerside/topics/Url.md
+++ b/Writerside/topics/Url.md
@@ -0,0 +1,3 @@
+# Url
+
+Start typing here...
--- a/Writerside/topics/Web-Forms.md
+++ b/Writerside/topics/Web-Forms.md
@@ -1,24 +1,24 @@
 # 웹 폼


-* button : 클릭할 수 있는 버튼입니다.
+* button : 클릭할 수 있는 버튼입니다. 버튼은 양식 내부는 물론 간단한 표준 버튼 기능이 필요한 곳이라면 문서 어디에나 배치할 수 있습니다.
  * autofocus
  * disabled
  * form : 요소가 속한 form을 나타냅니다.
  * name, value
-  * type
+  * type : submit | reset | button
 * input : 사용자 입력 폼입니다.
-  * accept
+  * accept : 파일 형식을 지정합니다. file 형식에만 적용할 수 있습니다.
  * autocomplete : 웹 브라우저의 자동 완성 기능을 사용하는지 여부를 나타냅니다.
  * autofocus
-  * checked
+  * checked : radio, chcekbox에만 적용할 수 있습니다.
  * dirname
  * disabled
  * form
-  * list : 사전 정의된 옵션 목롣입니다.
-  * min, max
-  * maxlength
-  * multiple
+  * list : 사전 정의된 옵션 목록입니다. ```<datalist>```와 연결합니다.
+  * min, max, step : number 타입에만 적용할 수 있습니다. 실수의 경우 ```step="0.1"``` 또는 ```step="any"``` 등으로 지정할 수 있습니다.
+  * maxlength, minlength
+  * multiple : email, file에만 적용할 수 있습니다. 여러 항목을 입력받을 때 사용합니다.
  * name, value
  * pattern
  * placeholder
@@ -26,8 +26,14 @@
  * required
  * size
  * src
-  * step
  * 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
@@ -40,7 +46,7 @@
  * placeholder
  * readonly
  * required
-  * wrap
+  * wrap : soft | hard | wrap
 * select : 사용자가 선택할 수 있는 옵션 메뉴입니다.
  * autofocus
  * disabled
@@ -55,17 +61,53 @@
  * 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-cgarset
+  * accept-charset
  * action
-  * autocomplete
-  * enctype : POST 전송 데이터의 타입을 지정합니다.
-  * method
+  * autocomplete : on | off
+  * enctype : POST 전송 데이터의 타입을 지정합니다. application/x-www-form-urlencoded | multipart/form-data | text/plain
+  * method : post | get
  * name
  * novalidate
  * target
@@ -74,6 +116,48 @@
  * 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
@@ -83,10 +167,17 @@
 * output : 계산 결과를 나타냅니다.
  * for
  * form
-  * name
+  * 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
-
-
+  * value
--- a/Writerside/topics/WebComponents.md
+++ b/Writerside/topics/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/Writerside/topics/Webmention.md
+++ b/Writerside/topics/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/Writerside/topics/XML-Rpc.md
+++ b/Writerside/topics/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/