recursal/MDN huggingface dataset:
<pre>: 미리 서식 정의된 텍스트 요소
=======================

**HTML `<pre>` 요소**는 미리 서식을 지정한 텍스트를 나타내며, HTML에 작성한 내용 그대로 표현합니다. 텍스트는 보통 고정폭 글꼴을 사용해 렌더링하고, 요소 내 공백문자를 그대로 유지합니다.

시도해보기
-----

`<pre>` 태그 안에서 `<`, `>`, `&`, `"` 와 같은 예약 문자를 표시하려면, 각각의 HTML 개체 (en-US)를 사용해 이스케이프해야 합니다.

특성
--

이 요소는 전역 특성만 포함합니다.

`cols` 
비표준

지원이 중단되었습니다

행에 포함되어야 하는 기본 문자 갯수입니다. `width`의 비표준 동의어였습니다. 이러한 효과를 얻으려면 대신 CSS `width`를 사용하십시오.

`width` 
지원이 중단되었습니다

비표준

행에 포함되어야 하는 기본 문자 갯수입니다. 기술적으로는 여전히 구현되어 있으나, 이 특성은 시각적 효과가 없습니다. 이러한 효과를 얻으려면 대신 CSS `width`를 사용하십시오.

`wrap` 
비표준

지원이 중단되었습니다

오버플로가 어떤 식으로 발생해야 하는지 나타내는 힌트입니다. 최신 브라우저에서 이 힌트는 무시되어 시각적 효과가 나타나지 않습니다. 이러한 효과를 얻으려면 대신 CSS `white-space`를 사용하십시오.

접근성 고려사항
--------

`<pre>` 요소로 만든 이미지나 도표에 대한 대체 설명을 지정하는 것이 중요합니다. 대체 설명은 분명하고 간결하게 이미지 또는 도표 콘텐츠를 설명해야 합니다.

시력이 낮은 사용자가 스크린 리더와 같은 보조 기술을 사용 중이라면, 미리 서식 적용한 텍스트의 문자를 차례대로 읽어서는 이게 무엇을 의미하는지 이해하지 못할 수 있습니다.

`<figure>`과 `<figcaption>`에 더해, ARIA `role`과 `aria-label` 특성을 조합하면 `<pre>`와 사용하면, 미리 서식 지정된 ASCII 아트를 마치 이미지처럼 표현하면서 `<figcaption>`을 대체 설명으로 사용할 수 있습니다.

### 예제


```html
<figure>
  <pre role="img" aria-label="ASCII COW">
      ___________________________
  &lt;     나는 이 분야의 전문가다.     &gt;
      ---------------------------
          \   ^__^
           \  (oo)\_______
              (__)\       )\/\
                  ||----w |
                  ||     ||
  </pre>
  <figcaption id="cow-caption">
    소 한 마리가 "나는 이 분야의 전문가다"라고 말하고 있습니다. 소는 미리 서식을
    적용한 텍스트로 그려져있습니다.
  </figcaption>
</figure>
```


* MDN Understanding WCAG, Guideline 1.1 explanations (en-US)
* H86: Providing text alternatives for ASCII art, emoticons, and leetspeak | W3C Techniques for WCAG 2.0
예제
--

### 기초 예제

#### HTML


```html
<p>CSS로 글자 색을 바꾸는건 쉽습니다.</p>
<pre>
body {
  color:red;
}
</pre>
```


#### 결과

### 예약 문자 이스케이프

#### HTML


```html
<pre>
let i = 5;

if (i &lt; 10 &amp;&amp; i &gt; 0)
  return &quot;한 자리 숫자&quot;
</pre>
```


#### 결과

기술 요약
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠, 뚜렷한 콘텐츠. |
| 가능한 콘텐츠 | 구문 콘텐츠. |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 | 플로우 콘텐츠를 허용하는 모든 요소. |
| 포함되는 ARIA 역할 | `포괄적 (en-US)` |
| 가능한 ARIA 역할 | 모두 |
| DOM 인터페이스 | `HTMLPreElement` (en-US) |

명세
--

| Specification |
| --- |
| HTML Standard # the-pre-element |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* CSS: `white-space`, `word-break`
* HTML 개체 (en-US)
* 관련된 요소: `<code>`
<html>: HTML 문서 / 루트 요소
=======================

**HTML `<html>` 요소**는 HTML 문서의 루트(최상단 요소)를 나타내며, "루트 요소"라고도 부릅니다. 모든 다른 요소는 `<html>` 요소의 후손이어야 합니다.

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 없음. |
| 가능한 콘텐츠 | 
 하나의 `<head>` 요소와 그 뒤를 따르는 하나의
 `<body>` 요소.
  |
