프로필 이미지용 CSS 전용 Tailwind CSS 아바타입니다. xs-xl 크기, 그룹 스태킹 및 온라인/오프라인 상태 표시기. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
아바타 구성 요소는 사용자 정의 가능한 소형 컨테이너에 사용자 프로필 이미지나 이니셜을 표시합니다. Frutjam의 CSS 사용자 정의 속성으로 구축된 아바타는 인터페이스 전체에서 사용자, 기여자 또는 팀 구성원을 나타냅니다. 아바타 시스템은 이미지와 텍스트, 다양한 크기, 색상, 모양, 상태 표시기, 링 및 그룹 정렬을 지원하므로 사용자 목록, 댓글, 팀 디스플레이, 프로필 섹션 및 메시징 인터페이스에 이상적입니다.
CSS 전용이며 JavaScript가 필요하지 않습니다. WCAG AA 액세스 가능 및 프레임워크에 구애받지 않음 — Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
| 수업 | 유형 | 설명 |
|---|---|---|
| avatar | 베이스 | 이니셜 또는 이미지가 포함된 원형 아바타 컨테이너 |
| avatar-group | 수정자 | 여러 아바타의 중첩 스택 |
| avatar-ring | 수정자 | 아바타 주위에 컬러링 테두리를 추가합니다. |
| avatar-circle | 스타일 | 완전한 원형 모양(기본값) |
| avatar-rounded | 스타일 | 둥근 직사각형 모양 |
| avatar-square | 스타일 | 둥글림이 없는 정사각형 모양 |
| avatar-online | 스타일 | 녹색 온라인 상태 표시기 |
| avatar-away | 스타일 | 노란색 자리 비움 상태 표시기 |
| avatar-busy | 스타일 | 빨간색 통화 중 상태 표시기 |
| avatar-offline | 스타일 | 회색 오프라인 상태 표시기 |
| avatar-xs | 크기 | 아주 작은 |
| avatar-sm | 크기 | 작은 |
| avatar-md | 크기 | 중간(기본값) |
| avatar-lg | 크기 | 크기가 큰 |
| avatar-xl | 크기 | 특대 |
| avatar-2xl | 크기 | 2배 특대형 |
| avatar-primary | 색상 | 기본 테마 색상 |
| avatar-secondary | 색상 | 보조 테마 색상 |
| avatar-accent | 색상 | 악센트 테마 색상 |
| avatar-neutral | 색상 | 중립 테마 색상 |
| avatar-info | 색상 | 정보 의미 색상 |
| avatar-success | 색상 | 성공 의미 색상 |
| avatar-warning | 색상 | 경고 의미 색상 |
| avatar-error | 색상 | 오류 의미 색상 |
| avatar-ring-primary | 색상 | 기본 색상의 반지 |
| avatar-ring-secondary | 색상 | 보조 색상의 반지 |
| avatar-ring-accent | 색상 | 포인트 컬러의 반지 |
| avatar-ring-neutral | 색상 | 뉴트럴 컬러의 링 |
| avatar-ring-info | 색상 | 정보 색상으로 링 |
| avatar-ring-success | 색상 | 성공 색상의 반지 |
| avatar-ring-warning | 색상 | 경고 색상의 링 |
| avatar-ring-error | 색상 | 오류 색상의 링 |
기본 사용법
텍스트 이니셜이나 색상으로 간단한 아바타를 만들어보세요.
<div class="avatar">AB</div> |
<div className="avatar">AB</div> |
이미지가 포함된 아바타
자동 이미지 맞춤 및 반응형 크기 조정을 통해 사용자 프로필 사진을 표시합니다.
html
1 2 3 4 5 6 7 8 9 10 11 | <div class="avatar avatar-sm"> <img src="https://cdn.frutjam.com/images/avatar-1.jpg?format=webp&width=32&height=32&face_crop=true" alt="Strawbery" loading="lazy" /> </div> <div class="avatar avatar-md"> <img src="https://cdn.frutjam.com/images/avatar-1.jpg?format=webp&width=40&height=40&face_crop=true" alt="Strawbery" loading="lazy" /> </div> <div class="avatar avatar-lg"> <img src="https://cdn.frutjam.com/images/avatar-1.jpg?format=webp&width=56&height=56&face_crop=true" alt="Strawbery" loading="lazy" /> </div> |
아바타 크기
다양한 상황에 맞게 크기 변형을 사용하여 매우 작은 크기(xs)에서 2배 큰 크기(2xl)까지 아바타의 크기를 조정합니다.
html
1 2 3 4 5 6 | <div class="avatar avatar-xs avatar-primary">XS</div> <div class="avatar avatar-sm avatar-secondary">SM</div> <div class="avatar avatar-md avatar-accent">MD</div> <div class="avatar avatar-lg avatar-primary">LG</div> <div class="avatar avatar-xl avatar-secondary">XL</div> <div class="avatar avatar-2xl avatar-accent">2XL</div> |
아바타 색상
이미지를 사용하지 않을 때 역할, 팀 또는 상태별로 아바타를 구별하기 위해 색상 변형을 적용합니다.
html
1 2 3 4 5 6 7 8 | <div class="avatar avatar-md avatar-primary">A</div> <div class="avatar avatar-md avatar-secondary">B</div> <div class="avatar avatar-md avatar-accent">C</div> <div class="avatar avatar-md avatar-info">D</div> <div class="avatar avatar-md avatar-neutral">E</div> <div class="avatar avatar-md avatar-success">F</div> <div class="avatar avatar-md avatar-warning">G</div> <div class="avatar avatar-md avatar-error">H</div> |
아바타 모양
디자인 시스템에 맞게 원형(기본값), 둥근 모양 또는 사각형 모양 중에서 선택하세요.
html
1 2 3 | <div class="avatar avatar-lg avatar-circle avatar-primary">●</div> <div class="avatar avatar-lg avatar-rounded avatar-secondary">◇</div> <div class="avatar avatar-lg avatar-square avatar-accent">■</div> |
이니셜이 있는 아바타
목록, 댓글 스레드 및 팀 섹션에서 빠른 식별을 위해 사용자 이니셜을 표시합니다.
html
1 2 3 4 | <div class="avatar avatar-sm avatar-primary">JD</div> <div class="avatar avatar-md avatar-secondary">AR</div> <div class="avatar avatar-lg avatar-accent">MS</div> <div class="avatar avatar-xl avatar-info">KL</div> |
상태 표시기가 있는 아바타
아바타를 상태 배지와 결합하여 사용자 존재 또는 가용성(온라인, 오프라인, 바쁨, 부재중)을 표시합니다.
html
1 2 3 4 5 6 7 | <div class="avatar avatar-md avatar-online avatar-primary">JD</div> <div class="avatar avatar-md avatar-offline avatar-secondary">AR</div> <div class="avatar avatar-md avatar-busy avatar-accent">MS</div> <div class="avatar avatar-md avatar-away avatar-info">KL</div> |
링 테두리가 있는 아바타
강조, 상태 강조 또는 시각적 분리를 위해 아바타 주위에 장식 링을 추가합니다.
html
1 2 3 | <div class="avatar avatar-md avatar-ring avatar-ring-primary avatar-primary">A</div> <div class="avatar avatar-lg avatar-ring avatar-ring-secondary avatar-secondary">B</div> <div class="avatar avatar-xl avatar-ring avatar-ring-accent avatar-accent">C</div> |
링 색상 변형
아바타 배경색과 별도로 벨소리 색상을 선택하세요.
html
1 2 3 4 5 6 7 | <div class="avatar avatar-md avatar-ring avatar-ring-primary avatar-primary">A</div> <div class="avatar avatar-md avatar-ring avatar-ring-secondary avatar-secondary">B</div> <div class="avatar avatar-md avatar-ring avatar-ring-accent avatar-accent">C</div> <div class="avatar avatar-md avatar-ring avatar-ring-info avatar-info">D</div> <div class="avatar avatar-md avatar-ring avatar-ring-success avatar-success">E</div> <div class="avatar avatar-md avatar-ring avatar-ring-warning avatar-warning">F</div> <div class="avatar avatar-md avatar-ring avatar-ring-error avatar-error">G</div> |
아바타 그룹
팀 구성원과 공동작업자가 겹쳐 표시되도록 자동 음수 여백을 사용하여 여러 아바타를 쌓습니다.
html
1 2 3 4 5 6 | <div class="avatar-group"> <div class="avatar avatar-md avatar-primary">A</div> <div class="avatar avatar-md avatar-secondary">B</div> <div class="avatar avatar-md avatar-accent">C</div> <div class="avatar avatar-md avatar-info">D</div> </div> |
다양한 크기의 아바타 그룹
시각적 계층 구조를 위해 그룹 내에서 여러 크기를 결합합니다.
html
1 2 3 4 5 | <div class="avatar-group"> <div class="avatar avatar-sm avatar-primary">A</div> <div class="avatar avatar-md avatar-secondary">B</div> <div class="avatar avatar-lg avatar-accent">C</div> </div> |
상태가 있는 아바타 그룹
팀 그룹의 각 구성원에 대한 가용성 상태를 표시합니다.
html
1 2 3 4 5 | <div class="avatar-group"> <div class="avatar avatar-md avatar-online avatar-primary">A</div> <div class="avatar avatar-md avatar-offline avatar-secondary">B</div> <div class="avatar avatar-md avatar-busy avatar-accent">C</div> </div> |
결합된 변형
복잡한 아바타 디스플레이를 위해 크기, 색상, 모양, 상태 및 링 수정자를 혼합하고 일치시킵니다.
html
1 2 3 4 5 | <div class="avatar avatar-xl avatar-rounded avatar-ring avatar-ring-success avatar-success avatar-online">SK</div> <div class="avatar avatar-lg avatar-square avatar-ring avatar-ring-primary avatar-primary">AB</div> <div class="avatar avatar-2xl avatar-circle avatar-ring avatar-ring-error avatar-error avatar-busy">MR</div> |
Claude Code, Cursor 또는 다른 AI 편집기를 사용하시나요?
Cherry MCP는 AI 편집기에 요청 시 정확한 화신 클래스 이름과 구조를 제공합니다. 더 이상 환각에 빠진 수업은 없습니다.