Divider

콘텐츠 그룹을 나눕니다. 여백과 배경 차이로 구획이 되면 쓰지 않고, 꼭 필요한 곳에만 아주 연하게.

1. Default

영역을 나누는 기본 가로 구분선입니다.

기본 설정

고급 설정

HTML

<div style="width:100%;max-width:480px">
  <p class="t-body-2" style="margin:0">기본 설정</p>
  <hr class="divider">
  <p class="t-body-2" style="margin:0">고급 설정</p>
</div>

CSS · .divider

/* JS Design System v0.6 · .divider · 토큰(var(--*))은 assets/style.css :root 참고 */
.topbar .divider.vertical{height:20px}
.divider{border:0;border-top:1px solid var(--border-default);margin:16px 0;width:100%}
.divider.strong{border-color:var(--border-strong)}
.divider.dashed{border-top-style:dashed}
.divider.label{display:flex;align-items:center;gap:12px;border:0;font-size:12px;color:var(--text-tertiary);white-space:nowrap}
.divider.label::before,.divider.label::after{content:"";flex:1;height:1px;background:var(--border-default)}
.divider.vertical{width:1px;height:24px;border:0;background:var(--border-default);margin:0 12px;display:inline-block;vertical-align:middle;flex:none}

React · @jiran/ds-react

import { Divider } from "@jiran/ds-react";

export default function Example() {
  return (
    <div style={{ width: "100%", maxWidth: 480 }}>
      <p className="t-body-2" style={{ margin: 0 }}>기본 설정</p>
      <Divider />
      <p className="t-body-2" style={{ margin: 0 }}>고급 설정</p>
    </div>
  );
}

2. Horizontal

hr.divider. 강조는 .strong, 임시 구분은 .dashed.

기본 설정

고급 설정

감사 로그

HTML

<div style="width:100%;max-width:480px">
  <p class="t-body-2" style="margin:0">기본 설정</p>
  <hr class="divider">
  <p class="t-body-2" style="margin:0">고급 설정</p>
  <hr class="divider strong">
  <p class="t-body-2" style="margin:0">감사 로그</p>
  <hr class="divider dashed">
</div>

CSS · .divider

/* JS Design System v0.6 · .divider · 토큰(var(--*))은 assets/style.css :root 참고 */
.topbar .divider.vertical{height:20px}
.divider{border:0;border-top:1px solid var(--border-default);margin:16px 0;width:100%}
.divider.strong{border-color:var(--border-strong)}
.divider.dashed{border-top-style:dashed}
.divider.label{display:flex;align-items:center;gap:12px;border:0;font-size:12px;color:var(--text-tertiary);white-space:nowrap}
.divider.label::before,.divider.label::after{content:"";flex:1;height:1px;background:var(--border-default)}
.divider.vertical{width:1px;height:24px;border:0;background:var(--border-default);margin:0 12px;display:inline-block;vertical-align:middle;flex:none}

React · @jiran/ds-react

import { Divider } from "@jiran/ds-react";

export default function Example() {
  return (
    <div style={{ width: "100%", maxWidth: 480 }}>
      <p className="t-body-2" style={{ margin: 0 }}>기본 설정</p>
      <Divider />
      <p className="t-body-2" style={{ margin: 0 }}>고급 설정</p>
      <Divider strong />
      <p className="t-body-2" style={{ margin: 0 }}>감사 로그</p>
      <Divider dashed />
    </div>
  );
}

3. With Label

구분 의미가 필요할 때 가운데 라벨.

또는

2026-09-07

HTML

<div style="width:100%;max-width:480px"><div class="divider label" role="separator">또는</div><div class="divider label" role="separator">2026-09-07</div></div>

CSS · .divider

/* JS Design System v0.6 · .divider · 토큰(var(--*))은 assets/style.css :root 참고 */
.topbar .divider.vertical{height:20px}
.divider{border:0;border-top:1px solid var(--border-default);margin:16px 0;width:100%}
.divider.strong{border-color:var(--border-strong)}
.divider.dashed{border-top-style:dashed}
.divider.label{display:flex;align-items:center;gap:12px;border:0;font-size:12px;color:var(--text-tertiary);white-space:nowrap}
.divider.label::before,.divider.label::after{content:"";flex:1;height:1px;background:var(--border-default)}
.divider.vertical{width:1px;height:24px;border:0;background:var(--border-default);margin:0 12px;display:inline-block;vertical-align:middle;flex:none}

React · @jiran/ds-react

import { Divider } from "@jiran/ds-react";

