실행 가능한 HTML 문서: hr 가로줄

Q: hr 색은 어떻게 바꾸나요?

기본 테두리를 없애고 직접 그리세요. hr { border: none; border-top: 2px solid #2563eb; }처럼요. color만 지정해도 바뀌긴 하지만, 기본 inset 스타일 때문에 음영이 들어간 두 가지 색으로 남아요.

Q: hr을 더 두껍게 하려면 어떻게 하나요?

테두리 두께를 지정하세요. hr { border: none; border-top: 4px solid #111827; }처럼요. 오래된 튜토리얼의 size 속성은 브라우저에서 아직 동작하지만 더 이상 쓰지 않는 속성이니 CSS를 쓰세요.

Q: HTML에서 세로줄은 어떻게 만드나요?

HTML에는 세로선 태그가 없어요. border-inline-start: 2px solid #e5e7eb처럼 요소 한쪽에 테두리를 주거나, flex 행 안에 배경색이 있는 좁은 요소를 넣으세요.

HTML 가로줄(구분선): hr 태그와 스타일 꾸미기

HTML에서 가로줄은 <hr> 태그로 그어요. 이 태그의 의미, CSS로 색, 두께, 길이, 스타일을 바꾸는 법, 가운데에 텍스트가 있는 구분선 만드는 법, 세로줄 만드는 법을 알아봐요.

이 페이지에는 실행 가능한 에디터가 있습니다 - 편집하고 실행하면 결과를 바로 볼 수 있습니다.

작성자 Kevin Spektor, Co-founder & CTO

Sep 24, 2026 게시됨

가로줄 넣는 법

두 콘텐츠 블록 사이에 <hr>을 넣으세요. 닫는 태그가 없어요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>hr</title>
  <style>
    body { font-family: system-ui, sans-serif; }
  </style>
</head>
<body>
  <p>The end of the first part of the story.</p>
  <hr>
  <p>Three weeks later, a new part begins.</p>
</body>
</html>

기본적으로 선은 컨테이너의 전체 너비에 걸치고, 위아래에 작은 margin이 있으며, 얇은 회색 inset 테두리(밝은 모서리와 어두운 모서리)로 그려져요.

<hr>은 horizontal rule의 약자예요. HTML에서는 주제 구분, 즉 한 섹션 안에서 주제나 장면이 바뀌는 곳을 뜻해요. 스크린 리더는 구분선이라고 알려 줘요. 장식용 선만 원한다면(제목 아래, 카드 주변) 그 요소에 CSS 테두리로 그리세요.

CSS로 hr 꾸미기

기본 모양은 테두리에서 나오기 때문에, <hr>을 확실하게 꾸미는 방법은 테두리를 없애고 직접 테두리 하나를 그리는 거예요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>hr styles</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    hr { margin: 20px 0; }
    .blue { border: none; border-top: 2px solid #2563eb; }
    .thick { border: none; border-top: 6px solid #111827; }
    .dashed { border: none; border-top: 2px dashed #f59e0b; }
    .dotted { border: none; border-top: 3px dotted #16a34a; }
    .short { border: none; border-top: 2px solid #9ca3af; width: 40%; margin-inline: auto; }
    .round { border: none; height: 6px; background: #2563eb; border-radius: 3px; }
  </style>
</head>
<body>
  <hr>
  <hr class="blue">
  <hr class="thick">
  <hr class="dashed">
  <hr class="dotted">
  <hr class="short">
  <hr class="round">
</body>
</html>

바꿀 것	쓰는 법
색	`border-top: 2px solid #2563eb`(`border: none` 다음에)
두께	그 테두리의 너비, 예를 들어 `6px`
스타일	`solid`, `dashed`, `dotted`, `double`
길이	`width: 40%`, 가운데 정렬은 `margin-inline: auto` 추가
둥근 끝	테두리 대신 `height` + `background` + `border-radius`
주변 간격	`margin`

hr에 color: blue만 지정해도 현재 브라우저에서는 선이 바뀌지만, 기본 inset 스타일이 음영을 주고 높이 2px도 그대로예요. 테두리를 초기화하면 원하는 모양을 정확히 얻을 수 있어요.

옛날 hr 속성

오래된 코드는 태그 자체에 속성을 써요.

<hr size="4" width="50%" color="red" noshade align="left">

size, width, color, noshade, align은 더 이상 쓰지 않는 속성이에요. 옛 페이지가 제대로 보이도록 브라우저가 아직 적용하지만, 올바르지 않은 HTML이고 나중에 바꾸기도 어려워요. 위의 CSS로 바꾸세요.

가운데에 텍스트가 있는 구분선

로그인 버튼 두 개 사이의 "또는" 선은 <hr>이 아니에요(hr은 텍스트를 담을 수 없어요). 단어 양쪽에 선을 그린 flex 행이에요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Divider with text</title>
  <style>
    body { font-family: system-ui, sans-serif; max-width: 320px; }
    .divider { display: flex; align-items: center; gap: 12px; color: #6b7280; font-size: 14px; }
    .divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid #d1d5db; }
    button { width: 100%; padding: 10px; }
  </style>
</head>
<body>
  <button type="button">Continue with email</button>
  <p class="divider">or</p>
  <button type="button">Continue with a passkey</button>
</body>
</html>

::before와 ::after 두 조각이 flex: 1로 남는 공간을 반씩 차지하고 위쪽 테두리를 그려요. or를 더 긴 단어로 바꾸면 선이 알맞게 줄어들어요.

세로줄

<hr>의 세로 버전은 없어요. 요소 한쪽에 테두리를 주거나, flex 행 안에 얇은 요소를 넣어 세로줄을 그리세요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Vertical line</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .quote { border-inline-start: 4px solid #2563eb; padding-inline-start: 12px; }
    .row { display: flex; align-items: center; gap: 16px; }
    .vr { width: 1px; align-self: stretch; background: #d1d5db; }
  </style>
</head>
<body>
  <p class="quote">A border on the start side makes a vertical line.</p>
  <div class="row">
    <span>Home</span>
    <span class="vr"></span>
    <span>Docs</span>
    <span class="vr"></span>
    <span>Blog</span>
  </div>
</body>
</html>

border-inline-start는 텍스트가 시작하는 쪽에 선을 둬요. 영어에서는 왼쪽, 아랍어나 히브리어에서는 오른쪽이라서 레이아웃이 양방향 모두에서 동작해요.

자주 하는 실수

</hr>을 씀. <hr>은 빈 요소예요. <hr>이나 <hr />이면 충분해요.
장식에 <hr>을 씀. 스크린 리더가 하나하나 알려 줘요. 시각적인 선은 CSS에서 그리세요.
color만으로 꾸밈. border: none으로 테두리를 초기화하고 border-top을 지정하세요.
<br>이나 밑줄 문자로 선을 그림. <hr>이나 테두리를 쓰세요. <br>의 용도는 줄바꿈을 보세요.
더 이상 쓰지 않는 속성을 씀. size, width, color, noshade를 CSS로 옮기세요.

자주 묻는 질문

HTML에서 가로줄은 어떻게 넣나요?

<hr> 태그를 한 줄에 단독으로 쓰세요. 닫는 태그가 없는 빈 요소이고, 컨테이너의 전체 너비에 걸쳐 선을 그어요.

hr 색은 어떻게 바꾸나요?

기본 테두리를 없애고 직접 그리세요. hr { border: none; border-top: 2px solid #2563eb; }처럼요. color만 지정해도 바뀌긴 하지만, 기본 inset 스타일 때문에 음영이 들어간 두 가지 색으로 남아요.

hr을 더 두껍게 하려면 어떻게 하나요?

테두리 두께를 지정하세요. hr { border: none; border-top: 4px solid #111827; }처럼요. 오래된 튜토리얼의 size 속성은 브라우저에서 아직 동작하지만 더 이상 쓰지 않는 속성이니 CSS를 쓰세요.

hr은 무엇의 약자인가요?

Horizontal rule(가로 선)이에요. 현재 HTML에서는 주제 구분, 즉 문단 사이에서 주제나 장면이 바뀌는 곳을 뜻해요. 스크린 리더는 구분선이라고 알려 줘요.

HTML에서 세로줄은 어떻게 만드나요?

HTML에는 세로선 태그가 없어요. border-inline-start: 2px solid #e5e7eb처럼 요소 한쪽에 테두리를 주거나, flex 행 안에 배경색이 있는 좁은 요소를 넣으세요.