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

타임라인 구성요소

마지막 업데이트:

시간순 이벤트 목록을 위한 CSS 전용 Tailwind CSS 타임라인입니다. 아이콘, 콘텐츠, 연결선 슬롯이 있는 세로 레이아웃입니다. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.

타임라인 구성 요소는 일련의 이벤트, 이정표 또는 설명 진행을 시간순으로 표시합니다. 의미론적 HTML로 구축된 타임라인은 사용자가 과거 진행 상황과 프로젝트 단계를 이해하는 데 도움이 됩니다. Frutjam 타임라인 시스템은 다양한 방향, 색상 및 항목 스타일을 지원하므로 프로젝트 기록, 릴리스 노트 및 여정 지도에 이상적입니다.

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

수업 유형 설명
timeline베이스시간순으로 정렬된 이벤트 목록
timeline-item수정자개별 이벤트 행 — 각 <li>에 배치
timeline-start수정자타임라인 축 앞에 배치된 콘텐츠
timeline-middle수정자타임라인 축 중심에 있는 점
timeline-end수정자타임라인 축 뒤에 배치된 콘텐츠
timeline-horizontal수정자수평 레이아웃
timeline-vertical수정자세로 레이아웃(기본값)
timeline-snap-start수정자시작 열을 숨깁니다. 점이 왼쪽 가장자리에 정렬됩니다.
timeline-snap-end수정자끝 열을 숨깁니다. 점이 오른쪽 가장자리에 맞춰 정렬됩니다.
timeline-primary색상기본 색상 점 및 연결선 - timeline-item에 배치
timeline-secondary색상보조 색상 점 및 연결선 - timeline-item에 배치
timeline-accent색상강조 색상 점 및 연결선 - timeline-item에 배치
timeline-neutral색상중간색 점 및 연결선 - timeline-item에 배치
timeline-info색상정보 색상 점 및 커넥터 - timeline-item에 배치
timeline-success색상성공 색상 점 및 커넥터 — timeline-item에 배치
timeline-warning색상경고 색상 점 및 커넥터 - timeline-item에 배치
timeline-error색상오류 색상 점 및 커넥터 - timeline-item에 배치

기본 사용법

  • Jan 2024
    Project started
    Initial commit pushed
  • Apr 2024
    Beta released
    Open testing begins
  • Today
    v2.0 launched
    Tailwind v4 rewrite
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<ul class="timeline timeline-vertical">
  <li class="timeline-item">
    <div class="timeline-start text-sm opacity-60">Jan 2024</div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Project started</div>
      <div class="text-sm opacity-60">Initial commit pushed</div>
    </div>
  </li>
  <li class="timeline-item">
    <div class="timeline-start text-sm opacity-60">Apr 2024</div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Beta released</div>
      <div class="text-sm opacity-60">Open testing begins</div>
    </div>
  </li>
  <li class="timeline-item">
    <div class="timeline-start text-sm opacity-60">Today</div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">v2.0 launched</div>
      <div class="text-sm opacity-60">Tailwind v4 rewrite</div>
    </div>
  </li>
</ul>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<ul className="timeline timeline-vertical">
  <li className="timeline-item">
    <div className="timeline-start text-sm opacity-60">Jan 2024</div>
    <div className="timeline-middle"></div>
    <div className="timeline-end">
      <div className="font-semibold">Project started</div>
      <div className="text-sm opacity-60">Initial commit pushed</div>
    </div>
  </li>
  <li className="timeline-item">
    <div className="timeline-start text-sm opacity-60">Apr 2024</div>
    <div className="timeline-middle"></div>
    <div className="timeline-end">
      <div className="font-semibold">Beta released</div>
      <div className="text-sm opacity-60">Open testing begins</div>
    </div>
  </li>
  <li className="timeline-item">
    <div className="timeline-start text-sm opacity-60">Today</div>
    <div className="timeline-middle"></div>
    <div className="timeline-end">
      <div className="font-semibold">v2.0 launched</div>
      <div className="text-sm opacity-60">Tailwind v4 rewrite</div>
    </div>
  </li>
