메인 콘텐츠로 건너뛰기
Frutjam logo Frutjam
v2.2.2
Theme

분배기 구성 요소

마지막 업데이트:

CSS 전용 Tailwind CSS 구분선 — 선택 사항인 중앙 라벨이 있는 가로 및 세로입니다. 색상 및 크기 변형. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.

구분선 구성 요소는 콘텐츠 섹션을 시각적으로 구분합니다. 가볍고 의미론적인 구분선은 정보를 계층적으로 구조화하고 가독성을 높이는 데 도움이 됩니다. Frutjam 구분선 시스템은 섹션 간 레이블이 지정된 구분을 위한 선택적 텍스트 콘텐츠를 사용하여 가로 및 세로 방향을 지원합니다.

CSS 전용이며 JavaScript가 필요하지 않습니다. WCAG AA 액세스 가능 및 프레임워크에 구애받지 않음 — Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.

수업 유형 설명
divider베이스선택적 중앙 레이블 텍스트가 있는 가로 눈금자
divider-horizontal수정자가로 방향(기본값)
divider-vertical수정자수직 방향
divider-start수정자레이블 텍스트를 시작 부분에 정렬합니다.
divider-end수정자레이블 텍스트를 끝에 정렬합니다.
divider-solid스타일실선 스타일
divider-dashed스타일점선 스타일
divider-dotted스타일점선 스타일
divider-primary색상기본 테마 색상
divider-secondary색상보조 테마 색상
divider-accent색상악센트 테마 색상
divider-neutral색상중립 테마 색상
divider-info색상정보 의미 색상
divider-success색상성공 의미 색상
divider-warning색상경고 의미 색상
divider-error색상오류 의미 색상

기본 사용법

<div class="divider"></div>

<div className="divider"></div>

분배기 방향

수평 분배기

html 
<div class="divider divider-horizontal"></div>

수직 분배기

html 
1
2
3
4
5
6
7
8
9
<div class="flex gap-4 w-full">
    <div class="card card-outline w-full">
       <div class="card-content">content 1</div>
    </div>
    <div class="divider divider-vertical"></div>
    <div class="card card-outline w-full">
        <div class="card-content">content 2</div>
    </div>
</div>

텍스트가 있는 구분선

텍스트가 있는 가로형

html 
<div class="divider divider-horizontal">OR</div>

텍스트가 있는 세로형

html 
1
2
3
4
5
6
7
8
9
<div class="flex gap-4 w-full">
    <div class="card card-outline w-full">
       <div class="card-content">content 1</div>
    </div>
    <div class="divider divider-vertical">OR</div>
    <div class="card card-outline w-full">
        <div class="card-content">content 2</div>
    </div>
</div>

구분선 색상

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<div class="flex flex-col gap-8 w-full">
  <div class="divider">Default</div>
  <div class="divider divider-neutral">Neutral</div>
  <div class="divider divider-primary">Primary</div>
  <div class="divider divider-secondary">Secondary</div>
  <div class="divider divider-accent">Accent</div>
  <div class="divider divider-success">Success</div>
  <div class="divider divider-warning">Warning</div>
  <div class="divider divider-info">Info</div>
  <div class="divider divider-error">Error</div>
</div>

구분선 내용 위치

구분선 내의 텍스트를 줄의 시작, 가운데(기본값) 또는 끝으로 정렬할 수 있습니다.

수평 위치

html 
1
2
3
4
5
<div class="flex w-full gap-8 flex-col">
  <div class="divider divider-start">Start</div>
  <div class="divider">Default</div>
  <div class="divider divider-end">End</div>
</div>

수직 위치

html 
1
2
3
4
5
<div class="flex justify-center w-full h-64 gap-12">
  <div class="divider divider-vertical divider-start">Start</div>
  <div class="divider divider-vertical">Default</div>
  <div class="divider divider-vertical divider-end">End</div>
</div>

Claude Code, Cursor 또는 다른 AI 편집기를 사용하시나요?

Cherry MCP는 AI 편집기에 요청 시 정확한 분할기 클래스 이름과 구조를 제공합니다. 더 이상 환각에 빠진 수업은 없습니다.

Cherry MCP를 사용해 보세요