HTML의 hr 태그: 수평선으로 구분하는 방법

개요

HTML의 <hr> 태그는 내용의 섹션을 구분하기 위해 수평선을 생성하는 요소입니다. 이 태그는 시각적으로 콘텐츠의 변화를 알리고, 페이지 내에서 섹션을 나누는 데 유용합니다.

문서화

<hr> 태그는 “horizontal rule”의 약자로, HTML 문서에 수평선을 삽입하는 역할을 합니다. 주로 텍스트 콘텐츠의 흐름을 구분하고, 시각적인 레이아웃을 향상시키기 위해 사용됩니다. 이 태그는 빈 태그로, 닫는 태그가 필요하지 않습니다. 기본적으로 브라우저의 기본 스타일에 따라 수평선의 두께, 색상, 길이가 설정됩니다.

사용법

<hr>

<hr> 태그는 다른 콘텐츠와 함께 사용할 수 있으며, 다음과 같은 속성을 추가하여 스타일을 조정할 수 있습니다:

width: 수평선의 너비 설정
size: 수평선의 두께 설정
color: 수평선의 색상 설정 (HTML5에서는 CSS 스타일을 사용하는 것이 권장됨)

예시:

<hr style="border: 1px solid #000; width: 50%;">

예제

기본 사용 예

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>hr 태그 예제</title>
</head>
<body>
    <h1>첫 번째 섹션</h1>
    <p>여기는 첫 번째 섹션의 내용입니다.</p>
    <hr>
    <h1>두 번째 섹션</h1>
    <p>여기는 두 번째 섹션의 내용입니다.</p>
</body>
</html>

스타일이 적용된 예

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>스타일 적용된 hr 태그 예제</title>
    <style>
        .custom-hr {
            border: 0;
            height: 2px;
            background-color: #007BFF;
            width: 70%;
            margin: auto;
        }
    </style>
</head>
<body>
    <h1>섹션 1</h1>
    <p>내용 1</p>
    <hr class="custom-hr">
    <h1>섹션 2</h1>
    <p>내용 2</p>
</body>
</html>

설명

<hr> 태그는 문서의 구조를 명확하게 하는 데 유용하지만, 사용 시 몇 가지 유의사항이 있습니다.

접근성: 시각적으로 구분되는 요소이지만, 스크린 리더 사용자에게는 별다른 의미가 없을 수 있습니다. 따라서 ARIA 속성을 활용하여 추가 정보를 제공하는 것이 좋습니다.
스타일 적용: 기본적으로 제공되는 스타일을 변경하려면 CSS를 사용해야 합니다. HTML5에서는 인라인 스타일을 최소화하고 외부 CSS 파일을 사용하는 것이 권장됩니다.
의미론적 사용: <hr> 태그는 단순한 시각적 구분을 넘어서서 콘텐츠의 주제나 내용을 변화시키는 역할을 해야 합니다. 단순히 페이지를 나누기 위해 사용하기보다는, 주제를 명확히 구분짓는 용도로 활용하는 것이 좋습니다.

한 줄 요약

HTML의 <hr> 태그는 콘텐츠 섹션을 구분하기 위한 수평선을 생성하는 요소입니다.