색상 변형, 부드러운 스타일 및 제거 가능한 버튼이 포함된 CSS 전용 Tailwind CSS 태그(칩)입니다. 크기는 xs-lg입니다. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
태그 구성 요소는 콘텐츠를 분류, 필터링 또는 레이블 지정하는 데 사용되는 작은 레이블이 지정된 정보 조각을 표시합니다. 의미론적 HTML과 유연한 스타일로 구축된 태그를 통해 사용자는 콘텐츠 유형, 상태 또는 카테고리를 빠르게 식별할 수 있습니다. Frutjam 태그 시스템은 다양한 크기, 색상, 스타일 및 모양을 지원하므로 기술 목록, 기사 카테고리, 상태 레이블 및 콘텐츠 메타데이터에 이상적입니다.
CSS 전용이며 JavaScript가 필요하지 않습니다. WCAG AA 액세스 가능 및 프레임워크에 구애받지 않음 — Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
| 수업 | 유형 | 설명 |
|---|---|---|
| tag | 베이스 | 콘텐츠 분류 또는 식별을 위한 인라인 라벨 |
| tag-outline | 스타일 | 색상 테두리가 있는 투명 채우기 |
| tag-soft | 스타일 | 음소거된 색조 배경 |
| tag-square | 스타일 | 약간 반올림(기본 알약보다 작음) |
| tag-remove | 수정자 | 태그 내부의 닫기/삭제 버튼 |
| tag-xs | 크기 | 아주 작게(0.6875rem 글꼴) |
| tag-sm | 크기 | 작음(0.75rem 글꼴) |
| tag-md | 크기 | 중간(0.8125rem 글꼴, 기본값) |
| tag-lg | 크기 | 크게(0.9375rem 글꼴) |
| tag-xl | 크기 | 특대(1rem 글꼴) |
| tag-primary | 색상 | 기본 테마 색상 |
| tag-secondary | 색상 | 보조 테마 색상 |
| tag-accent | 색상 | 악센트 테마 색상 |
| tag-neutral | 색상 | 중립 테마 색상 |
| tag-info | 색상 | 정보 의미 색상 |
| tag-success | 색상 | 성공 의미 색상 |
| tag-warning | 색상 | 경고 의미 색상 |
| tag-error | 색상 | 오류 의미 색상 |
기본 사용법
1 2 3 | <div class="tag">Tag</div> <div class="tag">Another tag</div> <div class="tag">Third tag</div> |
1 2 3 | <div className="tag">Tag</div> <div className="tag">Another tag</div> <div className="tag">Third tag</div> |
태그 크기
html
1 2 3 4 | <div class="tag tag-xs">Extra Small</div> <div class="tag tag-sm">Small</div> <div class="tag tag-md">Medium</div> <div class="tag tag-lg">Large</div> |
태그 색상
html
1 2 3 4 5 6 7 8 | <div class="tag">Default</div> <div class="tag tag-primary">Primary</div> <div class="tag tag-secondary">Secondary</div> <div class="tag tag-accent">Accent</div> <div class="tag tag-info">Info</div> <div class="tag tag-success">Success</div> <div class="tag tag-warning">Warning</div> <div class="tag tag-error">Error</div> |
태그 스타일
html
1 2 3 4 | <div class="tag tag-primary">Default</div> <div class="tag tag-primary tag-outline">Outline</div> <div class="tag tag-secondary tag-soft">Soft</div> <div class="tag tag-accent tag-dashed">Dashed</div> |
태그 모양
html
1 2 3 4 | <div class="tag">Square</div> <div class="tag tag-rounded">Rounded</div> <div class="tag tag-pill">Pill</div> <div class="tag tag-circle">C</div> |
아이콘이 포함된 태그
html
1 2 3 4 | <div class="tag tag-primary"> <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M5.5 13a3.5 3.5 0 01-.369-6.98 4 4 0 117.753-1.3A4.5 4.5 0 1113.5 13H11V9.413l1.293 1.293a1 1 0 001.414-1.414l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L9 9.414V13H5.5z"/></svg> Starred </div> |
닫을 수 있는 태그
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div class="tag tag-primary"> JavaScript <button class="tag-remove" aria-label="Close">×</button> </div> <div class="tag tag-secondary"> React <button class="tag-remove" aria-label="Close">×</button> </div> <div class="tag tag-accent"> TypeScript <button class="tag-remove" aria-label="Close">×</button> </div> |
태그 목록
html
1 2 3 4 5 6 7 8 | <div class="flex flex-wrap gap-2"> <div class="tag">JavaScript</div> <div class="tag tag-primary">React</div> <div class="tag tag-secondary">CSS</div> <div class="tag tag-accent">UI Design</div> <div class="tag tag-info">Frontend</div> <div class="tag tag-success">Production</div> </div> |
Claude Code, Cursor 또는 다른 AI 편집기를 사용하시나요?
Cherry MCP는 AI 편집기에 요청 시 정확한 꼬리표 클래스 이름과 구조를 제공합니다. 더 이상 환각에 빠진 수업은 없습니다.