| 태그 생략 | `<html>` 요소 내부의 첫 번째 것이 주석이 아니라면 시작
 태그를 생략할 수 있습니다.`<html>` 요소 바로 뒤에
 주석이 따라오지 않는다면 종료 태그를 생략할 수 있습니다.
  |
| 가능한 부모 요소 | 없음. `<html>`이 문서의 루트 요소입니다. |
| 암시적 ARIA 역할 | 대응하는 역할 없음 |
| 가능한 ARIA 역할 | 없음 |
| DOM 역할 | `HTMLHtmlElement` (en-US) |

특성
--

이 요소는 전역 특성을 포함합니다.

`manifest` 
지원이 중단되었습니다

지역적으로 캐시되어야하는 리소스를 가리키는 매니페스트 리소스의 URI를 나타냅니다. 자세한 내용은 애플리케이션 캐시 사용하기를 보세요.

`version` 
지원이 중단되었습니다

현재 문서를 제어하는 HTML 문서 타입 정의의 버전을 나타냅니다. 하지만 이미 문서 타입 선언이 버전을 나타내고 있기 떄문에 이 속성은 필요하지 않습니다.

`xmlns`

문서의 XML 네임스페이스를 지정합니다. 기본값은 `"http://www.w3.org/1999/xhtml"`입니다. XML 구문 분석기로 분석한 문서에는 필수이고, `text/html` 문서에서는 선택사항입니다.

예제
--


```html
<!doctype html>
<html lang="ko">
  <head>
    ...
  </head>
  <body>
    ...
  </body>
</html>
```

접근성 고려사항
--------

`html` 요소의 `lang` 특성에 유효한 IETF 언어 식별 태그를 지정하면 스크린 리더가 음성 표현에 사용할 언어를 선택할 때 도움이 됩니다. 언어 식별 태그는 페이지의 주 언어를 가리켜야 합니다. 아무런 값도 지정하지 않을 시 보통 운영체제의 언어 설정을 따라가므로, 잘못된 발음을 사용할 수 있습니다.

또한 `<html>` 요소에 유효한 `lang` 선언이 존재해야 `<title>`과 같은 `<head>` 내부의 중요한 메타데이터를 정확한 발음으로 표현할 수 있습니다.

* MDN Understanding WCAG, Guideline 3.1 explanations (en-US)
* Understanding Success Criterion 3.1.1 | W3C Understanding WCAG 2.0
명세
--

| Specification |
| --- |
| HTML Standard # the-html-element |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* MathML 최상위 요소 `<math> (en-US)`
* SVG 최상위 요소 `<svg>` (en-US)
<i>
===

**HTML `<i>` 요소**는 텍스트에서 어떤 이유로 주위와 구분해야 하는 부분을 나타냅니다. 기술 용어, 외국어 구절, 등장인물의 생각 등을 예시로 들 수 있습니다. 보통 기울임꼴로 표시합니다.

시도해보기
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠,
 구문 콘텐츠, 뚜렷한 콘텐츠.
  |
| 가능한 콘텐츠 | 구문 콘텐츠. |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 | 구문 콘텐츠를 허용하는 모든 요소. |
| 가능한 ARIA 역할 | 모두 |
| DOM 인터페이스 | `HTMLElement` |

특성
--

이 요소는 전역 특성만 포함합니다.

사용 일람
-----

* 일반 산문과 다른 문체를 가진 텍스트에 `<i>` 요소를 사용하세요. 주위 텍스트와 다른 의미를 가진 텍스트에 적용하면 됩니다.
* 초기 HTML 명세의 `<i>` 요소는, `<b>` 요소가 굵은 글씨 적용에 그쳤던 것과 마찬가지로, 글자를 기울이기만 하는 단순한 시각적 요소였습니다. 그러나 지금은 글자 외형에 그치지 않고 특정한 의미를 지니는 요소이므로 시각적인 강조에 그치지 않습니다. 보통, 브라우저가 여전히 `<i>` 요소의 글자를 기울이겠지만, 명세에 따르면 꼭 그렇게 표시할 필요는 없습니다.
* `<i>` 요소가 글자를 기울이기는 하지만, 기울임꼴을 적용하기 위한 용도로 사용해서는 안됩니다. CSS `font-style` (en-US) 속성을 사용하세요.
* 강조하려는 텍스트가 다른 요소에 더 적합하지 않은지 고려하세요.
    + `<em>` 요소는 강세를 나타냅니다.
    + `<strong>` (en-US) 요소는 보다 강한 강조를 나타냅니다.
    + `<mark>` 요소는 관련성을 나타냅니다.
    + `<cite>` 요소는 책, 공연, 음악 등 저작물의 이름을 나타냅니다.
    + `<dfn>` 요소는 정의 대상인 용어를 나타냅니다.
