Avatar | HTML Components

기본

이미지, 이니셜 텍스트, 아이콘 세 가지 형태를 지원합니다.

<!-- 예시 1 -->

<span class="avatar">
  <img class="avatar_image" src="../images/avatar-sample.svg" alt="홍길동">
</span>

<!-- Primary -->

<span class="avatar color_primary" aria-hidden="true">홍</span>

<!-- Default -->

<span class="avatar color_default" aria-hidden="true">
  <svg class="avatar_icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
    <circle cx="12" cy="7" r="4"/>
  </svg>
</span>

이름 · 이미지 · 커스텀 요소

Nuxt·Next의 name, src, as와 슬롯·children에 대응하도록 아이콘·이미지·커스텀 콘텐츠를 조합할 수 있습니다.

ON

<!-- Primary -->

<span class="avatar color_primary" role="img" aria-label="기본 사용자">
  <svg class="avatar_icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
    <circle cx="12" cy="7" r="4"/>
  </svg>
</span>

<!-- 프로필 열기 -->

<button type="button" class="avatar" aria-label="프로필 열기">
  <img class="avatar_image" src="../images/avatar-sample.svg" alt="">
</button>

<!-- Success -->

<span class="avatar color_success" role="img" aria-label="온라인 사용자">
  <strong>ON</strong>
</span>

크기

avatar_sm · avatar_lg · avatar_xl로 스케일을 조절합니다.

<!-- Small -->

<span class="avatar avatar_sm color_primary" aria-hidden="true">A</span>

<!-- Primary -->

<span class="avatar color_primary" aria-hidden="true">B</span>

<!-- Large -->

<span class="avatar avatar_lg color_primary" aria-hidden="true">C</span>

<!-- XL -->

<span class="avatar avatar_xl color_primary" aria-hidden="true">D</span>

형태

기본은 원형이며, avatar_square로 사각형(둥근 모서리)을 적용합니다.

<!-- Primary -->

<span class="avatar color_primary" aria-hidden="true">원</span>

<!-- Primary -->

<span class="avatar avatar_square color_primary" aria-hidden="true">각</span>

<!-- 예시 1 -->

<span class="avatar avatar_square">
  <img class="avatar_image" src="../images/avatar-sample.svg" alt="홍길동">
</span>

색상

이니셜·아이콘 아바타에 공통 color_* 클래스를 조합합니다.

<!-- Default -->

<span class="avatar color_default" aria-hidden="true">D</span>

<!-- Primary -->

<span class="avatar color_primary" aria-hidden="true">P</span>

<!-- Success -->

<span class="avatar color_success" aria-hidden="true">S</span>

<!-- Warning -->

<span class="avatar color_warning" aria-hidden="true">W</span>

<!-- Danger -->

<span class="avatar color_danger" aria-hidden="true">E</span>

상태 배지

avatar_badge로 온라인·오프라인 등 상태를 표시합니다. 부모에 position: relative가 적용됩니다.

<!-- Primary -->

<span class="avatar color_primary" aria-hidden="true">
  온
  <span class="avatar_badge color_success" aria-label="온라인">
  </span>
</span>

<!-- Default -->

<span class="avatar color_default" aria-hidden="true">
  대
  <span class="avatar_badge color_warning" aria-label="자리 비움">
  </span>
</span>

<!-- Default -->

<span class="avatar color_default" aria-hidden="true">
  오
  <span class="avatar_badge color_danger" aria-label="오프라인">
  </span>
</span>

그룹

avatar_group으로 여러 아바타를 겹쳐 표시합니다.

<!-- 팀 멤버 4명 -->

<div class="avatar_group" aria-label="팀 멤버 4명">
  <span class="avatar color_primary" aria-hidden="true">김</span>
  <span class="avatar color_success" aria-hidden="true">이</span>
  <span class="avatar color_warning" aria-hidden="true">박</span>
  <span class="avatar color_danger" aria-hidden="true">최</span>
</div>

<!-- 팀 멤버 3명 -->

<div class="avatar_group" aria-label="팀 멤버 3명">
  <span class="avatar">
    <img class="avatar_image" src="../images/avatar-sample.svg" alt="홍길동">
  </span>
  <span class="avatar color_primary" aria-hidden="true">홍</span>
  <span class="avatar color_default" aria-hidden="true">
    <svg class="avatar_icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
      <path d="M12 5v14M5 12h14"/>
    </svg>
  </span>
</div>

클래스 · 속성

Nuxt와 Next 컴포넌트가 렌더하는 OOCSS 클래스와 접근성 속성입니다. HTML에서는 요소의 의미에 맞게 아래 항목을 직접 조합합니다.

클래스 · 속성	설명
`avatar`	아바타 루트. 기본 원형
`avatar_image`	영역을 채우는 프로필 이미지
`avatar_icon`	아바타 크기에 연동되는 아이콘
`avatar_badge`	우하단 상태 점
`avatar_sm · avatar_lg · avatar_xl`	크기 변형. 기본은 md
`avatar_square`	둥근 모서리의 사각형 변형
`avatar_group`	여러 아바타를 겹치는 그룹 컨테이너
`color_*`	이니셜·아이콘 배경과 상태 점 색상
`alt`	프로필 이미지의 대체 텍스트. 루트에 이름이 있으면 빈 문자열 사용
`role="img" · aria-label`	비대화형 아이콘·커스텀 아바타에 접근 가능한 이름 제공
`aria-hidden="true"`	그룹 라벨로 설명되는 개별 아바타 등 장식용 콘텐츠 숨김
`type="button" · aria-label`	클릭 가능한 아바타의 버튼 타입과 접근 가능한 이름

디자인 토큰

토큰	기본값	설명
`--avatar-size-sm · --avatar-size · --avatar-size-lg · --avatar-size-xl`	`1.5rem · 2rem · 2.5rem · 3.5rem`	아바타 지름
`--avatar-font-size-sm · --avatar-font-size · --avatar-font-size-lg · --avatar-font-size-xl`	`var(--text-size-xs) · var(--text-size-sm) · var(--text-size-base) · var(--text-size-lg)`	이니셜 글자 크기
`--avatar-icon-size-sm · --avatar-icon-size · --avatar-icon-size-lg · --avatar-icon-size-xl`	`0.75rem · 1rem · 1.25rem · 1.75rem`	아이콘 크기
`--avatar-group-overlap`	`-0.5rem`	그룹 겹침 오프셋
`--avatar-badge-size-sm · --avatar-badge-size · --avatar-badge-size-lg`	`6px · 8px · 10px`	상태 점 크기