1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
|
---
title: <pre>
slug: Web/HTML/Element/pre
tags:
- Element
- HTML
- HTML grouping content
- 'HTML:Flow content'
- Reference
- Web
translation_of: Web/HTML/Element/pre
---
<div>{{HTMLRef}}</div>
<p><span class="seoSummary"><strong>HTML <code><pre></code> 요소</strong>는 미리 서식을 지정한 텍스트를 나타내며, HTML에 작성한 내용 그대로 표현합니다.</span> 텍스트는 보통 고정폭 글꼴을 사용해 렌더링하고, 요소 내 공백문자를 그대로 유지합니다.</p>
<div>{{EmbedInteractiveExample("pages/tabbed/pre.html", "tabbed-standard")}}</div>
<p class="hidden">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 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리">콘텐츠 카테고리</a></th>
<td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">플로우 콘텐츠</a>, 뚜렷한 콘텐츠.</td>
</tr>
<tr>
<th scope="row">가능한 콘텐츠</th>
<td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>.</td>
</tr>
<tr>
<th scope="row">태그 생략</th>
<td>{{no_tag_omission}}</td>
</tr>
<tr>
<th scope="row">가능한 부모 요소</th>
<td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">플로우 콘텐츠</a>를 허용하는 모든 요소.</td>
</tr>
<tr>
<th scope="row">가능한 ARIA 역할</th>
<td>모두</td>
</tr>
<tr>
<th scope="row">DOM 인터페이스</th>
<td>{{domxref("HTMLPreElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="특성">특성</h2>
<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes" title="HTML/Global attributes">전역 특성</a>만 포함합니다.</p>
<div class="hidden">
<dl>
<dt>{{htmlattrdef("cols")}} {{non-standard_inline}} {{obsolete_inline}}</dt>
<dd>Contains the <em>preferred</em> count of characters that a line should have. It was a non-standard synonym of {{htmlattrxref("width", "pre")}}. To achieve such an effect, use CSS styling instead.</dd>
<dt>{{htmlattrdef("width")}} {{obsolete_inline}}</dt>
<dd>Contains the <em>preferred</em> count of characters that a line should have. Though technically still implemented, this attribute has no visual effect; to achieve such an effect, use CSS styling instead.</dd>
<dt>{{htmlattrdef("wrap")}} {{non-standard_inline}}</dt>
<dd>Is a <em>hint</em> indicating how the overflow must happen. In modern browser this hint is ignored and no visual effect results in its present; to achieve such an effect, use CSS styling instead.</dd>
</dl>
</div>
<h2 id="예제">예제</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><p>CSS로 글자 색을 바꾸는건 쉽습니다.</p>
<pre>
body {
color:red;
}
</pre>
</pre>
<h3 id="결과">결과</h3>
<p>{{EmbedLiveSample("예제")}}</p>
<h2 id="Specifications" name="Specifications">접근성 고려사항</h2>
<p><code><pre></code> 요소로 만든 이미지나 도표에 대한 대체 설명을 지정하는 것이 중요합니다. 대체 설명은 분명하고 간결하게 이미지 또는 도표 콘텐츠를 설명해야 합니다.</p>
<p>시력이 낮은 사용자가 스크린 리더와 같은 보조 기술을 사용 중이라면, 미리 서식 적용한 텍스트의 문자를 차례대로 읽어서는 이게 무엇을 의미하는지 이해하지 못할 수 있습니다.</p>
<p>{{htmlelement("figure")}}과 {{htmlelement("figcaption")}}에 더해 {{htmlattrxref("id")}}와 <a href="/ko/docs/Web/Accessibility/ARIA">ARIA</a> <code>role</code>과 <code>aria-labelledby</code> 특성을 조합하면 <code><pre></code>를 마치 이미지처럼 표현하면서 <code><figcaption></code>을 대체 설명으로 사용할 수 있습니다.</p>
<h3 id="예제_2">예제</h3>
<pre><figure role="img" aria-labelledby="cow-caption">
<pre>
_______________________
< 나는 이 분야의 전문가다. >
-----------------------
\ ^__^
\ (oo)\_______
(__)\ )\/\
||----w |
|| ||
</pre>
<figcaption id="cow-caption">
소 한 마리가 "나는 이 분야의 전문가다"라고 말하고 있습니다. 소는 미리 서식을 적용한 텍스트로 그려져있습니다.
</figcaption>
</figure>
</pre>
<ul>
<li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_—_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li>
<li><a href="https://www.w3.org/TR/WCAG20-TECHS/H86.html">H86: Providing text alternatives for ASCII art, emoticons, and leetspeak | W3C Techniques for WCAG 2.0</a></li>
</ul>
<h2 id="Specifications" name="Specifications">명세</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">명세</th>
<th scope="col">상태</th>
<th scope="col">주석</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-pre-element', '<pre>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td>No significant change from {{SpecName("HTML WHATWG")}}</td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-pre-element', '<pre>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td>No significant change from {{SpecName("HTML4.01")}}</td>
</tr>
<tr>
<td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.4', '<dl>')}}</td>
<td>{{Spec2('HTML4.01')}}</td>
<td>Deprecated the <code>cols</code> attribute</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
<p>{{Compat("html.elements.pre")}}</p>
<h2 id="같이_보기">같이 보기</h2>
<ul>
<li>CSS: {{ Cssxref('white-space') }}, {{ Cssxref('word-break') }}</li>
</ul>
|
