---
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>&lt;hr&gt;</code> 요소</strong>는 이야기 장면 전환, 구획 내 주제 변경 등, 문단 레벨 요소에서 주제의 분리를 나타냅니다.</p>

<div>{{EmbedInteractiveExample("pages/tabbed/hr.html", "tabbed-shorter")}}</div>



<p>역사적으로 <code>&lt;hr&gt;</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">&lt;p&gt;
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.
&lt;/p&gt;

&lt;hr&gt;

&lt;p&gt;
This is second paragraph of text.
This is second paragraph of text.
This is second paragraph of text.
This is second paragraph of text.
&lt;/p&gt;
</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', '&lt;hr&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>Definition of the <code>&lt;hr&gt;</code> element</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-hr-element', '&lt;hr&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.3', '&lt;hr&gt;')}}</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>