예제
--

다음 예제는 외국어를 강조하기 위해 `<i>` 요소를 사용합니다.


```html
<p>
  라틴어 문구 <i>Veni, vidi, vici</i>는 음악과 예술, 문학에 자주 등장합니다.
</p>
```

### 결과

명세
--

| Specification |
| --- |
| HTML Standard # the-i-element |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `<em>`
<dt>
====

**HTML `<dt>` 요소**는 설명 혹은 정의 리스트에서 용어를 나타냅니다. `<dl>` 요소 안에 위치해야 합니다. 보통 `<dd>` 요소가 뒤따르지만, 여러 개의 <dt> 요소를 연속해 배치하면 바로 다음 `<dd>` 요소로 한꺼번에 서술할 수 있습니다.

뒤따르는 `<dd>` 요소가 `<dt>`로 지정한 용어의 정의와 기타 관련 글을 제공합니다.

시도해보기
-----

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 없음. |
| 가능한 콘텐츠 | 플로우 콘텐츠. 단, `<header>`,
 `<footer>`, 구획 콘텐츠, 제목 콘텐츠 자손은
 불가능합니다.
  |
| 태그 생략 | 
 여는 태그는 필수입니다. 바로 다음 요소가 `<dd>`
 또는 `<dt>`거나, 자신이 부모의 마지막 자식이라면 닫는
 태그는 생략할 수 있습니다.
  |
| 가능한 부모 요소 | `<dl>` 안의, `<dd>` 혹은
 다른 `<dt>` 앞. 또는 (WHATWG
 HTML에서) `<dl>` 안의
 `<div>` (en-US).
  |
| 암시적 ARIA 역할 | `term` (en-US) |
| 가능한 ARIA 역할 | 없음 |
| DOM 인터페이스 | `HTMLElement` |

특성
--

이 요소는 전역 특성만 포함합니다.

예제
--

<dl> 요소의 예제를 확인하세요.

명세
--

| Specification |
| --- |
| HTML Standard # the-dt-element |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `<dd>`, `<dl>`
<small>: 덧붙임 글 요소
=================

**HTML `<small>`** **요소**는 덧붙이는 글이나, 저작권과 법률 표기 등의 작은 텍스트를 나타냅니다. 기본 상태에서 `<small>`은 자신의 콘텐츠를 한 사이즈 작은 글꼴(`small`에서 `x-small` 등)로 표시하지만, 스타일을 적용한 후에도 글씨 크기가 작을 필요는 없습니다.

시도해보기
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠,
 구문 콘텐츠.
  |
| 가능한 콘텐츠 | 구문 콘텐츠. |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 | 구문 콘텐츠를 허용하는 모든 요소, 또는
 플로우 콘텐츠를 허용하는 모든 요소.
  |
| 가능한 ARIA 역할 | 모두 |
| DOM 인터페이스 | `HTMLElement` |

특성
--

이 요소는 전역 특성만 포함합니다.

예제
--

### 기본 사용법


```html
<p>
  This is the first sentence.
  <small>This whole sentence is in small letters.</small>
</p>
```

### CSS 예제


```html
<p>
  This is the first sentence.
  <span style="font-size:0.8em">This whole sentence is in small letters.</span>
</p>
```

명세
--

| Specification |
| --- |
| HTML Standard # the-small-element |

참고
--

`<b>`, `<i>`, `<small>` 요소는 구조와 표현을 분리하는 원칙을 위배하는 것처럼 보이지만, 셋 모두 HTML5에서 유효합니다. 작성자는 `<small>`과 CSS 중 어느 것을 사용할지 결정하기 전에 심사숙고해야 합니다.

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `<b>`
<dialog>: 대화 상자 요소
==================

Baseline 2022
-------------

Newly availableSince March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**HTML `<dialog>` 요소**는 닫을 수 있는 경고, 검사기, 창 등 대화 상자 및 기타 다른 상호작용 가능한 컴포넌트를 나타냅니다.

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠, 구획 루트. |
| 가능한 콘텐츠 | 플로우 콘텐츠. |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 | 플로우 콘텐츠를 허용하는 모든 요소. |
| 암시적 ARIA 역할 | `dialog` (en-US) |
| 가능한 ARIA 역할 | `alertdialog` (en-US) |
| DOM 인터페이스 | `HTMLDialogElement` (en-US) |

특성
--

이 요소는 전역 특성을 포함합니다.

**경고:** `tabindex` 특성을 `<dialog>` 요소에 사용해서는 안됩니다.

`open`

