HTML에서 세로선 만들기

HTML 페이지에 세로선을 만들려면 CSS로 높이, 두께, 색상을 지정합니다. 장식용 구분선에는 border-left를 사용하고, 주제 전환을 나타낼 때는 <hr>의 스타일을 조정할 수 있습니다. 콘텐츠 블록 사이에 구분선을 배치하려면 플렉스박스 또는 CSS Grid를 사용합니다. 선의 모양은 HTML만으로 제어할 수 없습니다.

CSS border-left로 세로선 만들기

왼쪽 테두리는 간단한 장식용 선을 만드는 방법입니다. 요소에 명시적인 높이를 지정한 다음 테두리의 두께와 색상을 설정합니다. 이 Node.js 스크립트는 완전한 예제 페이지를 vertical-line.html 파일로 저장합니다. 브라우저에서 파일을 열어 결과를 확인할 수 있습니다.

다음은 완전한 페이지 생성기입니다. Node.js로 실행하면 두 개의 라벨 사이에 파란색 구분선이 있는 페이지를 만듭니다.

const { writeFileSync } = require("node:fs");

const page = `<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Vertical line with a border</title>
  <style>
    .row { display: flex; align-items: center; }
    .line {
      height: 8rem;
      border-left: 2px solid #2563eb;
      margin-inline: 1rem;
    }
  </style>
</head>
<body>
  <div class="row">
    <span>Account details</span>
    <div class="line" aria-hidden="true"></div>
    <span>Preferences</span>
  </div>
</body>
</html>`;

writeFileSync("vertical-line.html", page);
console.log("Created vertical-line.html");

CSS는 선의 길이를 8 rem, 두께를 2 pixel로 설정합니다. 이 값과 테두리 색상을 페이지에 맞게 바꾸세요. margin-inline은 왼쪽에서 오른쪽으로 쓰는 레이아웃과 오른쪽에서 왼쪽으로 쓰는 레이아웃 모두에서 양쪽에 간격을 추가합니다. 이 선은 장식용이므로 aria-hidden="true"를 지정하면 접근성 트리에서 제외됩니다. 백분율 높이를 사용하려면 포함 블록의 높이가 확정되어 있어야 합니다. 그렇지 않으면 기대한 크기로 계산되지 않을 수 있습니다.

<hr> 요소를 세로선으로 조정하기

HTML 소스에서 <hr>로 작성하는 hr 요소는 페이지의 두 부분 사이에 주제 전환이 있음을 나타냅니다. 콘텐츠의 의미에 맞을 때 사용하세요. CSS는 요소의 의미가 아니라 모양을 바꿉니다. 브라우저는 기본 스타일을 적용하므로, 폭이 좁은 세로선을 그리기 전에 기본 테두리를 초기화하세요. 예를 들어 <hr class="vertical-rule">을 사용하고 width: 0; height: 8rem; border: 0; border-left: 2px solid #2563eb; margin: 1rem;을 적용할 수 있습니다. 화면에 보이는 너비는 왼쪽 테두리에서 결정됩니다. 이 요소는 일반 문서 흐름을 따라 자체 줄을 차지합니다. 나란히 놓인 콘텐츠 사이에 배치하려면 Flexbox 또는 Grid 컨테이너에 넣으세요.

플렉스박스 또는 CSS Grid로 콘텐츠 사이에 구분선 배치하기

플렉스박스와 Grid는 구분선을 레이아웃 항목으로 배치하고, 테두리나 배경은 실제로 보이는 선을 그립니다. 플렉스박스 행에서는 두 콘텐츠 영역 사이에 구분선 요소를 둡니다. 부모 요소에 display: flex; align-items: stretch; gap: 1rem;을 설정하고, 각 콘텐츠 영역에는 flex: 1;, 구분선에는 border-left: 2px solid #2563eb;을 지정합니다. 선은 행의 높이만큼 늘어나며, 행의 높이는 더 긴 콘텐츠 영역을 따릅니다. 장식용 구분선에는 aria-hidden="true"를 지정하세요.

Grid에서는 가운데 트랙을 선으로 사용하도록 열을 세 개 만듭니다: grid-template-columns: minmax(0, 1fr) 2px minmax(0, 1fr); gap: 1rem;. 패널은 첫 번째와 세 번째 열에 놓고, 가운데에는 background: #2563eb를 적용한 구분선 요소를 둡니다. 가운데 트랙의 2 pixel 너비가 선의 두께를 결정합니다. 화면이 좁으면 미디어 쿼리로 패널을 세로로 쌓고, 읽는 순서에 더 적합하다면 세로선을 가로 테두리로 바꾸세요. 간단한 장식에는 border-left, 의미상 주제 전환에는 <hr>, 레이아웃 항목 사이의 배치에는 플렉스박스 또는 CSS Grid를 선택하면 됩니다.