CSS로 세로선 만드는 방법 완벽 정리

CSS에서 세로선을 만드는 가장 간단하고 널리 사용되는 방법은 border-left 속성을 활용하는 것입니다. 요소의 왼쪽 테두리에 선을 그리고, 높이를 지정해주면 원하는 두께와 색상의 세로선을 쉽게 구현할 수 있습니다.

기본 예제 코드

아래는 CSS를 이용해 세로선을 만드는 전체 HTML 예제입니다.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  .vLine {
    border-left: 6px solid rgb(128, 0, 128);
    height: 500px;
    margin-left: 5%;
  }
</style>
</head>
<body>
<h1>세로선 예제</h1>
<div class="vLine"></div>
</body>
</html>

코드 설명

border-left: 6px solid rgb(128, 0, 128); — 왼쪽 테두리에 두께 6px, 보라색(rgb(128, 0, 128))의 실선을 생성합니다. 이 부분이 실제로 화면에 보이는 세로선이 됩니다.
height: 500px; — 세로선의 길이를 500px로 지정합니다. 원하는 길이에 맞게 조절할 수 있습니다.
margin-left: 5%; — 화면 왼쪽에서 5% 떨어진 위치에 세로선을 배치합니다.

실행 결과

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

CSS로 세로선 만드는 방법 완벽 정리

추가 팁

세로선의 스타일은 다양하게 변경할 수 있습니다. 예를 들어 solid 대신 dashed(점선), dotted(점선), double(이중선) 값을 사용하면 다른 형태의 선을 만들 수 있으며, 색상 역시 HEX 코드나 색상 이름으로 자유롭게 지정 가능합니다. 또한 height 대신 vh 단위를 사용하면 화면 크기에 따라 유동적으로 반응하는 세로선을 만들 수도 있습니다.