대화 상자가 활성 상태이며 상호작용할 수 있음을 나타냅니다. `open` 특성이 없을 때 대화 상자가 사용자에게 보여서는 안됩니다.

사용 일람
-----

* `method="dialog"` 특성을 사용한 `<form>` 요소는 제출 시 대화 상자를 닫습니다. 이 때, 대화 상자의 `returnValue` (en-US) 속성은 양식을 제출할 때 사용한 버튼의 `value`으로 설정됩니다.
* CSS `::backdrop` (en-US) 의사 요소를 사용하면, `HTMLDialogElement.showModal()` (en-US) 메서드를 사용해 활성화한 `<dialog>` 요소의 뒤에 스타일을 적용할 수 있습니다. 예를 들면, 모달 대화 상자가 활성화되어 있는 동안 접근할 수 없는 뒤쪽 요소를 어둡게 만들 때 사용합니다.
예제
--

### 간단한 예제


```html
<dialog open>
  <p>여러분 안녕하세요!</p>
</dialog>
```

### 고급 예제

다음 예제는 "상세정보 업데이트" 버튼을 클릭할 경우 양식을 포함한 팝업 대화 상자를 엽니다.

#### HTML


```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>

<output aria-live="polite"></output>
```


#### JavaScript


```js
var updateButton = document.getElementById("updateDetails");
var favDialog = document.getElementById("favDialog");
var outputBox = document.getElementsByTagName("output")[0];
var selectEl = document.getElementsByTagName("select")[0];
var confirmBtn = document.getElementById("confirmBtn");

// “Update details” button opens the <dialog> modally
updateButton.addEventListener("click", function onOpen() {
  if (typeof favDialog.showModal === "function") {
    favDialog.showModal();
  } else {
    alert("The <dialog> API is not supported by this browser");
  }
});
// "Favorite animal" input sets the value of the submit button
selectEl.addEventListener("change", function onSelect(e) {
  confirmBtn.value = selectEl.value;
});
// "Confirm" button of form triggers "close" on dialog because of [method="dialog"]
favDialog.addEventListener("close", function onClose() {
  outputBox.value =
    favDialog.returnValue + " button clicked - " + new Date().toString();
});
```

### 결과

명세
--

| Specification |
| --- |
| HTML Standard # the-dialog-element |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

폴리필
---

지원하지 않는 브라우저에서 `<dialog>`를 사용하려면 dialog-polyfill을 추가하세요.

같이 보기
-----

* `close` 이벤트
* `cancel` 이벤트
* `::backdrop` (en-US) 의사 요소
* HTML 양식 (en-US) 안내서
<samp>: 출력 예시 요소
================

**HTML `<samp>` 요소**는 컴퓨터 프로그램 출력의 예시(혹은 인용문)를 나타냅니다. 보통 브라우저의 기본 고정폭 글씨체(보통 Courier, Lucida Console)를 사용해 렌더링합니다.

시도해보기
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠,
 구문 콘텐츠, 뚜렷한 콘텐츠.
  |
| 가능한 콘텐츠 | 구문 콘텐츠. |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 | 구문 콘텐츠를 허용하는 모든 요소. |
| 가능한 ARIA 역할 | 모두 |
| DOM 인터페이스 | `HTMLElement` |

특성
--

이 요소는 전역 특성만 포함합니다.

사용 일람
-----

브라우저가 `<samp>` 요소에 사용하는 기본 글씨체는 CSS를 사용해 바꿀 수 있습니다. 그러나 브라우저의 사용자 설정값이 모든 CSS보다 우선할 수도 있습니다.

기본 글씨체를 덮어쓸 수 있는 CSS는 다음과 같은 형태입니다.


```css
samp {
  font-family: "Courier";
}
```


**참고:** 웹사이트나 앱의 JavaScript 코드 출력을 담을 컨테이너 요소가 필요하다면 `<output>` 요소를 사용해야 합니다.

예제
--

### 기본 예제

다음 간단한 예제는 문단이 프로그램 출력 예시를 포함하고 있습니다.


```html
<p>
  프로세스가 완료되면 유틸리티가
  <samp>Scan complete. Found <em>N</em> results.</samp> 를 출력합니다. 출력을
  확인한 후 다음 단계로 진행하세요.
</p>
```


결과는 다음과 같습니다.

### 사용자 입력을 포함한 출력 예시

`<samp>` 블록 안에 `<kbd>` 요소를 중첩해서 사용자가 입력하는 텍스트 예제를 나타낼 수 있습니다. 다음 예제 코드는 Linux 또는 macOS 콘솔 세션의 텍스트 복사본을 나타냅니다.

#### HTML


