HTML 수평선(
) 태그란 무엇인가?
<hr> 태그는 HTML에서 수평선(horizontal rule)을 표현하는 요소입니다. 주로 HTML 페이지에서 서로 다른 주제의 콘텐츠를 시각적으로 구분할 때 사용됩니다.
<hr> 태그의 가장 큰 특징은 종료 태그가 없는 빈 태그(void element)라는 점입니다. 즉, <hr></hr>처럼 닫아줄 필요 없이 <hr> 하나만 작성하면 됩니다. 이 태그는 HTML 문서의 <body> ... </body> 태그 사이에 위치시켜 사용합니다.
참고로 HTML5에서는 <hr> 태그가 단순한 장식용 선을 넘어, 주제가 바뀌는 지점(thematic break)을 의미적으로 나타내는 역할도 합니다. 따라서 문단 사이나 섹션 사이에 내용의 흐름이 전환될 때 넣으면 의미上有으로도 적절합니다.
예제 코드
아래 코드를 직접 실행해 보면 HTML 페이지에 수평선을 추가하는 방법을 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML Horizontal Rule</title> </head> <body> <p>문서의 내용이 이곳에 들어갑니다.</p> <hr> <p>여기에 다른 섹션을 추가하세요.</p> </body> </html>
실행 결과
위 코드를 브라우저에서 실행하면 두 문단 사이에 가로로 긴 선이 그려지며, 콘텐츠가 자연스럽게 구분되는 것을 확인할 수 있습니다.
활용 팁
<hr> 태그는 기본적으로 회색 음영의 얇은 선으로 표시되지만, CSS를 활용하면 색상·굵기·스타일을 자유롭게 꾸밀 수 있습니다. 예를 들어 border: none;과 border-top: 2px solid #333; 속성을 조합하면 원하는 디자인의 구분선을 만들 수 있으니, 단순한 구분을 넘어 페이지 디자인 요소로도 적극적으로 활용해 보세요.