318 lines
7.6 KiB
Markdown
318 lines
7.6 KiB
Markdown
# 텍스트
|
|
|
|
## 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
|
|
|
|
이야기 장면 전환, 구획 내 주제 변경 등, 문단 레벨 요소에서 주제의 분리를 나타냅니다. |