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
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
|
---
title: <p>
slug: Web/HTML/Element/p
tags:
- Element
- HTML
- HTML grouping content
- Reference
- Web
translation_of: Web/HTML/Element/p
---
<div>{{HTMLRef}}</div>
<p><span class="seoSummary"><strong>HTML <code><p></code> 요소</strong>는 하나의 문단을 나타냅니다.</span> 시각적인 매체에서, 문단은 보통 인접 블록과의 여백과 첫 줄의 들여쓰기로 구분하지만, HTML에서 문단은 이미지나 입력 폼 등 서로 관련있는 콘텐츠 무엇이나 될 수 있습니다.</p>
<p>문단은 블록 레벨 요소이며, 자신의 닫는 태그(<code></p></code>) 이전에 다른 블록 레벨 태그가 분석되면 자동으로 닫힙니다. 아래의 "태그 생략" 항목을 참고하세요.</p>
<div>{{EmbedInteractiveExample("pages/tabbed/p.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/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</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>시작 태그는 필수입니다. 닫는 태그는 {{HTMLElement("p")}} 요소의 바로 뒤에 {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hr")}}, {{HTMLElement("menu")}}, {{HTMLElement("nav")}}, {{HTMLElement("ol")}}, {{HTMLElement("pre")}}, {{HTMLElement("section")}}, {{HTMLElement("table")}}, {{HTMLElement("ul")}}, {{HTMLElement("p")}} 요소가 위치하는 경우, 또는 부모 태그의 콘텐츠가 더 존재하지 않고 부모가 {{HTMLElement("a")}} 요소가 아닐 때 생략할 수 있습니다.</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("HTMLParagraphElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="특성">특성</h2>
<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p>
<h2 id="예제">예제</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><p>첫 번째 문단입니다.
첫 번째 문단입니다.
첫 번째 문단입니다.
첫 번째 문단입니다.</p>
<p>두 번째 문단입니다.
두 번째 문단입니다.
두 번째 문단입니다.
두 번째 문단입니다.</p></pre>
<h3 id="결과">결과</h3>
<p>{{EmbedLiveSample('예제')}}</p>
<h2 id="문단_꾸미기">문단 꾸미기</h2>
<p>브라우저 기본 스타일은 문단끼리 한 줄의 간격으로 분리합니다. 첫 줄 들여쓰기 등 다른 구분 방법은 {{glossary("CSS")}}를 통해 사용할 수 있습니다.</p>
<h3 id="HTML_2">HTML</h3>
<pre class="brush: html"><p>독자 입장에선 문단 사이를 여백으로 구분하는게 제일 읽기 쉽지만,
첫 줄 들여쓰기로도 구분할 수 있습니다. 들여쓰기는 보통 인쇄매체에서
공간과 종이를 아끼기 위해 사용합니다.</p>
<p>학교 과제나 초안 등 나중에 편집할 글은 여백과 들여쓰기 둘 다 사용합니다.
그러나 완성한 글에 둘 다 사용하는건 불필요하고 초보적으로 여겨집니다.</p>
<p>아주 오래된 글에서는 문단을 특수기호 ¶, <i>필크로</i>(단락 기호)로
구분했습니다. 그러나 답답하고 읽기 힘들어 지금은 사용하지 않습니다.</p>
<p>얼마나 읽기 힘들까요? 직접 알아보세요.
<button data-toggle-text="안돼! 다시 돌려놔요!">단락 기호 써보기</button>
</p></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">p {
margin: 0;
text-indent: 3ch;
}
p.pilcrow {
text-indent: 0;
display: inline;
}
p.pilcrow + p.pilcrow::before {
content: " ¶ ";
}</pre>
<h3 id="JavaScript">JavaScript</h3>
<pre class="brush: js">document.querySelector('button').addEventListener('click', function (event) {
document.querySelectorAll('p').forEach(function (paragraph) {
paragraph.classList.toggle('pilcrow');
});
var newButtonText = event.target.dataset.toggleText;
var oldText = event.target.innerText;
event.target.innerText = newButtonText;
event.target.dataset.toggleText = oldText;
});</pre>
<h3 id="결과_2">결과</h3>
<p>{{EmbedLiveSample('문단_꾸미기')}}</p>
<h2 id="접근성_고려사항">접근성 고려사항</h2>
<p>콘텐츠를 문단으로 나누면 페이지의 접근성을 높입니다. 스크린 리더 등 보조 기술은 다음 문단으로 넘어갈 수 있는 단축키 등을 제공하므로, 시각적 매체의 여백이 사용자의 빠른 콘텐츠 탐색을 돕는 것과 같은 효과를 얻을 수 있습니다.</p>
<p>빈 <code><p></code> 요소를 사용해 문단 사이에 여백을 추가하면 스크린 리더 사용자에게 부정적인 경험을 줄 수 있습니다. 스크린 리더가 문단의 존재는 알려주겠지만, 더 읽을 내용이 없기 때문입니다. 따라서 스크린 리더 사용자가 혼란을 느낄 수 있습니다.</p>
<p>여분의 공간이 필요하다면 {{cssxref("margin")}} 등 {{glossary("CSS")}} 속성을 통해 적용하세요.</p>
<pre class="brush: html">p {
margin-bottom: 2em; // 문단 다음 여백을 늘림
}</pre>
<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-p-element', '<p>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-p-element', '<p>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.1', '<p>')}}</td>
<td>{{Spec2('HTML4.01')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
<p>{{Compat("html.elements.p")}}</p>
<h2 id="같이_보기">같이 보기</h2>
<ul>
<li>{{HTMLElement("hr")}}</li>
<li>{{HTMLElement("br")}}</li>
</ul>
|
