HTML 코드
<div class="search">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
<input placeholder="검색어 입력" value="토스트">
<kbd>/</kbd>
</div>
<style>
.search{display:flex;align-items:center;gap:8px;max-width:360px;padding:10px 14px;border:1px solid var(--border);border-radius:999px;background:var(--bg);color:var(--muted)}
.search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
input{flex:1;border:0;outline:0;background:none;font:inherit;color:var(--fg)}
kbd{font-size:11px;border:1px solid var(--border);border-radius:4px;padding:0 5px}
</style>AI에게 이렇게 요청하세요
상단에 왼쪽 돋보기 아이콘·'검색어 입력' 안내 문구가 있고 입력하면 × 지우기 버튼이 생기며 / 키로 바로 입력되는 둥근 검색창 넣어줘
<div class="search">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
<input placeholder="검색어 입력" value="토스트">
<kbd>/</kbd>
</div>
<style>
.search{display:flex;align-items:center;gap:8px;max-width:360px;padding:10px 14px;border:1px solid var(--border);border-radius:999px;background:var(--bg);color:var(--muted)}
.search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
input{flex:1;border:0;outline:0;background:none;font:inherit;color:var(--fg)}
kbd{font-size:11px;border:1px solid var(--border);border-radius:4px;padding:0 5px}
</style>언제 쓰나
콘텐츠가 많은 사이트·앱 어디서나. 결과를 입력하는 즉시 보여줄지, 엔터를 눌러야 할지 요청 시 정해주세요.
비슷한 것과 차이
- 화면 전체를 덮고 뜨는 검색은 커맨드 팔레트(Command palette) 또는 검색 모달
- 입력 중 추천어가 뜨는 것은 자동완성(Autocomplete)