<hr> 요소는 웹 페이지에서 콘텐츠 사이에 주제별 구분선을 삽입할 때 사용하는 HTML 태그입니다. 기본 상태에서는 단순한 회색 가로선으로 표시되지만, CSS를 활용하면 선의 굵기, 색상, 종류(실선·점선·이중선 등)를 자유롭게 조절할 수 있습니다.
CSS로 hr 요소 스타일링하기
CSS로 <hr> 요소의 스타일을 지정하려면 아래 예제 코드를 참고하세요.
예제 코드
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<style>
body{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 20px;
}
hr{
margin-bottom: 20px;
}
.solid {
border-top: 5px solid rgb(16, 2, 141);
}
.dashed {
border-top: 5px dashed rgb(190, 13, 146);
}
.double {
border-top: 5px double rgb(22, 145, 11);
}
.dotted {
border: 5px dotted rgb(200, 255, 0);
}
.round {
border: 5px solid rgb(35, 196, 142);
border-radius: 5px;
}
</style>
</head>
<body>
<h1 style="text-align: center;">HR styling example</h1>
<hr class="solid">
<hr class="dashed">
<hr class="double">
<hr class="dotted">
<hr class="round">
</body>
</html>
코드 설명
각 클래스가 어떤 스타일을 적용하는지 살펴보겠습니다.
- .solid – 5px 두께의 실선(solid) 구분선을 표시합니다.
- .dashed – 5px 두께의 파선(dashed) 구분선을 표시합니다.
- .double – 5px 두께의 이중선(double) 구분선을 표시합니다.
- .dotted – 5px 두께의 점선(dotted) 구분선을 표시합니다.
- .round –
border-radius속성을 추가해 둥근 느낌의 구분선을 만듭니다.
이처럼 border-top 또는 border 속성의 선 스타일 값만 바꾸면 하나의 <hr> 요소로도 다양한 디자인의 구분선을 손쉽게 구현할 수 있습니다.
실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
