<hr> 태그는 웹페이지에 수평선을 그리는 데 사용됩니다. 이 태그는 서로 다른 섹션 사이에 수평선을 그려 콘텐츠를 분리하는 데 가장 유용한 HTML 태그 중 하나입니다. 이 가이드에서는 <hr>의 두께를 변경하는 방법을 알아봅니다. 다양한 방법으로 CSS를 사용하여 태그를 지정하세요.
구문
hr {
height: value;
border: value;
}
HTML의 hr 태그
<hr> 태그는 수평선을 의미합니다. 수평선을 사용하여 웹페이지 섹션 사이에 시각적 구분선을 만드는 자동 닫힘 태그입니다.
예
<!DOCTYPE html>
<html>
<head>
<style>
hr {
margin: 20px 0;
}
</style>
</head>
<body>
<p>Section 1</p>
<hr>
<p>Section 2</p>
</body>
</html>
Two text sections separated by a thin horizontal line with proper spacing.
방법 1:Height 속성 사용
이 방법에서는 height을 직접 사용합니다. <hr>의 두께를 변경하는 CSS 속성 태그. 이 방법은 수평선이 나타나는 두께를 제어합니다
예
<!DOCTYPE html>
<html>
<head>
<style>
hr {
height: 5px;
background-color: black;
border: none;
margin: 20px 0;
}
</style>
</head>
<body>
<p>Above the line</p>
<hr>
<p>Below the line</p>
</body>
</html>
Two text sections separated by a thick 5px black horizontal line.
방법 2:테두리 속성 사용
이 방법에서는 border-top를 사용합니다. 또는 border-bottom 더 두꺼운 수평선을 만드는 CSS의 속성입니다. 이 방법은 더욱 유연하며 점선이나 점선 등 다양한 디자인을 지원합니다.
예
<!DOCTYPE html>
<html>
<head>
<style>
hr {
border: none;
border-top: 6px solid blue;
margin: 20px 0;
}
</style>
</head>
<body>
<p>Above the Line</p>
<hr>
<p>Below the Line</p>
</body>
</html>
Two text sections separated by a thick 6px blue horizontal line.
비교
결론
<hr>의 두께를 쉽게 변경할 수 있습니다. CSS를 사용하여 태그를 지정합니다. height 실선의 경우 메서드가 간단하지만 border 방법은 더 많은 스타일링 유연성을 제공합니다. 디자인 요구 사항에 따라 선택하세요.