export default function Example() {
  return (
    <div style={{ width: "100%", maxWidth: 480 }}>
      <Divider label="또는" />
      <Divider label="2026-09-07" />
    </div>
  );
}

4. Vertical

툴바에서 버튼 그룹을 나눕니다. 높이 24.

HTML

<div style="display:flex;align-items:center">
  <button type="button" class="btn sm tertiary">편집</button>
  <button type="button" class="btn sm tertiary">복제</button>
  <span class="divider vertical" role="separator" aria-orientation="vertical"></span>
  <button type="button" class="btn sm tertiary">내보내기</button>
  <span class="divider vertical" role="separator" aria-orientation="vertical"></span>
  <button type="button" class="btn sm danger secondary">삭제</button>
</div>

CSS · .divider

/* JS Design System v0.6 · .divider · 토큰(var(--*))은 assets/style.css :root 참고 */
.topbar .divider.vertical{height:20px}
.divider{border:0;border-top:1px solid var(--border-default);margin:16px 0;width:100%}
.divider.strong{border-color:var(--border-strong)}
.divider.dashed{border-top-style:dashed}
.divider.label{display:flex;align-items:center;gap:12px;border:0;font-size:12px;color:var(--text-tertiary);white-space:nowrap}
.divider.label::before,.divider.label::after{content:"";flex:1;height:1px;background:var(--border-default)}
.divider.vertical{width:1px;height:24px;border:0;background:var(--border-default);margin:0 12px;display:inline-block;vertical-align:middle;flex:none}

React · @jiran/ds-react

import { Button, Divider } from "@jiran/ds-react";

export default function Example() {
  return (
    <div style={{ display: "flex", alignItems: "center" }}>
      <Button size="sm" variant="tertiary">편집</Button>
      <Button size="sm" variant="tertiary">복제</Button>
      <Divider orientation="vertical" />
      <Button size="sm" variant="tertiary">내보내기</Button>
      <Divider orientation="vertical" />
      <Button size="sm" variant="danger-secondary">삭제</Button>
    </div>
  );
}

Props

HTML 에서는 클래스와 속성으로, React(@jiran/ds-react)에서는 같은 이름의 prop(variant · size …)으로 변형·상태를 지정합니다.

Prop / Class	Type · Values	Default	Description
.divider	`hr \| div`	`—`	가로 1px border/default, margin 16 0
.strong / .dashed	`boolean`	`false`	border/strong / 점선
.label	`div`	`—`	가운데 라벨 텍스트
.vertical	`span`	`—`	세로 1×24, 좌우 12

Usage

React: @jiran/ds-react 패키지를 설치하고 style.css 를 한 번 import 하면 위 React 탭 코드를 그대로 쓸 수 있습니다(React Package). HTML: assets/style.css 를 연결하고(일부만 필요하면 아래 컴포넌트 CSS 복사), 동작이 필요하면 assets/ds.js 를 함께 넣습니다 — 이 페이지의 프리뷰가 그 스크립트로 동작합니다. 색은 전부 토큰(var(--accent) 등)을 참조하므로 --accent-* 만 제품 컬러로 바꾸면 됩니다.

React @jiran/ds-react

npm i @jiran/ds-react

// main.tsx — 앱 진입점에서 한 번
import "@jiran/ds-react/style.css";

// 컴포넌트
import { Divider } from "@jiran/ds-react";

HTML

<!-- 1) 토큰 + 전체 컴포넌트 스타일 한 번에 연결 -->
<link rel="stylesheet" href="assets/style.css">
<!-- 동작(드롭다운·탭·달력·표 정렬/선택·토스트 등) — 순수 JS 한 파일. React 제품은 불필요 -->
<script src="assets/ds.js" defer></script>

<!-- 2) 또는 아래 "Component CSS" 만 프로젝트 CSS 에 붙이고,
        :root 토큰은 Foundations › Design Token 에서 복사 -->

Component CSS .divider

/* JS Design System v0.6 · .divider · 토큰(var(--*))은 assets/style.css :root 참고 */
.topbar .divider.vertical{height:20px}
.divider{border:0;border-top:1px solid var(--border-default);margin:16px 0;width:100%}
.divider.strong{border-color:var(--border-strong)}
.divider.dashed{border-top-style:dashed}
.divider.label{display:flex;align-items:center;gap:12px;border:0;font-size:12px;color:var(--text-tertiary);white-space:nowrap}
.divider.label::before,.divider.label::after{content:"";flex:1;height:1px;background:var(--border-default)}
.divider.vertical{width:1px;height:24px;border:0;background:var(--border-default);margin:0 12px;display:inline-block;vertical-align:middle;flex:none}