```html
<pre>
<samp><span class="prompt">mike@interwebz:~$</span> <kbd>md5 -s "Hello world"</kbd>
MD5 ("Hello world") = 3e25960a79dbc69b674cd4ec67a72c62

<span class="prompt">mike@interwebz:~$</span> <span class="cursor">█</span></samp></pre>
```


`<span>`을 사용해 셸 프롬프트, 콘솔 커서 등 예제 텍스트의 특정 부분에 다른 스타일을 적용했습니다. 또, `<kbd>`를 사용해 사용자가 입력한 텍스트를 나타내고 있습니다.

#### CSS

원하는 외형을 얻을 수 있는 CSS는 다음과 같습니다.


```css
.prompt {
  color: #b00;
}

samp > kbd {
  font-weight: bold;
}

.cursor {
  color: #00b;
}
```


프롬프트와 커서에 강렬하지 않은 색을 입히고, 예제 텍스트의 입력 부분을 굵게 하는 단순한 코드입니다.

#### 결과

명세
--

| Specification |
| --- |
| HTML Standard # the-samp-element |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* 관련 요소: `<kbd>`, `<code>`, `<pre>`
* 스크립트로 생성한 출력을 담는 `<output>` 요소
<style>: 스타일 정보 요소
==================

**HTML `<style>` 요소**는 문서나 문서 일부에 대한 스타일 정보를 포함합니다.

시도해보기
-----

`<style>` 요소는 문서의 `<head>` 안에 위치해야 합니다. 그러나, 일반적으로 스타일은 외부 스타일 시트에 작성하고, `<link>` 요소로 연결하는 편이 좋습니다.

문서가 다수의 `<style>`과 `<link>` 요소를 포함하면 서로의 순서대로 DOM에 스타일을 적용합니다. 따라서 예상치 못한 종속 문제를 피하려면 올바른 순서를 따라 `<style>` 및 `<link>` 요소를 배치해야 합니다.

`<link>` 요소와 동일하게, `<style>` 요소도 미디어 쿼리를 값으로 가지는 `media` 특성을 포함할 수 있습니다. 이를 통해 뷰포트 너비 등 매체 기능에 따라 선택적으로 스타일 시트를 적용할 수 있습니다.

특성
--

이 요소는 전역 특성을 포함합니다.

`type`

스타일 언어의 MIME 유형. 문자셋은 지정하지 않아야 합니다. 선택 사항이며, 기본값은 `text/css`입니다. 빈 문자열과 `text/css` 외의 값은 사용하지 않습니다.

**참고:** 현대적인 웹 문서에서 이 특성을 포함할 이유는 거의 존재하지 않습니다.

`media`

스타일을 적용할 매체. 값은 미디어 쿼리이며, 누락할 경우 기본값은 `all`입니다.

`nonce`

`style-src Content-Security-Policy` (en-US)에서 인라인 스타일을 화이트리스트에 추가할 때 사용하는 논스(임시 값). 서버는 매번 정책을 전송할 때마다 새로운 고유 논스를 생성해야 합니다. 논스 값을 알고 있는 공격자라면 리소스 정책을 우회하는 것은 매우 간단한 일이므로, 사전에 유추할 수 없는 값을 생성하는 것이 중요합니다.

`title`

대체 스타일 시트 세트를 지정합니다.

### 사용 중단된 특성

`scoped` 
비표준

지원이 중단되었습니다

지정한 경우, `<style>` 요소의 부모 및 부모의 자식에만 스타일을 적용합니다.

**참고:** `scoped` 특성은 https://github.com/w3c/csswg-drafts/issues/3547에 따라 나중에 다시 추가될 수도 있습니다. 지금 사용하고 싶은 경우 폴리필을 추가하세요.

예제
--

### 간단한 스타일 시트


```html
<!doctype html>
<html>
  <head>
    <style>
 p {
 color: red;
 }
 </style>
  </head>
  <body>
    <p>This is my paragraph.</p>
  </body>
</html>
```

### 다수의 `<style>` 요소

다음 예제는 두 개의 `<style>` 요소를 사용합니다. 같은 명시도를 가진 경우, 뒤쪽 `<style>`이 앞쪽을 덮어쓰는 것에 주목하세요.


```html
<!doctype html>
<html>
  <head>
    <style>
 p {
 color: white;
 background-color: blue;
 padding: 5px;
 border: 1px solid black;
 }
 </style>
    <style>
 p {
 color: blue;
 background-color: yellow;
 }
 </style>
  </head>
  <body>
    <p>This is my paragraph.</p>
  </body>
</html>
```

### 미디어 쿼리 포함

