HTML 코드
<p>주문 상태 <span class="badge ok">결제완료</span> <span class="badge info">배송중</span> <span class="badge">취소</span></p>
<p>알림 <span class="count">3</span> 신규 <span class="badge new">NEW</span></p>
<style>
.badge{display:inline-block;font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--surface);color:var(--muted);border:1px solid var(--border)}
.ok{color:var(--success);border-color:currentColor}
.info{color:var(--accent);border-color:currentColor}
.new{background:var(--danger);color:#fff;border:0}
.count{display:inline-grid;place-items:center;min-width:20px;height:20px;border-radius:10px;background:var(--danger);color:#fff;font-size:11px;font-weight:700}
</style>AI에게 이렇게 요청하세요
주문 목록의 상태 칸에 결제완료=초록·배송중=파랑·취소=회색인 작은 알약 모양 배지로 표시해줘
<p>주문 상태 <span class="badge ok">결제완료</span> <span class="badge info">배송중</span> <span class="badge">취소</span></p>
<p>알림 <span class="count">3</span> 신규 <span class="badge new">NEW</span></p>
<style>
.badge{display:inline-block;font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--surface);color:var(--muted);border:1px solid var(--border)}
.ok{color:var(--success);border-color:currentColor}
.info{color:var(--accent);border-color:currentColor}
.new{background:var(--danger);color:#fff;border:0}
.count{display:inline-grid;place-items:center;min-width:20px;height:20px;border-radius:10px;background:var(--danger);color:#fff;font-size:11px;font-weight:700}
</style>언제 쓰나
상태(진행 중·완료), 새 글 표시, 알림 개수처럼 읽기만 하는 작은 정보.
비슷한 것과 차이
- 칩·태그: 누르거나 지울 수 있는(상호작용) 작은 버튼. 배지는 표시만 함