HTML 코드
<div class="row">
<span class="av" style="background:#4c6ef5">김</span>
<span class="av" style="background:#12b886">L</span>
<span class="av" style="background:#f76707">박</span>
<span class="group"><span class="av" style="background:#7950f2">A</span><span class="av" style="background:#e64980">B</span><span class="av more">+3</span></span>
</div>
<style>
.row{display:flex;gap:12px;align-items:center}
.av{width:40px;height:40px;border-radius:50%;display:inline-grid;place-items:center;color:#fff;font-weight:700;border:2px solid var(--bg)}
.group{display:flex}
.group .av+.av{margin-left:-12px}
.more{background:var(--surface);color:var(--muted);font-size:12px}
</style>AI에게 이렇게 요청하세요
댓글마다 작성자 왼쪽에 40px 원형으로, 사진이 없으면 이름 첫 글자와 랜덤 배경색으로 아바타 넣어줘
<div class="row">
<span class="av" style="background:#4c6ef5">김</span>
<span class="av" style="background:#12b886">L</span>
<span class="av" style="background:#f76707">박</span>
<span class="group"><span class="av" style="background:#7950f2">A</span><span class="av" style="background:#e64980">B</span><span class="av more">+3</span></span>
</div>
<style>
.row{display:flex;gap:12px;align-items:center}
.av{width:40px;height:40px;border-radius:50%;display:inline-grid;place-items:center;color:#fff;font-weight:700;border:2px solid var(--bg)}
.group{display:flex}
.group .av+.av{margin-left:-12px}
.more{background:var(--surface);color:var(--muted);font-size:12px}
</style>언제 쓰나
댓글, 채팅, 팀원 목록, 로그인한 사용자 메뉴 버튼.
비슷한 것과 차이
- 겹쳐서 보여주는 묶음은 아바타 그룹(Avatar group) 이라고 요청
- 아바타 모서리에 붙는 초록 점은 상태 표시(presence indicator)