HTML의 <hr> 태그는 'horizontal rule'이라고도 불리며, 문서 내에 수평선(가로 구분선)을 만들 때 사용합니다. 주로 콘텐츠의 주제가 바뀌는 지점이나 섹션을 시각적으로 구분할 때 활용됩니다.
hr 태그의 주요 속성
HTML <hr> 태그는 아래와 같은 속성을 지원합니다. 다만, 이 속성들은 모두 HTML5에서 더 이상 권장되지 않는(deprecated) 속성이므로, 실제 프로젝트에서는 CSS를 사용해 스타일을 지정하는 것이 좋습니다.
| 속성 | 값 | 설명 |
| align | left right center | 사용 중단됨 — 수평선의 정렬 방식을 지정합니다. |
| noshade | noshade | 사용 중단됨 — 대부분의 브라우저에서 표시되는 기본 음영 효과를 제거합니다. |
| size | 픽셀 또는 % | 사용 중단됨 — 수평선의 높이를 지정합니다. |
| width | 픽셀 또는 % | 사용 중단됨 — 수평선의 너비를 지정합니다. |
예제 코드
아래 코드를 실행하면 HTML 문서에 수평선이 추가되는 것을 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML hr 태그</title> </head> <body> <p>이 텍스트 뒤에 수평선이 나타납니다.</p> <hr /> <p>또 다른 수평선입니다.</p> <hr /> </body> </html>
참고: CSS로 수평선 스타일링하기
HTML5에서는 위의 속성들이 폐기되었기 때문에, 수평선의 두께·색상·너비 등을 조절하려면 CSS를 사용해야 합니다. 예를 들어 다음과 같이 작성할 수 있습니다.
hr {
border: none;
height: 2px;
background-color: #333;
width: 80%;
}이처럼 <hr> 태그는 단순하지만 문서 구조를 명확하게 해주는 유용한 요소이며, CSS와 함께 사용하면 다양한 디자인을 적용할 수 있습니다.