<hr>

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

역사적으로 <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>

결과

명세

Specification Status Comment
HTML Living Standard
The definition of '<hr>' in that specification.
Living Standard Definition of the <hr> element
HTML5
The definition of '<hr>' in that specification.
Recommendation
HTML 4.01 Specification
The definition of '<hr>' in that specification.
Recommendation The align, noshade, size, and width attributes are deprecated

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
hrChrome Full support YesEdge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
align
DeprecatedNon-standard
Chrome Full support YesEdge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
color
DeprecatedNon-standard
Chrome Full support YesEdge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
noshade
DeprecatedNon-standard
Chrome Full support YesEdge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
size
DeprecatedNon-standard
Chrome Full support YesEdge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
width
DeprecatedNon-standard
Chrome Full support YesEdge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.

같이 보기