<hr> 태그는 웹 페이지에 가로줄을 그릴 때 사용하는 HTML 요소입니다. 서로 다른 콘텐츠 섹션 사이에 수평 구분선을 넣어 시각적으로 내용을 분리하는 데 매우 유용합니다. 이 글에서는 CSS를 활용해 <hr> 태그의 두께를 변경하는 다양한 방법을 소개합니다.
기본 문법
hr {
height: 값;
border: 값;
}
HTML의 <hr> 태그란?
<hr>은 'horizontal rule(수평 규칙선)'을 의미하며, 스스로 닫히는(self-closing) 태그입니다. 웹 페이지의 각 섹션 사이에 가로줄 형태의 시각적 구분선을 만들어 줍니다.
예제
<!DOCTYPE html>
<html>
<head>
<style>
hr {
margin: 20px 0;
}
</style>
</head>
<body>
<p>첫 번째 섹션</p>
<hr>
<p>두 번째 섹션</p>
</body>
</html>
위 코드를 실행하면 적절한 여백과 함께 얇은 가로줄로 구분된 두 개의 텍스트 섹션이 표시됩니다.
방법 1: height 속성 사용하기
가장 직관적인 방법으로, CSS의 height 속성을 직접 지정하여 <hr> 태그의 두께를 조절할 수 있습니다. 이 방식은 가로줄이 화면에 표시되는 실제 높이를 결정합니다.
예제
<!DOCTYPE html>
<html>
<head>
<style>
hr {
height: 5px;
background-color: black;
border: none;
margin: 20px 0;
}
</style>
</head>
<body>
<p>선 위의 텍스트</p>
<hr>
<p>선 아래의 텍스트</p>
</body>
</html>
이 예제에서는 두 텍스트 섹션 사이에 두께 5px의 검은색 가로줄이 나타납니다. 참고로 border: none;을 함께 지정해야 기본 테두리가 제거되어 원하는 두께가 정확하게 적용됩니다.
방법 2: border 속성 사용하기
두 번째 방법은 CSS의 border-top 또는 border-bottom 속성을 활용하는 것입니다. 이 방식은 더 유연해서 점선(dashed)이나 도트(dotted) 스타일 등 다양한 디자인을 적용할 수 있다는 장점이 있습니다.
예제
<!DOCTYPE html>
<html>
<head>
<style>
hr {
border: none;
border-top: 6px solid blue;
margin: 20px 0;
}
</style>
</head>
<body>
<p>선 위의 텍스트</p>
<hr>
<p>선 아래의 텍스트</p>
</body>
</html>
실행 결과, 두 텍스트 섹션 사이에 두께 6px의 파란색 가로줄이 그려집니다. solid 대신 dashed나 dotted 값을 사용하면 점선 또는 파선 스타일로도 쉽게 변경할 수 있습니다.
두 방법 비교
| 방법 | 장점 | 추천 사용 사례 |
|---|---|---|
| height 속성 | 간단하고 직관적 | 단색 실선 구분선 |
| border 속성 | 다양한 스타일 커스터마이징 가능 | 점선, 파선 등 디자인된 구분선 |
마무리
CSS만으로 <hr> 태그의 두께를 손쉽게 변경할 수 있습니다. 단순한 실선에는 height 속성이 깔끔하고 효율적이며, 점선이나 다채로운 디자인이 필요하다면 border 속성이 더 적합합니다. 프로젝트의 디자인 요구 사항에 맞게 두 방법 중 하나를 선택해 활용해 보세요.