구분선

구분선 (Divider)

콘텐츠 사이에 가로·세로 구분선을 그려 주는 컴포넌트예요. 글의 섹션을 나누거나 테이블의 동작 열처럼 인라인 텍스트와 링크를 구분할 때 써요.

출처: 문서

본문

언제 사용하나요 (When To Use)

글의 섹션을 나눌 때 사용해요.
테이블의 동작 열처럼 인라인 텍스트와 링크를 구분할 때 사용해요.

예시 (Examples)

가로 (Horizontal)

Divider는 기본적으로 horizontal이에요. Divider 안에 텍스트를 넣을 수도 있어요.

import React from 'react';
import { Divider } from 'antd';

const App: React.FC = () => (
  <>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
      probare, quae sunt a te dicta? Refert tamen, quo modo.
    </p>
    <Divider />
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
      probare, quae sunt a te dicta? Refert tamen, quo modo.
    </p>
    <Divider dashed />
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
      probare, quae sunt a te dicta? Refert tamen, quo modo.
    </p>
  </>
);

export default App;

제목이 있는 Divider (Divider with title)

안쪽에 제목을 넣을 수 있어요. titlePlacement="start/end"로 제목의 위치를 정렬할 수 있어요.

import React from 'react';
import { Divider } from 'antd';

const App: React.FC = () => (
  <>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
      probare, quae sunt a te dicta? Refert tamen, quo modo.
    </p>
    <Divider>Text</Divider>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
      probare, quae sunt a te dicta? Refert tamen, quo modo.
    </p>
    <Divider titlePlacement="start">Left Text</Divider>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
      probare, quae sunt a te dicta? Refert tamen, quo modo.
    </p>
    <Divider titlePlacement="end">Right Text</Divider>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
      probare, quae sunt a te dicta? Refert tamen, quo modo.
    </p>
    <Divider titlePlacement="start" styles={{ content: { margin: 0 } }}>
      Left Text margin with 0
    </Divider>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
      probare, quae sunt a te dicta? Refert tamen, quo modo.
    </p>
    <Divider titlePlacement="end" styles={{ content: { margin: '0 50px' } }}>
      Right Text margin with 50px
    </Divider>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
      probare, quae sunt a te dicta? Refert tamen, quo modo.
    </p>
  </>
);

export default App;

구분선의 간격 크기 설정 (Set the spacing size of the divider)

간격의 크기를 지정해요.

import React from 'react';
import { Divider } from 'antd';

const App: React.FC = () => (
  <>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
      probare, quae sunt a te dicta? Refert tamen, quo modo.
    </p>
    <Divider size="small" />
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
      probare, quae sunt a te dicta? Refert tamen, quo modo.
    </p>
    <Divider size="medium" />
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
      probare, quae sunt a te dicta? Refert tamen, quo modo.
    </p>
    <Divider size="large" />
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
      probare, quae sunt a te dicta? Refert tamen, quo modo.
    </p>
  </>
);

export default App;

제목 스타일 없는 텍스트 (Text without heading style)

plain 속성을 설정하면 Divider 텍스트를 제목 스타일이 아닌 일반 스타일로 사용할 수 있어요.

import React from 'react';
import { Divider } from 'antd';

const App: React.FC = () => (
  <>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
      probare, quae sunt a te dicta? Refert tamen, quo modo.
    </p>
    <Divider plain>Text</Divider>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
      probare, quae sunt a te dicta? Refert tamen, quo modo.
    </p>
    <Divider titlePlacement="start" plain>
      Left Text
    </Divider>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
      probare, quae sunt a te dicta? Refert tamen, quo modo.
    </p>
    <Divider titlePlacement="end" plain>
      Right Text
    </Divider>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
      probare, quae sunt a te dicta? Refert tamen, quo modo.
    </p>
  </>
);

export default App;

세로 (Vertical)

orientation="vertical" 또는 vertical을 사용하면 구분선을 세로로 만들 수 있어요.

import React from 'react';
import { Divider } from 'antd';

const App: React.FC = () => (
  <>
    Text
    <Divider orientation="vertical" />
    <a href="#" aria-label="Ant Design component examples">
      Link
    </a>
    <Divider vertical />
    <a href="#" aria-label="Ant Design component examples">
      Link
    </a>
  </>
);

export default App;

변형 (Variant)

Divider는 기본적으로 solid 변형이에요. dashed나 dotted로 바꿀 수 있어요.

import React from 'react';
import { Divider } from 'antd';

const App: React.FC = () => (
  <>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
      probare, quae sunt a te dicta? Refert tamen, quo modo.
    </p>
    <Divider style={{ borderColor: '#7cb305' }}>Solid</Divider>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
      probare, quae sunt a te dicta? Refert tamen, quo modo.
    </p>
    <Divider variant="dotted" style={{ borderColor: '#7cb305' }}>
      Dotted
    </Divider>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
      probare, quae sunt a te dicta? Refert tamen, quo modo.
    </p>
    <Divider variant="dashed" style={{ borderColor: '#7cb305' }} dashed>
      Dashed
    </Divider>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
      probare, quae sunt a te dicta? Refert tamen, quo modo.
    </p>
  </>
);

export default App;

시맨틱 DOM 스타일링 (Custom semantic dom styling)

classNames와 styles로 객체나 함수를 전달해 Divider의 시맨틱 DOM 스타일을 커스터마이즈할 수 있어요.

