2024-06-21
This commit is contained in:
@@ -12,8 +12,41 @@
|
|||||||
start-page="starter-topic.md">
|
start-page="starter-topic.md">
|
||||||
|
|
||||||
<toc-element topic="starter-topic.md">
|
<toc-element topic="starter-topic.md">
|
||||||
|
<toc-element topic="Boiler-Plate.md"/>
|
||||||
|
<toc-element topic="Meta.md"/>
|
||||||
|
<toc-element topic="Paragraph.md"/>
|
||||||
|
<toc-element topic="List.md"/>
|
||||||
|
<toc-element topic="Section.md"/>
|
||||||
|
<toc-element topic="Embed.md"/>
|
||||||
|
<toc-element topic="Table.md"/>
|
||||||
<toc-element topic="Web-Forms.md">
|
<toc-element topic="Web-Forms.md">
|
||||||
<toc-element topic="Input.md"/>
|
<toc-element topic="Input.md"/>
|
||||||
</toc-element>
|
</toc-element>
|
||||||
|
<toc-element topic="Interaction.md"/>
|
||||||
|
<toc-element topic="WebComponents.md">
|
||||||
|
<toc-element topic="Custom-Element.md"/>
|
||||||
|
<toc-element topic="Shadow-DOM.md"/>
|
||||||
|
<toc-element topic="Template-and-Slot.md"/>
|
||||||
|
</toc-element>
|
||||||
|
<toc-element topic="Composing-Email.md"/>
|
||||||
|
<toc-element topic="HTTP.md">
|
||||||
|
<toc-element topic="Http-Request.md"/>
|
||||||
|
<toc-element topic="Url.md"/>
|
||||||
|
<toc-element topic="Robots.md"/>
|
||||||
|
<toc-element topic="Sitemap.md"/>
|
||||||
|
<toc-element topic="XML-Rpc.md"/>
|
||||||
|
<toc-element topic="Json-Rpc.md"/>
|
||||||
|
<toc-element topic="Syndication.md">
|
||||||
|
<toc-element topic="Rss.md"/>
|
||||||
|
<toc-element topic="Atom.md"/>
|
||||||
|
</toc-element>
|
||||||
|
<toc-element topic="Linkback.md">
|
||||||
|
<toc-element topic="Refback.md"/>
|
||||||
|
<toc-element topic="Trackback.md"/>
|
||||||
|
<toc-element topic="Pingback.md"/>
|
||||||
|
<toc-element topic="Webmention.md"/>
|
||||||
|
</toc-element>
|
||||||
|
<toc-element topic="Seo.md"/>
|
||||||
|
</toc-element>
|
||||||
</toc-element>
|
</toc-element>
|
||||||
</instance-profile>
|
</instance-profile>
|
||||||
59
Writerside/topics/Atom.md
Normal file
59
Writerside/topics/Atom.md
Normal file
@@ -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
|
||||||
132
Writerside/topics/Boiler-Plate.md
Normal file
132
Writerside/topics/Boiler-Plate.md
Normal file
@@ -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>
|
||||||
|
|
||||||
|
바디에는 웹 브라우저에 표시되는 실제 내용을 기술합니다.
|
||||||
335
Writerside/topics/Composing-Email.md
Normal file
335
Writerside/topics/Composing-Email.md
Normal file
@@ -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' }
|
||||||
|
```
|
||||||
3
Writerside/topics/Custom-Element.md
Normal file
3
Writerside/topics/Custom-Element.md
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
# Custom Element
|
||||||
|
|
||||||
|
Start typing here...
|
||||||
272
Writerside/topics/Embed.md
Normal file
272
Writerside/topics/Embed.md
Normal file
@@ -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>
|
||||||
|
```
|
||||||
3
Writerside/topics/HTTP.md
Normal file
3
Writerside/topics/HTTP.md
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
# HTTP
|
||||||
|
|
||||||
|
Start typing here...
|
||||||
55
Writerside/topics/Http-Request.md
Normal file
55
Writerside/topics/Http-Request.md
Normal file
@@ -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 버전
|
||||||
|
- 상태 코드
|
||||||
|
- 상태 메시지
|
||||||
|
|
||||||
|
## 헤더
|
||||||
|
|
||||||
|
## 메시지 본문
|
||||||
@@ -28,6 +28,32 @@
|
|||||||
<input type="checkbox" id="questionOne" name="subscribe" value="yes" checked />
|
<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
|
* submit
|
||||||
@@ -57,3 +83,18 @@
|
|||||||
## 색상 선택 타입
|
## 색상 선택 타입
|
||||||
|
|
||||||
* 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>
|
||||||
|
```
|
||||||
80
Writerside/topics/Interaction.md
Normal file
80
Writerside/topics/Interaction.md
Normal file
@@ -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>
|
||||||
|
```
|
||||||
41
Writerside/topics/Json-Rpc.md
Normal file
41
Writerside/topics/Json-Rpc.md
Normal file
@@ -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/
|
||||||
3
Writerside/topics/Linkback.md
Normal file
3
Writerside/topics/Linkback.md
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
# Linkback
|
||||||
|
|
||||||
|
Start typing here...
|
||||||
69
Writerside/topics/List.md
Normal file
69
Writerside/topics/List.md
Normal file
@@ -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>
|
||||||
|
```
|
||||||
86
Writerside/topics/Meta.md
Normal file
86
Writerside/topics/Meta.md
Normal file
@@ -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
|
||||||
318
Writerside/topics/Paragraph.md
Normal file
318
Writerside/topics/Paragraph.md
Normal file
@@ -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
|
||||||
|
|
||||||
|
이야기 장면 전환, 구획 내 주제 변경 등, 문단 레벨 요소에서 주제의 분리를 나타냅니다.
|
||||||
114
Writerside/topics/Pingback.md
Normal file
114
Writerside/topics/Pingback.md
Normal file
@@ -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
|
||||||
3
Writerside/topics/Refback.md
Normal file
3
Writerside/topics/Refback.md
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
# Refback
|
||||||
|
|
||||||
|
https://en.wikipedia.org/wiki/Refback
|
||||||
5
Writerside/topics/Robots.md
Normal file
5
Writerside/topics/Robots.md
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
# Robots.txt
|
||||||
|
|
||||||
|
http://www.robotstxt.org/
|
||||||
|
|
||||||
|
http://humanstxt.org/
|
||||||
56
Writerside/topics/Rss.md
Normal file
56
Writerside/topics/Rss.md
Normal file
@@ -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
|
||||||
39
Writerside/topics/Section.md
Normal file
39
Writerside/topics/Section.md
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
# Sections
|
||||||
|
|
||||||
|
### header
|
||||||
|
|
||||||
|
소개 및 탐색에 도움을 주는 콘텐츠를 나타냅니다. 제목, 로고, 검색 폼, 작성자 이름 등의 요소도 포함할 수 있습니다.
|
||||||
|
|
||||||
|
### footer
|
||||||
|
|
||||||
|
가장 가까운 구획 콘텐츠나 구획 루트의 푸터를 나타냅니다. 푸터는 일반적으로 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 담습니다.
|
||||||
|
|
||||||
|
### nav
|
||||||
|
|
||||||
|
문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획을 나타냅니다. 자주 쓰이는 예제는 메뉴, 목차, 색인입니다.
|
||||||
|
|
||||||
|
### aside
|
||||||
|
|
||||||
|
문서의 주요 내용과 간접적으로만 연관된 부분을 나타냅니다. 주로 사이드바 혹은 콜아웃 박스로 표현합니다.
|
||||||
|
|
||||||
|
### main
|
||||||
|
|
||||||
|
문서 `<body>`의 주요 콘텐츠를 나타냅니다. 주요 콘텐츠 영역은 문서의 핵심 주제나 앱의 핵심 기능에 직접적으로 연결됐거나 확장하는 콘텐츠로 이루어집니다.
|
||||||
|
|
||||||
|
### article
|
||||||
|
|
||||||
|
문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타냅니다.
|
||||||
|
|
||||||
|
### section
|
||||||
|
|
||||||
|
HTML 문서의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용합니다.
|
||||||
|
|
||||||
|
## non-semantic wrappers
|
||||||
|
|
||||||
|
### div
|
||||||
|
|
||||||
|
플로우 콘텐츠를 위한 통용 컨테이너입니다. CSS로 꾸미기 전에는 콘텐츠나 레이아웃에 어떤 영향도 주지 않습니다.
|
||||||
|
|
||||||
|
### span
|
||||||
|
|
||||||
|
구문 콘텐츠를 위한 통용 인라인 컨테이너로, 본질적으로는 아무것도 나타내지 않습니다. 스타일을 적용하기 위해서, 또는 lang 등 어떤 특성의 값을 서로 공유하는 요소를 묶을 때 사용할 수 있습니다.
|
||||||
5
Writerside/topics/Seo.md
Normal file
5
Writerside/topics/Seo.md
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
# SEO
|
||||||
|
|
||||||
|
https://developers.google.com/search/docs/advanced/guidelines/get-started?hl=ko
|
||||||
|
|
||||||
|
https://searchadvisor.naver.com/guide
|
||||||
3
Writerside/topics/Shadow-DOM.md
Normal file
3
Writerside/topics/Shadow-DOM.md
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
# Shadow DOM
|
||||||
|
|
||||||
|
Start typing here...
|
||||||
37
Writerside/topics/Sitemap.md
Normal file
37
Writerside/topics/Sitemap.md
Normal file
@@ -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
|
||||||
3
Writerside/topics/Syndication.md
Normal file
3
Writerside/topics/Syndication.md
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
# Syndication
|
||||||
|
|
||||||
|
Start typing here...
|
||||||
62
Writerside/topics/Table.md
Normal file
62
Writerside/topics/Table.md
Normal file
@@ -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>
|
||||||
|
```
|
||||||
10
Writerside/topics/Template-and-Slot.md
Normal file
10
Writerside/topics/Template-and-Slot.md
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
# Template and Slot
|
||||||
|
|
||||||
|
## slot
|
||||||
|
|
||||||
|
웹 컴포넌트 사용자가 자신만의 마크업으로 채워 별도의 DOM 트리를 생성하고, 컴포넌트와 함께 표현할 수 있는 웹 컴포넌트 내부의 플레이스홀더입니다.
|
||||||
|
|
||||||
|
## template
|
||||||
|
|
||||||
|
페이지를 불러온 순간 즉시 그려지지는 않지만, 이후 JavaScript를 사용해 인스턴스를 생성할 수 있는 HTML 코드를 담을 방법을 제공합니다.
|
||||||
|
|
||||||
49
Writerside/topics/Trackback.md
Normal file
49
Writerside/topics/Trackback.md
Normal file
@@ -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>
|
||||||
|
```
|
||||||
3
Writerside/topics/Url.md
Normal file
3
Writerside/topics/Url.md
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
# Url
|
||||||
|
|
||||||
|
Start typing here...
|
||||||
@@ -1,24 +1,24 @@
|
|||||||
# 웹 폼
|
# 웹 폼
|
||||||
|
|
||||||
|
|
||||||
* button : 클릭할 수 있는 버튼입니다.
|
* button : 클릭할 수 있는 버튼입니다. 버튼은 양식 내부는 물론 간단한 표준 버튼 기능이 필요한 곳이라면 문서 어디에나 배치할 수 있습니다.
|
||||||
* autofocus
|
* autofocus
|
||||||
* disabled
|
* disabled
|
||||||
* form : 요소가 속한 form을 나타냅니다.
|
* form : 요소가 속한 form을 나타냅니다.
|
||||||
* name, value
|
* name, value
|
||||||
* type
|
* type : submit | reset | button
|
||||||
* input : 사용자 입력 폼입니다.
|
* input : 사용자 입력 폼입니다.
|
||||||
* accept
|
* accept : 파일 형식을 지정합니다. file 형식에만 적용할 수 있습니다.
|
||||||
* autocomplete : 웹 브라우저의 자동 완성 기능을 사용하는지 여부를 나타냅니다.
|
* autocomplete : 웹 브라우저의 자동 완성 기능을 사용하는지 여부를 나타냅니다.
|
||||||
* autofocus
|
* autofocus
|
||||||
* checked
|
* checked : radio, chcekbox에만 적용할 수 있습니다.
|
||||||
* dirname
|
* dirname
|
||||||
* disabled
|
* disabled
|
||||||
* form
|
* form
|
||||||
* list : 사전 정의된 옵션 목롣입니다.
|
* list : 사전 정의된 옵션 목록입니다. ```<datalist>```와 연결합니다.
|
||||||
* min, max
|
* min, max, step : number 타입에만 적용할 수 있습니다. 실수의 경우 ```step="0.1"``` 또는 ```step="any"``` 등으로 지정할 수 있습니다.
|
||||||
* maxlength
|
* maxlength, minlength
|
||||||
* multiple
|
* multiple : email, file에만 적용할 수 있습니다. 여러 항목을 입력받을 때 사용합니다.
|
||||||
* name, value
|
* name, value
|
||||||
* pattern
|
* pattern
|
||||||
* placeholder
|
* placeholder
|
||||||
@@ -26,8 +26,14 @@
|
|||||||
* required
|
* required
|
||||||
* size
|
* size
|
||||||
* src
|
* src
|
||||||
* step
|
|
||||||
* type
|
* 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
|
* usemap
|
||||||
* textarea : 여러 줄 텍스트 편집기입니다.
|
* textarea : 여러 줄 텍스트 편집기입니다.
|
||||||
* autofocus
|
* autofocus
|
||||||
@@ -40,7 +46,7 @@
|
|||||||
* placeholder
|
* placeholder
|
||||||
* readonly
|
* readonly
|
||||||
* required
|
* required
|
||||||
* wrap
|
* wrap : soft | hard | wrap
|
||||||
* select : 사용자가 선택할 수 있는 옵션 메뉴입니다.
|
* select : 사용자가 선택할 수 있는 옵션 메뉴입니다.
|
||||||
* autofocus
|
* autofocus
|
||||||
* disabled
|
* disabled
|
||||||
@@ -55,17 +61,53 @@
|
|||||||
* value
|
* value
|
||||||
* optgroup : select 요소 내의 option 요소들을 그룹화합니다.
|
* optgroup : select 요소 내의 option 요소들을 그룹화합니다.
|
||||||
* disabled
|
* 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 : 입력 폼에 대한 라벨입니다.
|
* label : 입력 폼에 대한 라벨입니다.
|
||||||
* for
|
* for
|
||||||
* form
|
* 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과 함께 사용됩니다.
|
* datalist : option과 함께 사용됩니다.
|
||||||
* form : 사용자의 데이터를 서버로 전송하는 상호작용 부분을 나타냅니다.
|
* form : 사용자의 데이터를 서버로 전송하는 상호작용 부분을 나타냅니다.
|
||||||
* accept
|
* accept
|
||||||
* accept-cgarset
|
* accept-charset
|
||||||
* action
|
* action
|
||||||
* autocomplete
|
* autocomplete : on | off
|
||||||
* enctype : POST 전송 데이터의 타입을 지정합니다.
|
* enctype : POST 전송 데이터의 타입을 지정합니다. application/x-www-form-urlencoded | multipart/form-data | text/plain
|
||||||
* method
|
* method : post | get
|
||||||
* name
|
* name
|
||||||
* novalidate
|
* novalidate
|
||||||
* target
|
* target
|
||||||
@@ -74,6 +116,48 @@
|
|||||||
* form
|
* form
|
||||||
* name
|
* name
|
||||||
* legend : fieldset 요소를 위한 라벨입니다.
|
* 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 : 알려진 범위 내의 값을 나타냅니다.
|
* meter : 알려진 범위 내의 값을 나타냅니다.
|
||||||
* form
|
* form
|
||||||
* high, low
|
* high, low
|
||||||
@@ -83,10 +167,17 @@
|
|||||||
* output : 계산 결과를 나타냅니다.
|
* output : 계산 결과를 나타냅니다.
|
||||||
* for
|
* for
|
||||||
* form
|
* 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 : 작업 진행 상태를 나타냅니다.
|
* progress : 작업 진행 상태를 나타냅니다.
|
||||||
* form
|
* form
|
||||||
* max
|
* max
|
||||||
* value
|
* value
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
20
Writerside/topics/WebComponents.md
Normal file
20
Writerside/topics/WebComponents.md
Normal file
@@ -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
|
||||||
|
```
|
||||||
70
Writerside/topics/Webmention.md
Normal file
70
Writerside/topics/Webmention.md
Normal file
@@ -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/
|
||||||
139
Writerside/topics/XML-Rpc.md
Normal file
139
Writerside/topics/XML-Rpc.md
Normal file
@@ -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/
|
||||||
Reference in New Issue
Block a user