HTML 코드
<div class="chips">
<button class="chip on">전체</button>
<button class="chip on">무료 <span>×</span></button>
<button class="chip">이미지</button>
<button class="chip">영상</button>
</div>
<style>
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:inherit;font-size:13px;padding:6px 12px;border-radius:999px;border:1px solid var(--border);background:var(--bg);color:var(--fg);cursor:pointer}
.chip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.chip span{margin-left:4px;opacity:.8}
</style>AI에게 이렇게 요청하세요
검색창 아래에 클릭하면 채운 색으로 선택되고 선택된 것은 × 버튼으로 해제되는 필터 칩 줄 넣어줘
<div class="chips">
<button class="chip on">전체</button>
<button class="chip on">무료 <span>×</span></button>
<button class="chip">이미지</button>
<button class="chip">영상</button>
</div>
<style>
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:inherit;font-size:13px;padding:6px 12px;border-radius:999px;border:1px solid var(--border);background:var(--bg);color:var(--fg);cursor:pointer}
.chip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.chip span{margin-left:4px;opacity:.8}
</style>언제 쓰나
목록 필터, 이메일 받는 사람 입력, 관심 키워드 선택처럼 여러 개를 고르거나 지울 때.
비슷한 것과 차이
- 배지: 표시 전용, 누를 수 없음
- 세그먼트 컨트롤: 여러 개 중 하나만 고름. 칩은 여러 개 동시 선택 가능