</ul>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<ul class="timeline timeline-vertical">
  <li class="timeline-item">
    <div class="timeline-start text-sm opacity-60">Jan 2024</div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Project started</div>
      <div class="text-sm opacity-60">Initial commit pushed</div>
    </div>
  </li>
  <li class="timeline-item">
    <div class="timeline-start text-sm opacity-60">Apr 2024</div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Beta released</div>
      <div class="text-sm opacity-60">Open testing begins</div>
    </div>
  </li>
  <li class="timeline-item">
    <div class="timeline-start text-sm opacity-60">Today</div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">v2.0 launched</div>
      <div class="text-sm opacity-60">Tailwind v4 rewrite</div>
    </div>
  </li>
</ul>

색상이 있는 타임라인

각 timeline-item에 색상 수정자를 추가하여 점과 그 점에서 이어지는 연결선의 색상을 지정합니다.

  • Step 1
    Primary
  • Step 2
    Secondary
  • Step 3
    Success
  • Step 4
    Warning
  • Step 5
    Error
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<ul class="timeline timeline-vertical">
  <li class="timeline-item timeline-primary">
    <div class="timeline-start text-sm opacity-60">Step 1</div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"><div class="font-semibold">Primary</div></div>
  </li>
  <li class="timeline-item timeline-secondary">
    <div class="timeline-start text-sm opacity-60">Step 2</div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"><div class="font-semibold">Secondary</div></div>
  </li>
  <li class="timeline-item timeline-success">
    <div class="timeline-start text-sm opacity-60">Step 3</div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"><div class="font-semibold">Success</div></div>
  </li>
  <li class="timeline-item timeline-warning">
    <div class="timeline-start text-sm opacity-60">Step 4</div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"><div class="font-semibold">Warning</div></div>
  </li>
  <li class="timeline-item timeline-error">
    <div class="timeline-start text-sm opacity-60">Step 5</div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"><div class="font-semibold">Error</div></div>
  </li>
</ul>

교대 측면

각 항목의 timeline-start와 timeline-end 사이에 대체 콘텐츠를 추가하여 지그재그 레이아웃을 만듭니다.

  • Design phase
    Jan 2024
  • Development
    Mar 2024
  • Testing
    May 2024
  • Launch
    Jun 2024
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<ul class="timeline timeline-vertical">
  <li class="timeline-item timeline-primary">
    <div class="timeline-start">
      <div class="font-semibold">Design phase</div>
      <div class="text-sm opacity-60">Jan 2024</div>
    </div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"></div>
  </li>
  <li class="timeline-item timeline-secondary">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Development</div>
      <div class="text-sm opacity-60">Mar 2024</div>
    </div>
  </li>
  <li class="timeline-item timeline-accent">
    <div class="timeline-start">
      <div class="font-semibold">Testing</div>
      <div class="text-sm opacity-60">May 2024</div>
    </div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"></div>
  </li>
  <li class="timeline-item timeline-success">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Launch</div>
      <div class="text-sm opacity-60">Jun 2024</div>
    </div>
  </li>
</ul>

투톤 커넥터

각 항목의 연결선은 해당 색상을 상속하여 서로 다른 색상의 단계 간에 원활한 전환을 만듭니다.

  • Planned
    Backlog item created
  • In Progress
    Development started
  • In Review
    Awaiting approval
  • Done
    Shipped to production
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<ul class="timeline timeline-vertical timeline-snap-start">
  <li class="timeline-item timeline-info">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Planned</div>
      <div class="text-sm opacity-60">Backlog item created</div>
    </div>
  </li>
  <li class="timeline-item timeline-primary">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">In Progress</div>
      <div class="text-sm opacity-60">Development started</div>
    </div>
  </li>
  <li class="timeline-item timeline-warning">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">In Review</div>
      <div class="text-sm opacity-60">Awaiting approval</div>
    </div>
  </li>
  <li class="timeline-item timeline-success">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Done</div>
      <div class="text-sm opacity-60">Shipped to production</div>
    </div>
  </li>
</ul>

시작 쪽만