이번 예제에서는 앞선 코드의 두 번째 `<style>` 요소에 `media` 특성을 추가하고, 뷰포트의 너비가 500px 미만일 때에만 스타일을 적용하도록 지정합니다.


```html
<!doctype html>
<html>
  <head>
    <style>
 p {
 color: white;
 background-color: blue;
 padding: 5px;
 border: 1px solid black;
 }
 </style>
    <style media="all and (max-width: 500px)">
 p {
 color: blue;
 background-color: yellow;
 }
 </style>
  </head>
  <body>
    <p>This is my paragraph.</p>
  </body>
</html>
```

기술 요약
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 메타데이터 콘텐츠. `scoped` 특성이 존재하면
 플로우 콘텐츠.
  |
| 가능한 콘텐츠 | `type` 특성에 맞는 텍스트, 즉 `text/css`. |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 | 메타데이터 콘텐츠를 허용하는 모든 요소 |
| 가능한 ARIA 역할 | 없음 |
| DOM 인터페이스 | `HTMLStyleElement` (en-US) |

명세
--

| Specification |
| --- |
| HTML Standard # the-style-element |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* 외부 스타일 시트를 사용하기 위한 `<link>` 요소.
<blockquote>: 인용 블록 요소
======================

**HTML `<blockquote>` 요소**는 안쪽의 텍스트가 긴 인용문임을 나타냅니다. 주로 들여쓰기를 한 것으로 그려집니다. (외형을 바꾸는 법은 사용 일람을 참고하세요) 인용문의 출처 URL은 `cite` 특성으로, 출처 텍스트는 `<cite>` 요소로 제공할 수 있습니다.

시도해보기
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠, 구획 루트, 뚜렷한 콘텐츠. |
| 가능한 콘텐츠 | 플로우 콘텐츠. |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 | 플로우 콘텐츠를 허용하는 모든 요소 |
| 암시적 ARIA 역할 | 대응하는 역할 없음 |
| 가능한 ARIA 역할 | 모두 |
| DOM 인터페이스 | `HTMLQuoteElement` (en-US) |

특성
--

이 요소는 전역 특성을 포함합니다.

`cite`

인용문의 출처 문서나 메시지를 가리키는 URL. 인용문의 맥락 혹은 출처 정보를 가리킬 용도입니다.

사용 일람
-----

인용문의 들여쓰기를 바꾸려면 CSS `margin-left`와 `margin-right`, 혹은 `margin` 단축 속성을 사용하세요.

별도의 블록을 쓰지 않아도 될 짧은 인용문은 `<q>` 요소를 사용하세요.

예제
--

다음 예제는 `<blockquote>` 요소를 사용해 RFC 1149 A Standard for the Transmission of IP Datagrams on Avian Carriers의 문단을 인용합니다.


```html
<blockquote cite="https://tools.ietf.org/html/rfc1149">
  <p>
    Avian carriers can provide high delay, low throughput, and low altitude
    service. The connection topology is limited to a single point-to-point path
    for each carrier, used with standard carriers, but many carriers can be used
    without significant interference with each other, outside of early spring.
    This is because of the 3D ether space available to the carriers, in contrast
    to the 1D ether used by IEEE802.3. The carriers have an intrinsic collision
    avoidance system, which increases availability.
  </p>
</blockquote>
```

명세
--

| Specification |
| --- |
| HTML Standard # the-blockquote-element |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* 인라인 인용문을 위한 `<q>` 요소.
* 인용문 출처 표기를 위한 `<cite>` 요소.
<ins>
=====

**HTML `<ins>` 요소**는 문서에 추가된 텍스트의 범위를 나타냅니다. `<del>` 요소를 사용하면 삭제된 텍스트의 범위를 나타낼 수 있습니다.

시도해보기
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠,
 구문 콘텐츠.
  |
| 가능한 콘텐츠 | 투명. |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 | 구문 콘텐츠를 허용하는 모든 요소. |
| 가능한 ARIA 역할 | 모두 |
| DOM 인터페이스 | `HTMLModElement` (en-US) |

특성
--

이 요소는 전역 특성을 포함합니다.

`cite`

회의록, 이슈 추적 시스템의 티켓 번호 등 변경점을 설명하는 리소스의 URI.

`datetime`

변경이 발생한 일시. 유효한 날짜 문자열이어야 하며, 시간을 지정할 경우 역시 유효해야 합니다. 유효하지 않은 값을 지정할 경우 일시를 지정하지 않은 것과 같습니다. 유효한 문자열의 종류는 HTML에서 사용하는 날짜와 시간 형식 (en-US) 문서에서 확인할 수 있습니다.

예제
--


```html
<ins>This text has been inserted</ins>
```

### 결과

접근성 고려사항
--------

