<hr>

HTML <hr> 요소는 이야기 장면 전환, 구획 내 주제 변경 등, 문단 레벨 요소에서 주제의 분리를 나타냅니다.

HTML <hr> 요소는 이야기 장면 전환, 구획 내 주제 변경 등, 문단 레벨 요소에서 주제의 분리를 나타냅니다.

HTML

<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>

CSS

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

html-nolint

<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>

<hr>

특성

예제

HTML

결과

명세

브라우저 호환성

같이 보기