모든 것을 축 왼쪽으로 푸시하려면 timeline-end가 비어 있는 timeline-start에만 콘텐츠를 배치하세요.

  • Requirements gathered
    Jan 2024
  • Prototype built
    Feb 2024
  • Shipped
    Mar 2024
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<ul class="timeline timeline-vertical timeline-snap-end">
  <li class="timeline-item timeline-primary">
    <div class="timeline-start">
      <div class="font-semibold">Requirements gathered</div>
      <div class="text-sm opacity-60">Jan 2024</div>
    </div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"></div>
  </li>
  <li class="timeline-item timeline-secondary">
    <div class="timeline-start">
      <div class="font-semibold">Prototype built</div>
      <div class="text-sm opacity-60">Feb 2024</div>
    </div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"></div>
  </li>
  <li class="timeline-item timeline-success">
    <div class="timeline-start">
      <div class="font-semibold">Shipped</div>
      <div class="text-sm opacity-60">Mar 2024</div>
    </div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"></div>
  </li>
</ul>

끝 쪽만

모든 콘텐츠가 오른쪽에 오도록 점을 왼쪽 가장자리로 밀어 넣으려면 timeline-snap-start를 사용하세요.

  • Launched beta
    February 2024
  • Public release
    April 2024
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<ul class="timeline timeline-vertical timeline-snap-start">
  <li class="timeline-item timeline-primary">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Launched beta</div>
      <div class="text-sm opacity-60">February 2024</div>
    </div>
  </li>
  <li class="timeline-item timeline-secondary">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Public release</div>
      <div class="text-sm opacity-60">April 2024</div>
    </div>
  </li>
</ul>

리치 카드 콘텐츠

테두리가 둥근 상자 p-3 블록으로 콘텐츠를 래핑하여 각 타임라인 이벤트에 카드와 같은 모양을 제공합니다.

  • Jan 15, 2024
    Project Kickoff

    Team assembled, goals defined, and roadmap approved by stakeholders.

  • Mar 1, 2024
    Alpha Released

    Internal testing began with 12 pilot users across 3 departments.

  • Jun 10, 2024
    v1.0 General Availability

    Public launch with full documentation, support, and SLA guarantees.

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<ul class="timeline timeline-vertical timeline-snap-start">
  <li class="timeline-item timeline-primary">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="border rounded-box p-3 mb-2">
        <div class="text-xs opacity-60 mb-1">Jan 15, 2024</div>
        <div class="font-semibold">Project Kickoff</div>
        <p class="text-sm opacity-70 mt-1">Team assembled, goals defined, and roadmap approved by stakeholders.</p>
      </div>
    </div>
  </li>
  <li class="timeline-item timeline-secondary">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="border rounded-box p-3 mb-2">
        <div class="text-xs opacity-60 mb-1">Mar 1, 2024</div>
        <div class="font-semibold">Alpha Released</div>
        <p class="text-sm opacity-70 mt-1">Internal testing began with 12 pilot users across 3 departments.</p>
      </div>
    </div>
  </li>
  <li class="timeline-item timeline-success">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="border rounded-box p-3 mb-2">
        <div class="text-xs opacity-60 mb-1">Jun 10, 2024</div>
        <div class="font-semibold">v1.0 General Availability</div>
        <p class="text-sm opacity-70 mt-1">Public launch with full documentation, support, and SLA guarantees.</p>
      </div>
    </div>
  </li>
</ul>

스냅 시작

목록에서 timeline-snap-start를 사용하여 시작 열을 숨기고 점을 왼쪽 가장자리에 정렬하세요.

  • Launched beta
    February 2024
  • Public release
    April 2024
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<ul class="timeline timeline-vertical timeline-snap-start">
  <li class="timeline-item timeline-primary">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Launched beta</div>
      <div class="text-sm opacity-60">February 2024</div>
    </div>
  </li>
  <li class="timeline-item timeline-secondary">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Public release</div>
      <div class="text-sm opacity-60">April 2024</div>
    </div>
  </li>
</ul>

스냅 종료

목록에서 timeline-snap-end를 사용하여 끝 열을 숨기고 점을 오른쪽 가장자리에 정렬하세요.

  • Launched beta
    February 2024
  • Public release
    April 2024
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<ul class="timeline timeline-vertical timeline-snap-end">
  <li class="timeline-item timeline-primary">
    <div class="timeline-start">
      <div class="font-semibold">Launched beta</div>
      <div class="text-sm opacity-60">February 2024</div>
    </div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"></div>
  </li>
  <li class="timeline-item timeline-secondary">
    <div class="timeline-start">
      <div class="font-semibold">Public release</div>
      <div class="text-sm opacity-60">April 2024</div>
    </div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"></div>
  </li>
</ul>

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

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

Cherry MCP를 사용해 보세요