대부분의 스크린 리더는 기본값에서 `<ins>` 요소의 존재를 표현하지 않습니다. 그러나 CSS `content` 속성과 `::before` (en-US), `::after` 의사 요소를 사용하면 소리내어 읽도록 할 수 있습니다.


```css
ins::before,
ins::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

ins::before {
  content: " [추가 부분 시작] ";
}

ins::after {
  content: " [추가 부분 끝] ";
}
```


스크린 리더 사용자 일부는 지나치게 자세한 안내를 유발할 수 있는 콘텐츠의 표현을 의도적으로 꺼놓습니다. 그러므로 이 방식을 남용해선 안되며, 콘텐츠의 이해에 삽입 여부가 꼭 필요할 때만 사용해야 합니다.

* Short note on making your mark (more accessible) | The Paciello Group
* Tweaking Text Level Styles | Adrian Roselli
명세
--

| Specification |
| --- |
| HTML Standard # the-ins-element |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* 문서에서 삭제된 부분을 나타내는 `<del>` 요소.
<time>
======

**HTML `<time>` 요소**는 시간의 특정 지점 또는 구간을 나타냅니다. `datetime` 특성의 값을 지정해 보다 적절한 검색 결과나, 알림 같은 특정 기능을 구현할 때 사용할 수 있습니다.

`<time>` 요소가 나타낼 수 있는 시간은 다음과 같습니다.

* 24시간 표기법 시계의 시간.
* 정확한 그레고리력 날짜. (시간대 정보 포함 가능)
* 유효한 시간 범위.
시도해보기
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠,
 구문 콘텐츠, 뚜렷한 콘텐츠.
  |
| 가능한 콘텐츠 | 구문 콘텐츠. |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 | 구문 콘텐츠를 허용하는 모든 요소. |
| 가능한 ARIA 역할 | 모두 |
| DOM 인터페이스 | `HTMLTimeElement` (en-US) |

특성
--

이 요소는 전역 특성을 포함합니다.

`datetime`

요소의 시간 또는 날짜 값. 아래에서 설명하는 형식 중 하나여야 합니다.

사용 일람
-----

`<time>` 요소는 기계가 읽을 수 있는 형태로 날짜와 시간을 표현할 때 사용합니다. 예를 들어, 일정의 경우 사용자 에이전트가 자동으로 달력에 일정을 추가할 수 있도록 정확한 일시를 나타낼 수 있습니다.

복잡한 계산상 문제로 인해, 그레고리력의 도입 이전 시간을 나타낼 때 사용해서는 안됩니다.

기계가 읽을 날짜와 시간 값은 `datetime` 특성의 값으로, 아래의 적절한 형식 중 하나여야 합니다. `datetime` 특성이 없는 경우 **어떠한 자식 요소도 두어서는 안되며**, 요소의 텍스트 콘텐츠를 `datetime` 특성 값으로 간주합니다.

### 유효한 `datetime` 값

유효한 연도 문자열
`2011`
유효한 연-월 문자열
`2011-11`
유효한 연-월-일 문자열
`2011-11-18`
유효한 월-일 문자열
`11-18`
유효한 주차 문자열
`2011-W47`
유효한 시간 문자열
`14:54`
`14:54:39`
`14:54:39.929`
유효한 현지 날짜 및 시간 문자열
`2011-11-18T14:54:39.929`
`2011-11-18 14:54:39.929`
유효한 국제 날짜 및 시간 문자열
`2011-11-18T14:54:39.929Z`
`2011-11-18T14:54:39.929-0400`
`2011-11-18T14:54:39.929-04:00`
`2011-11-18 14:54:39.929Z`
`2011-11-18 14:54:39.929-0400`
`2011-11-18 14:54:39.929-04:00`
유효한 기간 문자열
`PT4H18M3S`
예제
--

### 간단한 예제

#### HTML


```html
<p>The concert starts at <time>20:00</time>.</p>
```


#### 결과

### `datetime` 예제

#### HTML


```html
<p>
  The concert took place on <time datetime="2001-05-15 19:00">May 15</time>.
</p>
```


#### 결과

명세
--

| Specification |
| --- |
| HTML Standard # the-time-element |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* 날짜와 시간 외 다른 종류의 값을 나타낼 수 있는 `<data>` 요소.
<br>: 줄바꿈 요소
============

**HTML `<br>` 요소**는 텍스트 안에 줄바꿈(캐리지 리턴)을 생성합니다. 주소나 시조 등 줄의 구분이 중요한 내용을 작성할 때 유용합니다.

시도해보기
-----

위 예제에서 확인할 수 있듯, `<br>` 요소는 텍스트를 끊고 싶은 지점에 삽입해야 합니다. `<br>` 이후의 텍스트는 텍스트 블록의 다음 줄에서 다시 시작합니다.

