syidaxdesign system
홈 가격 내 정보
ComponentsLayout

Divider

콘텐츠 사이에 가로 또는 세로 구분선을 배치합니다.

<sy-divider>설치 안내 기본 사용법
Live preview
컴포넌트를 조작하면 여기에 결과가 표시됩니다.
코드 보기
HTML
<div style="display:grid;gap:16px;width:100%"><span>프로젝트 정보</span>
  <sy-divider
    type="horizontal"
    thickness="1"
    color=""
  ></sy-divider><span>멤버와 권한</span>
</div>

사용 가이드

#

서로 다른 의미의 내용 사이에 명확한 구분이 필요할 때 사용하세요. 여백만으로 충분하면 구분선을 더하지 않아도 됩니다.

가로 구분
기본 방향입니다. 위아래 콘텐츠를 구분합니다.
세로 구분
type="vertical"을 사용하고 부모 영역의 높이를 확보하세요.
선의 범위·두께
inset으로 양 끝의 여백을, thickness로 두께(px)를 정합니다. color는 CSS 색상이며 기본값은 테마를 따릅니다.

예제

#

콘텐츠 구분

기본 테마의 가로선으로 두 내용 영역을 구분합니다.

코드 보기
HTML
<div style="display:grid;gap:16px;width:100%"><span>기본 설정</span>
  <sy-divider></sy-divider><span>고급 설정</span>
</div>

동작 구분

같은 줄의 동작을 나눕니다. 부모에 높이를 지정했습니다.

코드 보기
HTML
<div style="display:flex;align-items:center;height:64px">
  <sy-button variant="borderless">편집</sy-button>
  <sy-divider type="vertical"></sy-divider>
  <sy-button variant="borderless">삭제</sy-button>
</div>

안쪽 여백

구분선의 시작과 끝을 콘텐츠 안쪽으로 들여놓습니다.

코드 보기
HTML
<div style="display:grid;gap:16px;width:100%"><span>윗부분</span>
  <sy-divider inset></sy-divider><span>아랫부분</span>
</div>

색상과 두께

특별한 강조가 필요한 경우에만 색상과 두께를 지정하세요.

코드 보기
HTML
<div style="display:grid;gap:16px;width:100%">
  <sy-divider thickness="2" color="#6750a4"></sy-divider>
  <sy-divider thickness="4" color="#8d7ab8"></sy-divider>
</div>

API reference

#

이름에 마우스를 올리거나 키보드로 선택하면 적용 코드를 확인할 수 있습니다. 터치 화면에서는 이름을 누르세요.

<sy-divider>

Properties

Attribute / PropertyTypeDefaultDescription
'horizontal' | 'vertical''horizontal'가로 또는 세로 구분선입니다.
booleanfalse구분선 양 끝에 여백을 둡니다.
number1구분선의 두께(px)입니다.
string''컴포넌트에 적용할 색상입니다. 지원하는 값은 타입을 확인하세요.
Design SystemTab 이동 Enter 열기