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
|
---
title: <hr>
slug: Web/HTML/Element/hr
tags:
- Element
- HTML
- HTML grouping content
- Reference
translation_of: Web/HTML/Element/hr
---
<div>{{HTMLRef}}</div>
<p><strong>HTML <code><hr></code> 요소</strong>는 이야기 장면 전환, 구획 내 주제 변경 등, 문단 레벨 요소에서 주제의 분리를 나타냅니다.</p>
<div>{{EmbedInteractiveExample("pages/tabbed/hr.html", "tabbed-shorter")}}</div>
<p>역사적으로 <code><hr></code>은 가로줄로 표현했습니다. 시각적 브라우저에서도 가로줄로 그려질 수 있지만, 이제 시각 표현에 그치지 않고 의미를 가지게 됐습니다. 따라서 가로줄을 그리고 싶다면 적절한 CSS를 사용해야 합니다.</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>없음. {{glossary("empt element", "빈 요소")}}입니다.</td>
</tr>
<tr>
<th scope="row">태그 생략</th>
<td>여는 태그는 필수입니다. 닫는 태그는 존재해선 안됩니다.</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>{{ARIARole("presentation")}}</td>
</tr>
<tr>
<th scope="row">DOM 인터페이스</th>
<td>{{domxref("HTMLHRElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="특성">특성</h2>
<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>을 포함합니다.</p>
<dl>
<dt>{{htmlattrdef("align")}} {{deprecated_inline}}</dt>
<dd>줄의 정렬을 지정합니다. 기본값은 <code>left</code>입니다.</dd>
<dt>{{htmlattrdef("color")}} {{Non-standard_inline}}</dt>
<dd>색깔 이름 또는 16 진수의 값으로 줄의 색깔을 지정합니다.</dd>
<dt>{{htmlattrdef("noshade")}} {{deprecated_inline}}</dt>
<dd>Sets the rule to have no shading.</dd>
<dt>{{htmlattrdef("size")}} {{deprecated_inline}}</dt>
<dd>줄의 높이를 픽셀 단위로 지정합니다.</dd>
<dt>{{htmlattrdef("width")}} {{deprecated_inline}}</dt>
<dd>줄의 가로 길이를 픽셀이나 퍼센트 값으로 지정합니다.</dd>
</dl>
<h2 id="예제">예제</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><p>
This is the first paragraph of text.
This is the first paragraph of text.
This is the first paragraph of text.
This is the first paragraph of text.
</p>
<hr>
<p>
This is second paragraph of text.
This is second paragraph of text.
This is second paragraph of text.
This is second paragraph of text.
</p>
</pre>
<h3 id="결과">결과</h3>
<p>{{EmbedLiveSample("예제")}}</p>
<h2 id="Specifications" name="Specifications">명세</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'semantics.html#the-hr-element', '<hr>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td>Definition of the <code><hr></code> element</td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-hr-element', '<hr>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.3', '<hr>')}}</td>
<td>{{Spec2('HTML4.01')}}</td>
<td>The <code>align</code>, <code>noshade</code>, <code>size</code>, and <code>width</code> attributes are deprecated</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
<p>{{Compat("html.elements.hr")}}</p>
<h2 id="같이_보기">같이 보기</h2>
<ul>
<li>{{htmlelement("p")}}</li>
</ul>
|
