HTML 코드
<label>정렬
<select><option>최신순</option><option>인기순</option><option>가격 낮은순</option></select>
</label>
<style>
label{display:flex;flex-direction:column;gap:6px;max-width:220px;font-size:13px;color:var(--muted)}
select{font:inherit;font-size:14px;color:var(--fg);background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:9px 12px}
</style>AI에게 이렇게 요청하세요
목록 정렬 기준을 최신순/인기순/가격 낮은순 중에서 고르고 기본값은 최신순, 오른쪽에 ▾ 화살표가 있는 드롭다운으로 만들어줘
<label>정렬
<select><option>최신순</option><option>인기순</option><option>가격 낮은순</option></select>
</label>
<style>
label{display:flex;flex-direction:column;gap:6px;max-width:220px;font-size:13px;color:var(--muted)}
select{font:inherit;font-size:14px;color:var(--fg);background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:9px 12px}
</style>언제 쓰나
선택지가 5개 이상이라 버튼으로 다 늘어놓기 어려울 때 (국가, 정렬, 카테고리).
비슷한 것과 차이
- 선택지가 2~4개면 세그먼트 컨트롤이 더 빠름
- 입력하며 걸러지는 드롭다운은 콤보박스(Combobox) 또는 자동완성(Autocomplete) 이라고 요청
- 버튼을 누르면 메뉴 명령이 나오는 것은 드롭다운 메뉴(Dropdown menu) — 값 선택이 아니라 동작 실행