import React from 'react';
import { Divider } from 'antd';
import type { DividerProps, GetProp } from 'antd';

const classNamesObject: DividerProps['classNames'] = {
  root: 'demo-divider-root',
  content: 'demo-divider-content',
  rail: 'demo-divider-rail',
};

const classNamesFn: DividerProps['classNames'] = (
  info,
): GetProp<DividerProps, 'classNames', 'Return'> => {
  if (info.props.titlePlacement === 'start') {
    return {
      root: 'demo-divider-root--start',
    };
  }
  return {
    root: 'demo-divider-root--default',
  };
};

const stylesObject: DividerProps['styles'] = {
  root: { borderWidth: 2, borderStyle: 'dashed' },
  content: { fontStyle: 'italic' },
  rail: { opacity: 0.85 },
};

const stylesFn: DividerProps['styles'] = (info): GetProp<DividerProps, 'styles', 'Return'> => {
  if (info.props.size === 'small') {
    return {
      root: { opacity: 0.6, cursor: 'default' },
    };
  }
  return {
    root: { backgroundColor: '#fafafa', borderColor: '#d9d9d9' },
  };
};

const App: React.FC = () => (
  <div>
    <Divider classNames={classNamesObject}>classNames Object</Divider>
    <Divider titlePlacement="start" classNames={classNamesFn}>
      classNames Function
    </Divider>
    <Divider styles={stylesObject}>styles Object</Divider>
    <Divider size="small" styles={stylesFn}>
      styles Function
    </Divider>
  </div>
);

export default App;

API

공통 props는 Common props를 참고해요.

속성 (Property)	설명 (Description)	타입 (Type)	기본값 (Default)	버전 (Version)	글로벌 설정
children	감싸는 제목 텍스트예요.	ReactNode	-		×
classNames	컴포넌트 내부의 각 시맨틱 구조에 대한 class를 지정해요. 객체 또는 함수를 지원해요.	Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>	-		6.0.0
dashed	선을 점선으로 표시할지 여부예요.	boolean	false		×
orientation	선이 가로인지 세로인지 지정해요.	`horizontal` \| `vertical`	`horizontal`	-	×
~~orientationMargin~~	제목과 가장 가까운 테두리 사이의 margin-left/right를 지정해요. 단 `titlePlacement`가 `center`가 아니어야 해요. 단위 없는 `string` 타입의 숫자 값을 주면 기본적으로 픽셀(px)로 해석돼요.	string \| number	-		×
plain	Divider 텍스트를 일반 스타일로 표시해요.	boolean	false	4.2.0	×
styles	컴포넌트 내부의 각 시맨틱 구조에 대한 인라인 스타일을 지정해요. 객체 또는 함수를 지원해요.	Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>	-		6.0.0
size	구분선의 크기예요. 가로 레이아웃에서만 유효해요.	`small` \| `medium` \| `large`	-	5.25.0	×
titlePlacement	구분선 안쪽 제목의 위치예요.	`start` \| `end` \| `center`	`center`	-	×
~~type~~	구분선의 방향 타입이에요.	`horizontal` \| `vertical`	`horizontal`	-	×
variant	선을 점선, 점선(dotted), 실선 중 무엇으로 표시할지 지정해요.	`dashed` \| `dotted` \| `solid`	solid	5.20.0	×
vertical	세로 방향 여부예요. `orientation`과 함께 설정하면 `orientation`이 우선돼요.	boolean	false	-	×

시맨틱 DOM (Semantic DOM)

시맨틱 DOM 구조는 https://ant.design/components/divider/semantic.md 에서 확인할 수 있어요.

디자인 토큰 (Design Token)

컴포넌트 토큰 (Divider) (Component Token)

토큰 이름 (Token Name)	설명 (Description)	타입 (Type)	기본값 (Default Value)
orientationMargin	텍스트와 가장자리 사이의 거리예요. 0과 1 사이의 숫자여야 해요.	number	0.05
textPaddingInline	텍스트의 가로 패딩이에요.	PaddingInline<string \| number> \| undefined	1em
verticalMarginInline	세로 Divider의 가로 여백이에요.	MarginInline<string \| number> \| undefined	8

글로벌 토큰 (Global Token)

토큰 이름 (Token Name)	설명 (Description)	타입 (Type)
colorSplit	구분자 색으로 사용돼요. colorBorderSecondary와 같은 색이지만 투명도를 가져요.	string
colorText	W3C 표준을 따르는 기본 텍스트 색이에요. 가장 어두운 중성색이기도 해요.	string
colorTextHeading	제목의 글자 색을 제어해요.	string
fontFamily	Ant Design의 글꼴은 시스템의 기본 인터페이스 글꼴을 우선시하고, 화면 표시에 적합한 대체 글꼴 라이브러리를 제공해 플랫폼과 브라우저에 따라 가독성을 유지하며 친근하고 안정적이며 전문적인 특성을 반영해요.	string
fontSize	디자인 시스템에서 가장 널리 쓰이는 글자 크기로, 여기서 텍스트 그라데이션이 파생돼요.	number
fontSizeLG	큰 글자 크기	number
lineHeight	텍스트의 줄 높이예요.	number
lineWidth	기본 컴포넌트의 테두리 두께예요.	number
margin	중간 크기의 요소 여백을 제어해요.	number
marginLG	큰 크기의 요소 여백을 제어해요.	number
marginXS	작은 크기의 요소 여백을 제어해요.	number

구분선