2025-01-24T01:44:03

2025-01-24 01:44:03 +09:00
parent 297ea8abaf
commit 3d30ee3192
68 changed files with 1128 additions and 1079 deletions
--- a/doc/html5/00_HTML5.md
+++ b/doc/html5/00_HTML5.md
@@ -0,0 +1,51 @@
+# HTML 5
+HTML 태그는 웹 페이지의 구조와 내용을 정의하는 데 사용되는 기본 요소입니다. 다양한 기능을 가진 태그들이 있으며, 이들을 기능별로 분류하면 다음과 같이 나눌 수 있습니다.
+
+## 1. 문서 구조 태그
+* `<html>`: HTML 문서 전체를 감싸는 최상위 태그로, HTML 문서의 시작과 끝을 나타냅니다.
+* `<head>`: 문서의 메타데이터를 포함하는 부분입니다. 문서의 제목, 스타일 시트, 스크립트 등을 연결하는 곳입니다.
+* `<body>`: 실제로 보이는 웹 페이지의 내용이 들어가는 부분입니다.
+* `<title>`: 브라우저 탭에 표시되는 문서의 제목입니다.
+* `<meta>`: 문서에 대한 추가적인 정보를 제공하는 태그입니다.
+
+## 2. 텍스트 콘텐츠 태그
+* `<h1>` ~ `<h6>`: 제목을 나타내는 태그입니다. `<h1>`이 가장 큰 제목이고 `<h6>`이 가장 작은 제목입니다.
+* `<p>`: 단락을 나타냅니다.
+* `<span>`: 텍스트의 일부분을 묶어서 스타일을 적용하거나 스크립트를 연결할 때 사용합니다.
+* `<strong>`: 텍스트를 강조할 때 사용합니다.
+* `<em>`: 텍스트를 기울여 표시할 때 사용합니다.
+
+## 3. 목록 태그
+* `<ul>`: 불러온 목록(unordered list)을 나타냅니다.
+* `<ol>`: 순서가 있는 목록(ordered list)을 나타냅니다.
+* `<li>`: 목록의 각 항목을 나타냅니다.
+
+## 4. 링크 태그
+* `<a>`: 하이퍼링크를 생성하여 다른 페이지나 웹사이트로 이동할 수 있도록 합니다.
+
+## 5. 멀티미디어 태그
+* `<img>`: 이미지를 웹 페이지에 삽입합니다.
+* `<figure>`: 이미지, 차트, 짧은 비디오 클립 등의 콘텐츠와 캡션을 함께 묶어서 나타냅니다.
+* `<figcaption>`: `<figure>` 요소의 캡션을 나타냅니다.
+
+## 6. 테이블 태그
+* `<table>`: 테이블을 생성합니다.
+* `<tr>`: 테이블의 행을 나타냅니다.
+* `<td>`: 테이블의 셀을 나타냅니다.
+
+## 7. 폼 태그
+* `<form>`: 사용자 입력을 받는 폼을 생성합니다.
+* `<input>`: 다양한 종류의 입력 필드를 생성합니다 (텍스트, 비밀번호, 라디오 버튼, 체크박스 등).
+* `<button>`: 버튼을 생성합니다.
+
+## 8. 섹션 태그
+* `<div>`: 콘텐츠를 논리적으로 구분하는 섹션을 생성합니다.
+* `<main>`: 문서의 주요 내용을 담는 부분을 나타냅니다.
+* `<header>`: 섹션의 헤더 부분을 나타냅니다.
+* `<nav>`: 네비게이션 링크를 모아놓은 섹션을 나타냅니다.
+* `<section>`: 문서의 독립적인 섹션을 나타냅니다.
+* `<article>`: 독립적인 콘텐츠 블록을 나타냅니다.
+* `<aside>`: 본문과 관련된 부가적인 정보를 담는 사이드바를 나타냅니다.
+* `<footer>`: 섹션의 푸터 부분을 나타냅니다.
+
+
--- a/doc/html5/01_문서_구조.md
+++ b/doc/html5/01_문서_구조.md
@@ -0,0 +1,144 @@
+# 문서 구조
+HTML 문서의 기본적인 뼈대를 이루는 문서 구조 태그에 대해 자세히 알아보겠습니다. 이 태그들은 웹 페이지의 내용을 논리적으로 구분하고, 브라우저에게 문서의 구조를 알려주는 중요한 역할을 합니다.
+
+```html
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <title>HTML 문서 구조 예시</title>
+</head>
+<body>
+  <h1>제목입니다</h1>
+  <p>이것은 단락입니다.</p>
+</body>
+</html>
+```
+
+* `<!DOCTYPE html>`: HTML 문서의 유형을 선언하는 부분으로, 항상 문서의 맨 처음에 위치해야 합니다.
+
+
+## html
+HTML 문서 전체를 감싸는 최상위 태그입니다. 문서가 HTML 문서임을 선언하는 역할을 합니다.
+```html
+<html>
+</html>
+```
+* lang 속성: `<html>` 태그에 lang 속성을 추가하여 문서의 언어를 지정할 수 있습니다. (예: lang="ko")
+
+## head
+문서의 메타데이터를 포함하는 부분입니다. 문서의 제목, 스타일 시트 연결, 스크립트 연결 등이 이곳에 들어갑니다. 실제로 보이는 부분은 아니지만, 검색 엔진이나 브라우저에게 중요한 정보를 제공합니다.
+```html
+<head>
+  <title>HTML 문서 예시</title>
+  <meta charset="UTF-8">
+</head>
+```
+
+## title
+`<head>` 태그 안에 위치하며, 브라우저의 탭이나 검색 결과에 표시되는 문서의 제목을 설정합니다.
+
+## meta
+문서에 대한 추가적인 정보를 제공하는 태그입니다. 문서의 인코딩, 설명, 키워드 등을 설정할 수 있습니다.
+```html
+<meta charset="UTF-8"> <meta name="description" content="이 문서는 HTML 문서 구조에 대한 설명입니다.">
+```
+* charset: 문서의 문자 인코딩을 지정합니다. (예: UTF-8)
+* name: 추가적인 정보를 제공하기 위한 이름을 지정합니다.
+* content: name 속성에 해당하는 정보의 내용을 지정합니다.
+    - http-equiv: HTTP 헤더와 동일한 의미를 가지는 메타 태그를 정의합니다.
+    - X-UA-Compatible: IE 호환 모드 설정
+* refresh: 페이지 자동 새로 고침
+* expires: 캐시 유효 기간 설정
+* viewport: 모바일 기기에서 웹 페이지가 표시되는 방식을 제어합니다.
+    - width: viewport의 너비를 설정
+    - initial-scale: 초기 확대 비율 설정
+    - user-scalable: 사용자가 페이지를 확대/축소할 수 있는지 여부 설정
+* robots: 검색 엔진 크롤러에게 웹 페이지를 어떻게 처리할지 지시합니다. (index, noindex, follow, nofollow 등)
+* author: 문서의 저자를 지정합니다.
+* copyright: 저작권 정보를 지정합니다.
+* date: 문서의 생성 또는 수정 날짜를 지정합니다.
+
+```html
+<!-- 검색 엔진 최적화 (SEO) -->
+<meta name="description" content="웹 페이지에 대한 간략한 설명">
+<meta name="keywords" content="웹 페이지와 관련된 키워드">
+<!-- 소셜 미디어 공유 -->
+<meta property="og:title" content="페이스북 공유 시 표시되는 제목">
+<meta property="og:description" content="페이스북 공유 시 표시되는 설명">
+<meta property="og:image" content="페이스북 공유 시 표시되는 이미지 URL">
+<!-- 모바일 웹 -->
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<!-- 호환성 -->
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+```
+
+## base
+`<base>` 태그는 HTML 문서 내에서 모든 상대적인 URL의 기본 경로를 설정하는 데 사용됩니다. 즉, `<base>` 태그를 이용하면 문서 내의 모든 링크가 지정된 기본 경로를 기준으로 해석됩니다.
+HTML 문서 내에 `<base>` 태그는 한 번만 사용해야 하며, 반드시 `<head> `태그 안에 위치해야 합니다.
+```html
+<base href="https://example.com/images/" />
+```
+* href 속성: 기본 경로를 지정하는 필수 속성입니다. 절대 URL 또는 상대 URL을 사용할 수 있습니다.
+
+## link
+`<link>` 태그는 HTML 문서 내에서 현재 문서와 외부 리소스 간의 관계를 정의하는 데 사용됩니다. 즉, 외부 스타일 시트, 아이콘, RSS 피드 등 다양한 종류의 외부 파일을 연결하는 역할을 합니다.
+```html
+<!-- CSS 파일 연결 -->
+<link rel="stylesheet" href="styles.css">
+<!-- favicon 연결 -->
+<link rel="icon" href="favicon.ico">
+<!-- RSS 피드 연결 -->
+<link rel="alternate" type="application/rss+xml" title="RSS 피드" href="feed.xml">
+```
+* rel 속성: 링크의 관계를 나타내는 필수 속성입니다. (예: stylesheet, icon, alternate 등)
+* href 속성: 연결할 리소스의 URL을 지정하는 필수 속성입니다.
+* type: 리소스의 MIME 타입을 지정합니다.
+* media: 특정 미디어에만 적용할 스타일 시트를 지정합니다.
+* sizes: 아이콘의 크기를 지정합니다.
+
+## body
+실제로 웹 페이지에 보이는 모든 내용이 들어가는 부분입니다. 텍스트, 이미지, 링크 등 웹 페이지의 모든 콘텐츠는 `<body>` 태그 안에 위치합니다.
+```html
+<body>
+  <h1>제목입니다</h1>
+  <p>이것은 단락입니다.</p>
+</body>
+```
+
+## style
+HTML 문서의 스타일을 정의하는 데 사용되는 태그입니다. CSS(Cascading Style Sheets)를 직접 작성하여 웹 페이지의 디자인을 제어할 수 있습니다.
+```html
+<style>
+  /* CSS 스타일 정의 */
+  body {
+    background-color: lightblue;
+  }
+  h1 {
+    color: navy;
+  }
+</style>
+```
+`<head>` 태그 안에 위치하는 것이 일반적입니다.
+`<body>` 태그 안에 위치할 수도 있지만, `<head>` 태그 안에 위치하는 것이 권장됩니다.
+
+## script
+JavaScript 코드를 포함하여 웹 페이지에 동적인 기능을 추가하는 데 사용되는 태그입니다. 클릭 이벤트, 페이지 로딩 시 실행되는 기능 등 다양한 동작을 구현할 수 있습니다.
+```html
+<script>
+  // JavaScript 코드
+  alert("Hello, world!");
+</script>
+```
+`<head>` 태그 안 또는 `<body>` 태그 안에 위치할 수 있습니다.
+`<head>` 태그 안에 위치하면 페이지 로딩 시 스크립트가 실행되고, `<body>` 태그 안에 위치하면 페이지의 다른 콘텐츠가 모두 로드된 후에 스크립트가 실행됩니다.
+
+
+## noscript
+자바스크립트를 지원하지 않는 브라우저나 자바스크립트가 비활성화된 경우에 표시될 콘텐츠를 정의하는 태그입니다.
+```html
+<noscript>
+  자바스크립트가 지원되지 않습니다.
+</noscript>
+```
+`<body>` 태그 안에 위치하는 것이 일반적입니다.
--- a/doc/html5/02_텍스트
+++ b/doc/html5/02_텍스트
@@ -0,0 +1,180 @@
+# 텍스트 콘텐츠
+HTML에서 텍스트 콘텐츠를 표현하고 스타일링하는 데 사용되는 다양한 태그들을 살펴보겠습니다.
+
+## h1, h2, h3, h4, h5, h6
+
+웹 페이지의 제목이나 중요한 내용을 강조할 때 사용합니다. `<h1>`이 가장 큰 제목이고 `<h6>`이 가장 작은 제목입니다.
+
+```html
+<h1>최상위 제목</h1>
+<h2>중간 제목</h2>
+<h3>하위 제목</h3>
+```
+
+## p
+
+문단을 나눌 때 사용합니다. 브라우저는 자동으로 줄 바꿈을 하고 여백을 추가합니다.
+
+```html
+<p>이것은 첫 번째 단락입니다. <br>
+   두 번째 줄입니다.</p>
+```
+
+## 줄바꿈 : br, wbr
+
+* `<br>` : 한 줄을 강제로 바꿀 때 사용합니다. 블록 레벨 요소가 아니므로, 다른 블록 레벨 요소 안에 사용해야 합니다.
+* `<wbr>` : 단어 중간에 줄 바꿈이 가능한 위치를 지정하는 태그입니다.
+```html
+<p>첫 번째 줄<br>
+   두 번째 줄</p>
+<p>이것은매우긴단어입니다<wbr>!</p>
+```
+
+## div
+div 태그는 블록 레벨 요소로, 항상 새로운 줄에서 시작하여 전체 너비를 차지합니다.
+```html
+<div class="header">
+  <h1>웹 사이트 제목</h1>
+  <nav>
+    </nav>
+</div>
+```
+
+## span
+span 태그는 인라인 레벨 요소로, 주변 텍스트의 흐름을 방해하지 않고 특정 부분만 스타일을 적용할 수 있습니다.
+```html
+<p>이 문장에서 <span style="color: blue;">파란색</span> 부분만 색상을 변경했습니다.</p>
+```
+
+## hr
+
+구분선을 그을 때 사용합니다. 블록 레벨 요소입니다.
+
+```html
+<hr>
+```
+
+## 인용 : blockquote, q, cite
+
+* `<blockquote>` : 긴 인용문을 표시할 때 사용합니다.
+* `<q>` : 다른 출처에서 인용한 짧은 구절을 나타내는 데 사용됩니다. 
+
+```html
+<blockquote>
+  "인생은 짧고 예술은 길다."
+</blockquote>
+```
+```html
+<p>셰익스피어는 <q cite="https://www.example.com">To be, or not to be: that is the question.</q>라고 말했습니다.</p>
+```
+* `<cite>`: 인용문의 출처를 표시합니다.
+```html
+<p>“모든 지식은 경험에서 나온다.”는 <cite>존 로크</cite>의 말입니다.</p>
+```
+
+## 강조 태그: strong, b, em, i, mark
+
+* `<strong>`: 텍스트의 특정 부분을 매우 강조하고 싶을 때 사용합니다.
+* `<b>`: 텍스트를 굵게 표현하여 시각적으로 강조하고 싶을 때 사용합니다.
+* `<em>`: 텍스트의 특정 부분을 의미적으로 강조하고 싶을 때 사용합니다.
+* `<i>`: 텍스트를 기울여 표현하고 싶을 때 사용합니다.
+* `<mark>`: 텍스트의 특정 부분에 하이라이트를 적용하여 눈에 띄게 하고 싶을 때 사용합니다.
+
+```html
+<p>저는 <strong>웹 개발</strong>을 배우고 있습니다. 특히 <strong>HTML</strong>과 <strong>CSS</strong>가 재미있습니다. 
+  <i>JavaScript</i>도 배우고 싶은데, 아직 어렵네요. 
+  <mark>함께 공부할 사람</mark>을 찾고 있습니다.</p>
+```
+
+* strong과 b: 둘 다 텍스트를 굵게 표현하지만, strong은 의미적으로 중요한 부분을 강조하는 데 사용하는 것이 좋습니다.
+* em과 i: 둘 다 텍스트를 기울여 표현하지만, em은 논리적으로 강조하는 부분에 사용하고, i는 외국어, 기술 용어 등을 표현하는 데 사용하는 것이 일반적입니다.
+
+## 그 외
+
+* `<pre>`: 텍스트의 들여쓰기, 줄 바꿈 등을 그대로 유지하여 출력합니다. 주로 코드 블록을 표현할 때 사용합니다.
+    ```html
+    <pre><code>
+    function factorial(n) {
+    if (n === 0) {
+        return 1;
+    }
+    return n * factorial(n - 1);
+    }
+    </code></pre>
+    ```
+* `<address>`: 문서의 저자 또는 연락처 정보를 표시합니다.
+    ```html
+    <address>
+    Written by: John Doe<br>
+    Contact: <a href="mailto:john@example.com">john@example.com</a>
+    </address>
+    ```
+* `<abbr>`: 약어를 표시하고, 마우스를 올리면 전체 단어를 보여줄 수 있습니다.
+    ```html
+    <p>HTML은 <abbr title="HyperText Markup Language">HyperText Markup Language</abbr>의 약자입니다.</p>
+    ```
+* `<code>`: 컴퓨터 코드를 표시합니다. 일반적으로 `<pre>` 태그와 함께 사용하여 코드 블록을 형성합니다.
+* `<del>`: 삭제된 텍스트를 표시합니다.
+    ```html
+    <p>이 문장에서 <del>삭제된 부분</del>은 더 이상 필요하지 않습니다.</p>
+    ```
+* `<dfn>`: 어떤 글이나 문서에서 처음 등장하는 용어를 설명하거나 정의할 때 사용합니다.
+    ```html
+    <p>HTML에서 <dfn>요소</dfn>는 특정 용어를 정의할 때 사용합니다.</p>
+    ```
+* `<ins>`: 추가된 텍스트를 표시합니다.
+    ```html
+    <p>원래 문장은 다음과 같았습니다. <ins>추가된 부분</ins></p>
+    ```
+* `<small>`: 작은 글자로 표시합니다.
+    ```html
+    <p>본문 내용<small>(저작권 정보)</small></p>
+    ```
+* `<sub>`: 아래 첨자를 표시합니다. 주로 화학식이나 수학 공식에서 사용됩니다.
+    ```html
+    <p>물의 화학식은 H<sub>2</sub>O입니다.</p>
+    ```
+* `<sup>`: 위 첨자를 표시합니다. 주로 지수 표현이나 단위 표현에서 사용됩니다.
+    ```html
+    <p>10의 3승은 10<sup>3</sup>입니다.</p>
+    ```
+* `<var>` : 변수를 나타내는 태그입니다. 주로 수학 공식이나 프로그래밍 코드에서 변수를 표시할 때 사용됩니다.
+    ```html
+    <p>피타고라스의 정리: <var>a</var>² + <var>b</var>² = <var>c</var>²</p>
+    ```
+* `<kbd>` : 키보드 입력을 나타내는 태그입니다. 사용자가 직접 입력해야 하는 키를 표시할 때 사용됩니다.
+    ```html
+    <p>파일을 저장하려면 <kbd>Ctrl+S</kbd>를 누르세요.</p>
+    ```
+* `<samp>` : 컴퓨터 프로그램의 샘플 출력이나 인용된 출력을 나타내는 태그입니다.
+    ```html
+    <p>프로그램 실행 결과: <samp>Hello, world!</samp></p>
+    ```
+* `<time>` : 특정 시간 또는 기간을 나타내는 태그입니다. 검색 엔진이나 보조 기술이 시간 정보를 더 잘 이해할 수 있도록 돕습니다.
+    - datetime 속성: 정확한 시간 정보를 ISO 8601 형식으로 표기합니다.
+    ```html
+    <time datetime="YYYY-MM-DDTHH:MM:SS">2023년 12월 31일</time>
+    ```
+
+## 루비
+루비(Ruby) 태그는 주로 동아시아 언어, 특히 일본어에서 한자어의 발음을 표기하는 데 사용되는 HTML 태그입니다.
+* `<ruby>`: 루비 주석 전체를 감싸는 요소입니다.
+* `<rb>`: 루비 기본 문자(루비를 붙일 문자)를 나타냅니다.
+* `<rt>`: 루비 주석(발음)을 나타냅니다.
+* `<rp>`: 브라우저가 루비를 지원하지 않을 경우 표시될 괄호를 나타냅니다.
+
+```html
+<p>私は<ruby>日本語<rt>にほんご</rt></ruby>が大好きです。</p>
+```
+
+
+
+
+
+
+
+
+
+
+
+
--- a/doc/html5/03_목록.md
+++ b/doc/html5/03_목록.md
@@ -0,0 +1,52 @@
+# 목록
+
+HTML에서 목록을 표현하는 데 사용되는 태그들은 웹 페이지의 가독성을 높이고 정보를 체계적으로 구성하는 데 중요한 역할을 합니다.
+
+목록 안에 다른 목록을 중첩하여 복잡한 구조를 만들 수 있습니다.
+
+## 순서 없는 목록 (Unordered List) - ul, li
+목록의 항목들 간에 특별한 순서가 없을 때 사용합니다. 각 항목 앞에 불렛(bullet) 마커가 표시됩니다.
+
+```html
+<ul>
+  <li>첫 번째 항목</li>
+  <li>두 번째 항목</li>
+  <li>세 번째 항목</li>
+</ul>
+```
+
+* `<li>` 태그는 `<ul>` 또는 `<ol>` 태그 안에서만 사용되며, 각 목록 항목을 나타냅니다.
+
+## 순서 있는 목록 (Ordered List) - ol, li
+목록의 항목들 간에 순서가 있을 때 사용합니다. 각 항목 앞에 숫자나 알파벳 등이 자동으로 부여됩니다.
+```html
+<ol>
+  <li>첫 번째 항목</li>
+  <li>두 번째 항목</li>
+  <li>세 번째 항목</li>
+</ol>
+```
+
+## 목록에 스타일 적용하기
+```css
+ul {
+  list-style-type: square; /* 마커를 네모로 변경 */
+}
+ol {
+  list-style-position: inside; /* 숫자를 항목 안쪽으로 이동 */
+}
+```
+
+## 정의 목록 (Definition List) - dl, dt, dd
+용어와 설명을 짝으로 나타낼 때 사용합니다.
+```html
+<dl>
+  <dt>HTML</dt>
+  <dd>HyperText Markup Language의 약자로 웹 페이지를 만드는 언어입니다.</dd>
+  <dt>CSS</dt>
+  <dd>Cascading Style Sheets의 약자로 웹 페이지의 스타일을 정의하는 언어입니다.</dd>
+</dl>
+```
+* `<dt>` 태그는 정의 목록에서 용어를 나타내고, `<dd>` 태그는 해당 용어에 대한 설명을 나타냅니다.
+
+
--- a/doc/html5/04_링크.md
+++ b/doc/html5/04_링크.md
@@ -0,0 +1,36 @@
+# 링크 태그
+
+## a
+
+HTML에서 링크를 생성하는 데 가장 기본적으로 사용되는 태그는 `<a>` 태그입니다. 앵커(anchor) 태그라고도 불리며, 다른 페이지, 특정 위치, 파일, 또는 이메일 주소로 연결하는 하이퍼링크를 만들 수 있습니다.
+
+```html
+<a href="링크주소" target="_blank">링크 텍스트</a>
+```
+
+* `<a>`: 앵커 태그의 시작과 끝을 나타냅니다.
+* href: 링크할 페이지의 URL 주소를 지정합니다. URL은 상대 경로 또는 절대 경로를 사용할 수 있습니다.
+* target: 링크를 클릭했을 때 링크가 열리는 방식을 지정합니다.
+    - _blank: 새로운 창에서 열림
+    - _self: 현재 창에서 열림 (기본값)
+    - _parent: 부모 프레임에서 열림
+    - _top: 최상위 창에서 열림
+* rel 속성: 링크와 대상 간의 관계를 나타냅니다. (예: rel="nofollow": 검색 엔진에게 링크를 따라가지 말라고 지시)
+* title 속성: 마우스를 올려놓았을 때 표시되는 도구 설명을 지정합니다.
+
+```html
+<a href="https://www.example.com">Example 웹사이트</a>
+<a href="mailto:you@example.com">이메일 보내기</a>
+<a href="#section2">페이지 내의 section2로 이동</a>
+```
+```html
+<!-- 이미지 링크 -->
+<a href="https://www.example.com"><img src="image.jpg" alt="이미지 설명"></a>
+<!-- 버튼 링크 -->
+<a href="https://www.example.com" class="button">버튼 클릭</a>
+<!-- 다운로드 링크 -->
+<a href="document.pdf" download="document.pdf">문서 다운로드</a>
+
+```
+
+
--- a/doc/html5/05_멀티미디어.md
+++ b/doc/html5/05_멀티미디어.md
@@ -0,0 +1,115 @@
+# 미디어
+
+## img
+웹 페이지에 이미지를 삽입하는 가장 기본적인 태그입니다.
+
+```html
+<img src="image.jpg" alt="이미지 설명">
+```
+* src: 이미지 파일의 경로를 지정합니다.
+* alt: 이미지가 로드되지 않거나 시각 장애인을 위해 대체 텍스트를 제공합니다.
+
+## video
+HTML5부터 지원되는 태그로, 웹 페이지에 동영상을 삽입할 수 있습니다.
+```html
+<video controls>
+  <source src="movie.mp4" type="video/mp4">
+  Your browser does not support the video tag.
+</video>
+```
+* controls: 사용자가 동영상을 재생, 일시 정지, 볼륨 조절 등을 할 수 있는 컨트롤을 표시합니다.
+* source: 동영상 파일의 경로와 형식을 지정합니다.
+* autoplay: 페이지 로드 시 자동으로 재생합니다.
+* muted: 음소거 상태로 재생합니다.
+* loop: 동영상이 끝나면 반복 재생합니다.
+* poster: 동영상이 로딩되기 전에 표시되는 이미지입니다.
+
+## audio
+HTML5부터 지원되는 태그로, 웹 페이지에 오디오 파일을 삽입할 수 있습니다.
+```html
+<audio controls>
+  <source src="music.mp3" type="audio/mpeg">
+  Your browser does not support the audio element.
+</audio>
+```
+* controls: 사용자가 오디오를 재생, 일시 정지, 볼륨 조절 등을 할 수 있는 컨트롤을 표시합니다.
+* source: 오디오 파일의 경로와 형식을 지정합니다.
+* autoplay: 페이지 로드 시 자동으로 재생합니다.
+* loop: 오디오가 끝나면 반복 재생합니다.
+* preload: 브라우저가 미리 오디오 파일을 불러올지 여부를 지정합니다.
+
+## canvas 
+자바스크립트를 사용하여 동적으로 그래픽을 그릴 수 있는 캔버스를 생성하는 태그입니다. 자바스크립트 API를 통해 다양한 그래픽 효과를 구현할 수 있습니다.
+게임, 데이터 시각화 등에 활용됩니다.
+```html
+<canvas id="myCanvas" width="200" height="100"></canvas>
+```
+
+## svg
+확장 가능한 벡터 그래픽을 표현하는 언어로, HTML 문서에 직접 벡터 그래픽을 삽입할 수 있습니다.
+```html
+<svg width="200" height="100">
+  <circle cx="50" cy="50" r="40" fill="red" />
+</svg>
+```
+
+## picture
+다양한 화면 크기와 해상도에 맞는 이미지를 제공하기 위한 태그입니다. `<source>` 태그를 사용하여 여러 이미지를 정의하고, 미디어 쿼리를 통해 적절한 이미지를 선택합니다.
+반응형 웹 디자인에 유용합니다.
+```html
+<picture>
+  <source media="(min-width: 768px)" srcset="large.jpg">
+  <source media="(min-width: 480px)" srcset="medium.jpg">
+  <img src="small.jpg" alt="이미지">
+</picture>
+```
+
+## figure, figcaption
+이미지, 차트, 그래프 등의 콘텐츠와 캡션을 함께 묶어서 표현할 때 사용합니다.
+```html
+<figure>
+  <img src="image.jpg" alt="설명">
+  <figcaption>설명 텍스트</figcaption>
+</figure>
+```
+
+## map, area
+이미지의 특정 영역을 클릭했을 때 다른 페이지로 이동하거나 특정 기능을 실행하도록 설정할 수 있습니다.
+```html
+<img src="map.jpg" usemap="#mymap">
+<map name="mymap">
+  <area shape="rect" coords="0,0,80,80" href="link1.html" alt="Area 1">
+</map>
+```
+* usemap: 이미지 맵의 이름을 지정합니다.
+* area: 이미지 맵의 각 영역을 정의합니다.
+* shape: 영역의 모양을 지정합니다. (rect: 사각형, circle: 원, poly: 다각형 등)
+* coords: 영역의 좌표를 지정합니다.
+
+## iframe
+Inline Frame의 약자로, HTML 문서 내에 또 다른 HTML 문서를 삽입하여 표시할 수 있도록 하는 태그입니다. 마치 웹 페이지 안에 작은 창을 띄워 다른 웹 페이지를 보여주는 것과 같습니다.
+* 다른 웹 페이지 삽입: 다른 웹사이트의 콘텐츠를 자신의 웹 페이지에 삽입하여 보여줄 수 있습니다. (예: 유튜브 동영상, 구글 지도 등)
+* 독립적인 콘텐츠 표시: 메인 페이지와 별도로 독립적인 콘텐츠를 표시할 수 있습니다.
+* 광고 노출: 광고 배너를 삽입하여 수익을 창출할 수 있습니다.
+
+```html
+<iframe src="https://www.example.com"></iframe>
+```
+* src: 삽입할 문서의 URL을 지정합니다.
+* width: iframe의 너비를 지정합니다.
+* height: iframe의 높이를 지정합니다.
+* frameborder: iframe 테두리의 유무를 지정합니다.
+* scrolling: iframe 내부의 콘텐츠 스크롤 여부를 지정합니다.
+* name: iframe에 이름을 부여하여 자바스크립트에서 제어할 수 있도록 합니다.
+
+
+## embed, object
+주로 플러그인이나 액티브X 컨트롤을 삽입하는 데 사용되었습니다. 브라우저 호환성 문제가 많고, 보안 문제의 위험이 있어 최근에는 잘 사용되지 않습니다.
+* embed : 외부 콘텐츠를 웹 페이지에 포함시키는 데 사용되는 일반적인 태그입니다. 
+* object : 다양한 형식의 데이터를 표현하는 데 사용되는 태그입니다. 이미지, 플러그인, 미디어 등을 포함할 수 있습니다.
+```html
+<embed src="https://www.example.com/myplugin.swf" width="300" height="200">
+```
+```html
+<object data="image.svg" type="image/svg+xml"></object>
+```
--- a/doc/html5/06_테이블.md
+++ b/doc/html5/06_테이블.md
@@ -0,0 +1,76 @@
+# 테이블
+HTML에서 테이블을 만들고 데이터를 표 형식으로 정렬하여 보여주기 위해 다양한 태그들이 사용됩니다. 각 태그의 역할과 사용법을 자세히 알아보겠습니다.
+
+* `<table>`: 테이블 전체를 감싸는 최상위 태그입니다.
+* `<tr>`: 테이블의 한 행을 나타냅니다.
+* `<th>`: 테이블의 헤더 셀(제목)을 나타냅니다. 일반적으로 굵은 글씨로 표시되며 가운데 정렬됩니다.
+* `<td>`: 테이블의 데이터 셀을 나타냅니다.
+* `<caption>`: 테이블 전체에 대한 설명이나 제목을 추가합니다.
+* `<thead>`: 테이블 헤더 부분을 감싸는 태그입니다.
+* `<tbody>`: 테이블 본문 부분을 감싸는 태그입니다.
+* `<tfoot>`: 테이블 푸터 부분을 감싸는 태그입니다.
+* `<col>`: 테이블의 열에 대한 속성을 정의합니다.
+* `<colgroup>`: 여러 열에 대한 속성을 그룹으로 정의합니다.
+
+```html
+<table>
+  <tr>
+    <th>이름</th>
+    <th>나이</th>
+    <th>성별</th>
+  </tr>
+  <tr>
+    <td>홍길동</td>
+    <td>30</td>
+    <td>남자</td>
+  </tr>
+  <tr>
+    <td>김순이</td>
+    <td>25</td>
+    <td>여자</td>
+  </tr>
+</table>
+```
+
+* 테이블은 데이터를 표 형식으로 정렬하여 보여주는 데 효과적입니다.
+* 복잡한 레이아웃을 구현하기 위해 테이블을 사용하는 것은 권장되지 않습니다. CSS Grid나 Flexbox를 사용하는 것이 더 적합합니다.
+* 모바일 환경에서 테이블이 제대로 표시되지 않을 수 있으므로, 반응형 웹 디자인을 고려해야 합니다.
+
+
+## 셀 병합하기
+* rowspan: 셀을 여러 행에 걸쳐 병합합니다.
+* colspan: 셀을 여러 열에 걸쳐 병합합니다.
+
+```html
+<table>
+  <tr>
+    <th colspan="2">개인 정보</th>
+  </tr>
+  <tr>
+    <td>이름</td>
+    <td>홍길동</td>
+  </tr>
+  <tr>
+    <td rowspan="2">연락처</td>
+    <td>010-1234-5678</td>
+  </tr>
+  <tr>
+    <td>hong@example.com</td>
+  </tr>
+</table>
+```
+
+## 테이블 스타일링
+CSS를 사용하여 테이블의 모양과 레이아웃을 다양하게 변경할 수 있습니다. 예를 들어, 테이블 테두리, 배경색, 글꼴 등을 설정할 수 있습니다.
+
+```css
+table {
+  border-collapse: collapse;
+}
+
+td, th {
+  border: 1px solid black;
+  padding: 10px;
+}
+```
+
--- a/doc/html5/07_폼.md
+++ b/doc/html5/07_폼.md
@@ -0,0 +1,95 @@
+# 폼
+HTML 폼은 사용자로부터 데이터를 입력받아 서버로 전송하는 데 사용됩니다. 다양한 종류의 입력 요소와 함께 사용하여 다양한 형태의 폼을 만들 수 있습니다.
+
+## form
+폼 전체를 감싸는 태그입니다.
+```html
+<form action="submit.php" method="post">
+</form>
+```
+* action: 폼 데이터를 전송할 서버 측 스크립트의 URL을 지정합니다.
+* method: 데이터를 전송하는 방법을 지정합니다 (get 또는 post).
+
+## input
+사용자 입력을 받는 다양한 종류의 입력 요소를 생성합니다.
+```html
+<input type="text" name="username" placeholder="사용자 이름">
+<input type="password" name="password">
+<input type="email" name="email">
+<input type="submit" value="제출">
+```
+* type: 입력 필드의 종류를 지정합니다.
+    - text: 일반적인 텍스트 입력 (예: 이름, 이메일)
+    - password: 비밀번호 입력 (입력된 내용이 가려짐)
+    - email: 이메일 형식의 입력만 허용
+    - number: 숫자만 입력 가능
+    - date: 날짜 선택
+    - time: 시간 선택
+    - datetime-local: 날짜와 시간 선택
+    - search: 검색창
+    - url: URL 입력
+    - tel: 전화번호 입력
+    - checkbox : 체크박스
+    - radio : 라디오버튼
+    - file : 파일 업로드
+* name: 서버로 전송될 때 사용될 변수명을 지정합니다.
+* required 속성: 필수 입력 항목을 지정할 수 있습니다.
+* disabled: 입력을 비활성화
+* readonly: 입력 내용을 읽기 전용으로 설정
+* maxlength: 입력 가능한 최대 글자 수 지정
+* minlength: 입력 가능한 최소 글자 수 지정
+* pattern 속성: 입력 값의 형식을 제한할 수 있습니다.
+* placeholder 속성: 입력 필드에 미리 보여줄 텍스트를 설정할 수 있습니다.
+
+## label
+입력 요소에 대한 설명을 제공합니다.
+```html
+<label for="username">사용자 이름:</label>
+<input type="text" id="username" name="username">
+```
+* for 속성: 관련 input 요소의 id를 지정합니다.
+
+## textarea
+여러 줄의 텍스트를 입력받을 수 있는 영역을 생성합니다.
+```html
+<textarea name="message" rows="5" cols="30"></textarea>
+```
+* rows: 행의 수를 지정합니다.
+* cols: 열의 수를 지정합니다.
+
+## select
+드롭다운 목록을 생성합니다.
+```html
+<select name="country">
+  <option value="korea">한국</option>
+  <option value="usa">미국</option>
+  <option value="japan">일본</option>
+</select>
+```
+
+## option
+`<select>` 태그 안에서 선택할 수 있는 옵션을 정의합니다.
+
+## button
+버튼을 생성합니다.
+```html
+<button type="submit">제출</button>
+<button type="reset">초기화</button>
+```
+* type: 버튼의 종류를 지정합니다.
+    - submit
+    - reset
+    - button
+
+## fieldset
+관련된 입력 요소들을 그룹화합니다.
+```html
+<fieldset>
+  <legend>개인 정보</legend>
+  <input type="text" name="name">
+  <input type="email" name="email">
+</fieldset>
+```
+
+## legend
+`<fieldset>` 그룹에 대한 설명을 제공합니다.
--- a/doc/html5/08_섹션.md
+++ b/doc/html5/08_섹션.md
@@ -0,0 +1,83 @@
+# 섹션
+HTML5에서 웹 페이지의 구조를 논리적으로 나누고 의미를 부여하기 위해 다양한 섹션 태그가 도입되었습니다. 이러한 섹션 태그들은 웹 페이지의 가독성을 높이고, 검색 엔진 최적화(SEO)에도 긍정적인 영향을 미칩니다.
+
+```html
+<article>
+  <header>
+    <h1>제목</h1>
+    <time datetime="2023-11-23">2023년 11월 23일</time>
+  </header>
+  <main>
+    <h2>주요 콘텐츠</h2>
+    <p>본문 내용</p>
+    <img src="image.jpg" alt="이미지 설명">
+  </main>
+  <footer>
+    <p>작성자: 홍길동</p>
+  </footer>
+</article>
+```
+
+## section
+문서의 독립적인 섹션을 나타냅니다. 주제별로 내용을 구분할 때 사용합니다.
+```html
+<section>
+  <h2>첫 번째 섹션</h2>
+  <p>이 섹션은 첫 번째 내용을 담고 있습니다.</p>
+</section>
+```
+
+## article
+독립적인 콘텐츠 블록을 나타냅니다. 블로그 게시글, 뉴스 기사 등과 같이 재사용 가능한 콘텐츠에 사용합니다.
+```html
+<article>
+  <h2>블로그 게시글</h2>
+  <p>오늘의 날씨는 맑습니다.</p>
+</article>
+```
+
+## nav
+네비게이션 링크를 모아놓은 섹션을 나타냅니다.
+```html
+<nav>
+  <ul>
+    <li><a href="#">홈</a></li>
+    <li><a href="#">소개</a></li>
+    <li><a href="#">문의</a></li>
+  </ul>
+</nav>
+```
+
+## aside
+본문과 관련된 부가적인 정보를 담는 사이드바를 나타냅니다.
+```html
+<aside>
+  <h3>광고</h3>
+  <img src="ad.jpg" alt="광고 이미지">
+</aside>
+```
+
+## header
+섹션의 헤더 부분을 나타냅니다. 제목, 검색창 등을 포함할 수 있습니다.
+```html
+<header>
+  <h1>웹 사이트 제목</h1>
+  <nav>
+    </nav>
+</header>
+```
+
+## main
+HTML5에서 도입된 태그로, HTML 문서의 주요 콘텐츠를 감싸는 역할을 합니다. 
+* 유일성: 하나의 HTML 문서에 main 태그는 하나만 사용해야 합니다.
+* 위치: body 태그 안에 위치해야 합니다.
+* 내용: main 태그 안에는 웹 페이지의 주요 내용만 포함해야 합니다.
+* 헤더와 푸터: header와 footer 태그는 main 태그의 외부에 위치해야 합니다.
+
+## footer
+섹션의 푸터 부분을 나타냅니다. 저작권 정보, 연락처 등을 포함할 수 있습니다.
+```html
+<footer>
+  <p>&copy; 2023 모든 권리 보유</p>
+</footer>
+```
--- a/doc/html5/Input.md
+++ b/doc/html5/Input.md
@@ -0,0 +1,100 @@
+# Input
+
+```html
+<input
+  type="text"
+  id="comment"
+  name="comment"
+  value="저는 텍스트 필드입니다." />
+```
+## 텍스트 필드 타입
+
+* text : 단일 줄 텍스트 필드입니다. 줄 바꿈이 있는 텍스트를 입력하면 브라우저는 해당 데이터를 서버로 전송하기 전에 줄 바꿈을 제거합니다.
+* password
+* hidden : 사용자에게 보이지 않는, 하지만 서버에는 전송되는 양식 컨트롤을 만드는 데 사용됩니다.
+* search
+* url
+* tel
+* email
+* number
+* pattern
+
+## 체크 버튼 타입
+
+* checkbox
+* radio : 라디오 버튼의 name 속성에 동일한 이름을 사용하면 라디오 버튼을 그룹화 할 수 있습니다.
+
+```html
+<input type="checkbox" id="questionOne" name="subscribe" value="yes" checked />
+```
+
+```html
+<div>
+  <input type="checkbox" id="scales" name="scales"
+         checked>
+  <label for="scales">Scales</label>
+</div>
+```
+
+```html
+<div>
+  <input type="radio" id="huey" name="drone" value="huey"
+         checked>
+  <label for="huey">Huey</label>
+</div>
+
+<div>
+  <input type="radio" id="dewey" name="drone" value="dewey">
+  <label for="dewey">Dewey</label>
+</div>
+
+<div>
+  <input type="radio" id="louie" name="drone" value="louie">
+  <label for="louie">Louie</label>
+</div>
+```
+
+## 버튼 타입
+
+* submit
+* reset
+* button
+
+## 파일 선택 타입
+
+* file
+
+```html
+<input type="file" name="file" id="file" accept="image/*" multiple />
+<input type="file" accept="image/*;capture=camera" />
+```
+
+## 레인지 타입
+
+* range
+
+## 날짜와 시간 타입
+
+* datetime-local
+* month
+* time
+* week
+
+## 색상 선택 타입
+
+* color
+
+
+## 목록
+
+```html
+<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />
+
+<datalist id="ice-cream-flavors">
+    <option value="Chocolate">
+    <option value="Coconut">
+    <option value="Mint">
+    <option value="Strawberry">
+    <option value="Vanilla">
+</datalist>
+```
--- a/doc/html5/Interaction.md
+++ b/doc/html5/Interaction.md
@@ -0,0 +1,80 @@
+# 대화형 요소
+
+### details
+
+"open" 상태일 때만 내부 정보를 보여주는 정보 공개 위젯을 생성합니다.
+
+- open
+
+```html
+<details>
+    <summary>Details</summary>
+    Something small enough to escape casual notice.
+</details>
+```
+
+### summary
+
+`detail` 요소의 공개 상자에 대한 요약, 캡션 또는 범례를 지정합니다.
+
+### dialog
+
+닫을 수 있는 경고, 검사기, 창 등 대화 상자 및 기타 다른 상호작용 가능한 컴포넌트를 나타냅니다.
+
+- open
+
+  대화 상자가 활성 상태이며 상호작용할 수 있음을 나타냅니다. open 속성이 없을 때 대화 상자가 사용자에게 보여서는 안됩니다.
+
+
+```html
+<dialog open>
+  <p>여러분 안녕하세요!</p>
+</dialog>
+```
+
+### memu
+
+사용자가 수행하거나 하는 명령 묶음을 말합니다. 이것은 스크린 위에 나오는 목록 메뉴와 눌려진 버튼 아래에 나오는 것과 같은 맥락 메뉴를 포함합니다.
+
+- label
+
+- type
+
+  context | list
+
+
+```html
+<button type="menu" menu="dropdown-menu">
+  Dropdown
+</button>
+
+<menu type="context" id="dropdown-menu">
+  <menuitem label="Action">
+  <menuitem label="Another action">
+  <hr>
+  <menuitem label="Separated action">
+</menu>
+```
+
+```html
+<dialog id="favDialog">
+  <form method="dialog">
+    <p><label>좋아하는 동물:
+      <select>
+        <option></option>
+        <option>아르테미아</option>
+        <option>레서판다</option>
+        <option>거미원숭이</option>
+      </select>
+    </label></p>
+    <menu>
+      <button value="cancel">취소</button>
+      <button id="confirmBtn" value="default">확인</button>
+    </menu>
+  </form>
+</dialog>
+
+<menu>
+  <button id="updateDetails">상세정보 업데이트</button>
+</menu>
+```
--- a/doc/html5/Shadow-DOM.md
+++ b/doc/html5/Shadow-DOM.md
@@ -0,0 +1,3 @@
+# Shadow DOM
+
+Start typing here...
--- a/doc/html5/Template-and-Slot.md
+++ b/doc/html5/Template-and-Slot.md
@@ -0,0 +1,10 @@
+# Template and Slot
+
+## slot
+
+웹 컴포넌트 사용자가 자신만의 마크업으로 채워 별도의 DOM 트리를 생성하고, 컴포넌트와 함께 표현할 수 있는 웹 컴포넌트 내부의 플레이스홀더입니다.
+
+## template
+
+페이지를 불러온 순간 즉시 그려지지는 않지만, 이후 JavaScript를 사용해 인스턴스를 생성할 수 있는 HTML 코드를 담을 방법을 제공합니다.
+
--- a/doc/html5/Web-Forms.md
+++ b/doc/html5/Web-Forms.md
@@ -0,0 +1,183 @@
+# 웹 폼
+
+
+* button : 클릭할 수 있는 버튼입니다. 버튼은 양식 내부는 물론 간단한 표준 버튼 기능이 필요한 곳이라면 문서 어디에나 배치할 수 있습니다.
+  * autofocus
+  * disabled
+  * form : 요소가 속한 form을 나타냅니다.
+  * name, value
+  * type : submit | reset | button
+* input : 사용자 입력 폼입니다.
+  * accept : 파일 형식을 지정합니다. file 형식에만 적용할 수 있습니다.
+  * autocomplete : 웹 브라우저의 자동 완성 기능을 사용하는지 여부를 나타냅니다.
+  * autofocus
+  * checked : radio, chcekbox에만 적용할 수 있습니다.
+  * dirname
+  * disabled
+  * form
+  * list : 사전 정의된 옵션 목록입니다. ```<datalist>```와 연결합니다.
+  * min, max, step : number 타입에만 적용할 수 있습니다. 실수의 경우 ```step="0.1"``` 또는 ```step="any"``` 등으로 지정할 수 있습니다.
+  * maxlength, minlength
+  * multiple : email, file에만 적용할 수 있습니다. 여러 항목을 입력받을 때 사용합니다.
+  * name, value
+  * pattern
+  * placeholder
+  * readonly
+  * required
+  * size
+  * src
+  * type
+    * button | reset | submit | image
+    * checkbox | radio
+    * text | password | search | url | email | tel
+    * number | range
+    * datetime-local | month | date | time | week 
+    * color | file
+    * hidden
+  * usemap
+* textarea : 여러 줄 텍스트 편집기입니다.
+  * autofocus
+  * cols, rows
+  * dirname
+  * disabled
+  * form
+  * maxlength
+  * name, value
+  * placeholder
+  * readonly
+  * required
+  * wrap : soft | hard | wrap
+* select : 사용자가 선택할 수 있는 옵션 메뉴입니다.
+  * autofocus
+  * disabled
+  * form
+  * multiple
+  * name
+  * required
+  * size
+* option : select, optgroup, datalist 요소와 함께 사용됩니다.
+  * disabled
+  * selected
+  * value
+* optgroup : select 요소 내의 option 요소들을 그룹화합니다.
+  * disabled
+  * datalist
+
+```html
+<select name="pets" id="pet-select">
+    <option value="">--Please choose an option--</option>
+    <option value="dog">Dog</option>
+    <option value="cat">Cat</option>
+    <option value="hamster">Hamster</option>
+    <option value="parrot">Parrot</option>
+    <option value="spider">Spider</option>
+    <option value="goldfish">Goldfish</option>
+</select>
+
+<select id="dino-select">
+    <optgroup label="Theropods">
+        <option>Tyrannosaurus</option>
+        <option>Velociraptor</option>
+        <option>Deinonychus</option>
+    </optgroup>
+    <optgroup label="Sauropods">
+        <option>Diplodocus</option>
+        <option>Saltasaurus</option>
+        <option>Apatosaurus</option>
+    </optgroup>
+</select>
+```
+
+* label : 입력 폼에 대한 라벨입니다.
+  * for
+  * form
+
+```html
+<label for="name">Name:</label> <input type="text" id="name" name="user_name">
+
+<label for="name">
+  Name: <input type="text" id="name" name="user_name">
+</label>
+```
+
+* datalist : option과 함께 사용됩니다.
+* form : 사용자의 데이터를 서버로 전송하는 상호작용 부분을 나타냅니다.
+  * accept
+  * accept-charset
+  * action
+  * autocomplete : on | off
+  * enctype : POST 전송 데이터의 타입을 지정합니다. application/x-www-form-urlencoded | multipart/form-data | text/plain
+  * method : post | get
+  * name
+  * novalidate
+  * target
+* fieldset : 폼 안에서 여러 폼 요소들을 그룹화할 때 사용됩니다.
+  * disabled
+  * form
+  * name
+* legend : fieldset 요소를 위한 라벨입니다.
+
+
+```html
+<form action="/my-handling-form-page" method="post">
+ <ul>
+  <li>
+    <label for="name">Name:</label>
+    <input type="text" id="name" name="user_name">
+  </li>
+  <li>
+    <label for="mail">E-mail:</label>
+    <input type="email" id="mail" name="user_email">
+  </li>
+  <li>
+    <label for="msg">Message:</label>
+    <textarea id="msg" name="user_message"></textarea>
+  </li>
+ </ul>
+</form>
+```
+
+```html
+<form>
+  <fieldset>
+    <legend>Fruit juice size</legend>
+    <p>
+      <input type="radio" name="size" id="size_1" value="small">
+      <label for="size_1">Small</label>
+    </p>
+    <p>
+      <input type="radio" name="size" id="size_2" value="medium">
+      <label for="size_2">Medium</label>
+    </p>
+    <p>
+      <input type="radio" name="size" id="size_3" value="large">
+      <label for="size_3">Large</label>
+    </p>
+  </fieldset>
+</form>
+```
+
+
+* meter : 알려진 범위 내의 값을 나타냅니다.
+  * form
+  * high, low
+  * min, max
+  * optimum
+  * value
+* output : 계산 결과를 나타냅니다.
+  * for
+  * form
+  * name, value
+
+```html
+<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
+  <input type="range" id="b" name="b" value="50" /> +
+  <input type="number" id="a" name="a" value="10" /> =
+  <output name="result" for="a b">60</output>
+</form>
+```
+
+* progress : 작업 진행 상태를 나타냅니다.
+  * form
+  * max
+  * value