CSS로 다양한 스타일의 구분선(hr) 만드는 방법

CSS에서는 border 속성을 활용하면 점선, 파선, 실선, 이중선 등 다양한 스타일의 구분선을 간단하게 만들 수 있습니다. <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;
    }
    .dashed {
        border-top: 3px dashed rgb(216, 22, 22);
    }
    .dotted {
        border-top: 3px dotted rgb(8, 11, 167);
    }
    .solid {
        border-top: 3px solid rgb(18, 167, 38);
    }
    .rounded {
        border-top: 8px solid rgb(200, 255, 0);
        border-radius: 5px;
    }
    .double {
        border-top: 3px double rgb(219, 46, 196);
    }
</style>
</head>
<body>
<h1>Dividers Example</h1>
<p>Dashed</p>
<hr class="dashed" />
<p>Dotted</p>
<hr class="dotted" />
<p>Solid</p>
<hr class="solid" />
<p>Rounded</p>
<hr class="rounded" />
<p>Double</p>
<hr class="double" />
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 출력 결과를 확인할 수 있습니다.

CSS로 다양한 스타일의 구분선(hr) 만드는 방법

코드 설명

dashed(파선): 빨간색 3px 두께의 대시(—) 형태 선이 적용됩니다.
dotted(점선): 파란색 3px 두께의 점(.) 형태 선이 적용됩니다.
solid(실선): 초록색 3px 두께의 일반적인 실선이 적용됩니다.
rounded(둥근 선): 두께가 8px인 노란색 선에 border-radius를 추가해 양 끝이 둥글게 처리되었습니다.
double(이중선): 핑크색 겹선 스타일이 적용됩니다.

이처럼 border-style, border-width, border-color 값을 조합하면 웹 페이지 디자인에 맞는 다양한 구분선을 자유롭게 연출할 수 있습니다.