HTML <hr> 요소는 이야기 장면 전환, 구획 내 주제 변경 등, 문단 레벨 요소에서 주제의 분리를 나타냅니다.
<p>§1: The first rule of Fight Club is: You do not talk about Fight Club.</p>
<hr />
<p>§2: The second rule of Fight Club is: Always bring cupcakes.</p>
hr {
border: none;
border-top: 3px double #333;
color: #333;
overflow: visible;
text-align: center;
height: 5px;
}
hr::after {
background: #fff;
content: "§";
padding: 0 4px;
position: relative;
top: -13px;
}
역사적으로 <hr>은 가로줄로 표현했습니다. 시각적 브라우저에서도 가로줄로 그려질 수 있지만, 이제 시각 표현에 그치지 않고 의미를 가지게 됐습니다. 따라서 가로줄을 그리고 싶다면 적절한 CSS를 사용해야 합니다.
| 콘텐츠 카테고리 | 플로우 콘텐츠. |
|---|---|
| 가능한 콘텐츠 | 없음. 빈 요소입니다. |
| 태그 생략 | 여는 태그는 필수입니다. 닫는 태그는 존재해선 안됩니다. |
| 가능한 부모 요소 | 플로우 콘텐츠를 허용하는 모든 요소. |
| 가능한 ARIA 역할 | presentation |
| DOM 인터페이스 | `HTMLHRElement` |
특성
이 요소는 전역 특성을 포함합니다.
align- : 줄의 정렬을 지정합니다. 기본값은
left입니다.
- : 줄의 정렬을 지정합니다. 기본값은
color- : 색깔 이름 또는 16 진수의 값으로 줄의 색깔을 지정합니다.
noshade- : Sets the rule to have no shading.
size- : 줄의 높이를 픽셀 단위로 지정합니다.
width- : 줄의 가로 길이를 픽셀이나 퍼센트 값으로 지정합니다.
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>
같이 보기
<p>