**참고:** 문단 사이에 여백을 두기 위한 용도로 `<br>`을 사용하지 마세요. 대신 `<p>` 요소로 감싼 후 CSS의 `margin` 속성으로 여백의 크기를 조절하세요.

특성
--

이 요소는 전역 특성 (en-US)만 포함합니다.

CSS 스타일링
--------

`<br>` 요소는 텍스트 블록에서 줄을 바꾼다는 하나의 명확한 목적만 가지고 있습니다. 따라서 크기도, 외형도 없으므로 스타일을 적용할 것도 거의 없습니다.

`<br>` 요소에 `margin`을 적용하면 줄 간격을 늘릴 수 있겠지만 좋은 방법은 아닙니다. 이런 목적을 위해 만들어진 CSS `line-height` (en-US) 속성을 사용하세요.

예제
--


```html
Mozilla Foundation<br />
1981 Landings Drive<br />
Building K<br />
Mountain View, CA 94043-0801<br />
USA
```


결과는 다음과 같습니다.

접근성 고려사항
--------

문단 구분을 `<br>`로 하는건 나쁜 사례일 뿐만 아니라 스크린 리더를 사용해 탐색하는 사용자에게도 문제가 됩니다. 스크린 리더가 요소의 존재는 알려주겠지만, `<br>`에는 아무런 내용도 없기 때문입니다. 따라서 사용자는 내용이 어딨는지 몰라 혼란을 느낄 수 있습니다.

`<p>` 요소와 함께 CSS `margin` 속성 등을 조합해 간격을 조절하세요.

기술 요약
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠,
 구문 콘텐츠.
  |
| 가능한 콘텐츠 | 없음. 빈 요소입니다. |
| 태그 생략 | 여는 태그는 필수입니다. 닫는 태그는 존재해선 안됩니다. |
| 가능한 부모 요소 | 구문 콘텐츠를 허용하는 모든 요소. |
| 암시적 ARIA 역할 | 대응하는 역할 없음 |
| 가능한 ARIA 역할 | 모두 |
| DOM 인터페이스 | `HTMLBRElement` |

명세
--

| Specification |
| --- |
| HTML Standard # the-br-element |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `<address>` 요소
* `<p>` 요소
<wbr>
=====

**HTML `<wbr>` 요소**는 현재 요소의 줄 바꿈 규칙을 무시하고 브라우저가 줄을 바꿀 수 있는 위치를 나타냅니다.

시도해보기
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠,
 구문 콘텐츠.
  |
| 가능한 콘텐츠 | 없음. 빈 요소입니다. |
| 태그 생략 | 여는 태그는 필수입니다. 닫는 태그는 존재해선 안됩니다. |
| 가능한 부모 요소 | 구문 콘텐츠를 허용하는 모든 요소. |
| 암시적 ARIA 역할 | 대응하는 역할 없음 |
| 가능한 ARIA 역할 | 모두 |
| DOM 인터페이스 | `HTMLElement` |

특성
--

이 요소는 전역 특성만 포함합니다.

참고
--

UTF-8 인코딩을 사용한 페이지의 `<wbr>` 은 `U+200B ZERO-WIDTH SPACE` 코드 포인트처럼 동작합니다. 특히, Unicode bidi BN 코드 포인트처럼 행동하므로 bidi 정렬의 영향을 받지 않습니다. 즉 `<div dir=rtl>123,<wbr>456</div>`의 줄이 바뀌지 않은 경우, `456,123`이 아니라 `123,456`으로 나타납니다.

같은 이유로 인해 `< wbr >` 요소로 인한 줄바꿈으로는 붙임표가 나타나지 않습니다. 줄의 끝에 하이픈이 필요한 경우 소프트 하이픈 문자 개체(soft hyphen character entity, `& shy;`)를 사용하세요.

`<wbr>`은 Internet Explorer 5.5에서 처음 구현됐고, HTML5가 정식으로 정의했습니다.

예제
--

URL의 줄을 바꿀 때, 문장 부호 다음에 잘린 경우 독자가 URL이 끝난 것으로 혼동할 수 있으므로, \*The Yahoo Style Guide\*는 URL의 줄바꿈을 문장 부호 이전에 하라고 추천합니다.


```html
<p>
  http://this<wbr />.is<wbr />.a<wbr />.really<wbr />.long<wbr />.example<wbr />.com/With<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages
</p>
```

명세
--

| Specification |
| --- |
| HTML Standard # the-wbr-element |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `overflow-wrap`
* `word-break`
* `hyphens`
* `<br>` 요소