Skip to content
EN KO VI NE KM ID
Design business cards Character collection 16 designs · PNG / SVG / PDF

Search results page

For when there is a lot to sift through — use it when filters, the result list and sorting have to live on one screen.

Example screens

Live preview

Source

<script>document.body.className="dc-bleed"</script>
<div class="dc-srp">
  <header class="dc-srp__bar">
    <span class="dc-srp__brand">마켓단비</span>
    <form class="dc-srp__search" action="#" role="search">
      <label class="dc-sr" for="dc-srp-q">상품 검색</label>
      <input class="dc-srp__search-input" id="dc-srp-q" type="search" name="q" value="스테인리스 보온병" autocomplete="off">
      <button class="dc-srp__search-btn" type="submit">검색</button>
    </form>
  </header>
  <h1 class="dc-sr">“스테인리스 보온병” 검색 결과</h1>
  <div class="dc-srp__body">
    <aside class="dc-srp__side" aria-label="조건으로 걸러내기">
      <div class="dc-srp__fgroup">
        <h2 class="dc-srp__ftitle">가격</h2>
        <div class="dc-srp__range">
          <label class="dc-sr" for="dc-srp-min">최저 가격</label>
          <input class="dc-srp__range-in" id="dc-srp-min" type="text" inputmode="numeric" value="10,000">
          <span aria-hidden="true">~</span>
          <label class="dc-sr" for="dc-srp-max">최고 가격</label>
          <input class="dc-srp__range-in" id="dc-srp-max" type="text" inputmode="numeric" value="50,000">
        </div>
      </div>
      <div class="dc-srp__fgroup">
        <h2 class="dc-srp__ftitle">용량</h2>
        <ul class="dc-srp__fopts">
          <li><label class="dc-srp__fopt"><input class="dc-srp__fbox" type="checkbox"> 350ml 이하 <span class="dc-srp__fcount">86</span></label></li>
          <li><label class="dc-srp__fopt"><input class="dc-srp__fbox" type="checkbox" checked> 500ml 안팎 <span class="dc-srp__fcount">174</span></label></li>
          <li><label class="dc-srp__fopt"><input class="dc-srp__fbox" type="checkbox"> 1L 이상 <span class="dc-srp__fcount">42</span></label></li>
        </ul>
      </div>
      <div class="dc-srp__fgroup">
        <h2 class="dc-srp__ftitle">브랜드</h2>
        <ul class="dc-srp__fopts">
          <li><label class="dc-srp__fopt"><input class="dc-srp__fbox" type="checkbox"> 써모스 <span class="dc-srp__fcount">58</span></label></li>
          <li><label class="dc-srp__fopt"><input class="dc-srp__fbox" type="checkbox"> 락앤락 <span class="dc-srp__fcount">47</span></label></li>
          <li><label class="dc-srp__fopt"><input class="dc-srp__fbox" type="checkbox"> 스탠리 <span class="dc-srp__fcount">23</span></label></li>
        </ul>
      </div>
      <div class="dc-srp__fgroup">
        <h2 class="dc-srp__ftitle">배송</h2>
        <ul class="dc-srp__fopts">
          <li><label class="dc-srp__fopt"><input class="dc-srp__fbox" type="checkbox"> 내일 도착 <span class="dc-srp__fcount">121</span></label></li>
          <li><label class="dc-srp__fopt"><input class="dc-srp__fbox" type="checkbox"> 무료배송 <span class="dc-srp__fcount">203</span></label></li>
        </ul>
      </div>
    </aside>
    <main class="dc-srp__main">
      <div class="dc-srp__sum">
        <p class="dc-srp__sum-text"><span class="dc-srp__strong">“스테인리스 보온병”</span> 검색 결과 138건 중 1–4번째</p>
        <label class="dc-srp__sort">
          <span class="dc-sr">정렬 기준</span>
          <select class="dc-srp__sort-sel" name="sort">
            <option selected>정확도순</option>
            <option>낮은 가격순</option>
            <option>리뷰 많은순</option>
            <option>최신 등록순</option>
          </select>
        </label>
      </div>
      <div class="dc-srp__chips">
        <span class="dc-srp__chip">500ml 안팎 <button class="dc-srp__chip-x" type="button"><span class="dc-sr">500ml 안팎 조건 지우기</span>✕</button></span>
        <span class="dc-srp__chip">10,000원 ~ 50,000원 <button class="dc-srp__chip-x" type="button"><span class="dc-sr">가격 조건 지우기</span>✕</button></span>
        <button class="dc-srp__chip-clear" type="button">조건 전체 해제</button>
      </div>
      <ul class="dc-srp__list">
        <li class="dc-srp__item">
          <span class="dc-srp__thumb" aria-hidden="true">써</span>
          <div class="dc-srp__info">
            <h3 class="dc-srp__name"><a href="#">써모스 진공단열 텀블러 500ml 매트블랙</a></h3>
            <p class="dc-srp__meta">써모스 · 6시간 보온 · 식기세척기 가능</p>
            <p class="dc-srp__rate"><span class="dc-srp__star" aria-hidden="true">★</span> 4.8 <span class="dc-srp__meta">리뷰 2,481</span></p>
          </div>
          <div class="dc-srp__price">
            <span class="dc-srp__won">32,900원</span>
            <span class="dc-srp__ship">무료배송 · 내일 도착</span>
            <span class="dc-srp__badge">리뷰 1위</span>
          </div>
        </li>
        <li class="dc-srp__item">
          <span class="dc-srp__thumb" aria-hidden="true">락</span>
          <div class="dc-srp__info">
            <h3 class="dc-srp__name"><a href="#">락앤락 메트로 보온병 480ml 아이보리</a></h3>
            <p class="dc-srp__meta">락앤락 · 스테인리스 316 · 이중 마개</p>
            <p class="dc-srp__rate"><span class="dc-srp__star" aria-hidden="true">★</span> 4.6 <span class="dc-srp__meta">리뷰 932</span></p>
          </div>
          <div class="dc-srp__price">
            <span class="dc-srp__won">24,500원</span>
            <span class="dc-srp__ship">무료배송</span>
            <span class="dc-srp__badge">쿠폰 2,000원</span>
          </div>
        </li>
        <li class="dc-srp__item">
          <span class="dc-srp__thumb" aria-hidden="true">스</span>
          <div class="dc-srp__info">
            <h3 class="dc-srp__name"><a href="#">스탠리 클래식 진공 보틀 530ml 그린</a></h3>
            <p class="dc-srp__meta">스탠리 · 평생 보증 · 손잡이형</p>
            <p class="dc-srp__rate"><span class="dc-srp__star" aria-hidden="true">★</span> 4.9 <span class="dc-srp__meta">리뷰 1,204</span></p>
          </div>
          <div class="dc-srp__price">
            <span class="dc-srp__won">48,000원</span>
            <span class="dc-srp__ship">3,000원 배송</span>
            <span class="dc-srp__badge">남은 수량 3개</span>
          </div>
        </li>
        <li class="dc-srp__item">
          <span class="dc-srp__thumb" aria-hidden="true">키</span>
          <div class="dc-srp__info">
            <h3 class="dc-srp__name"><a href="#">키친아트 경량 보온 물병 460ml 실버</a></h3>
            <p class="dc-srp__meta">키친아트 · 무게 212g · 아동용 스트랩 포함</p>
            <p class="dc-srp__rate"><span class="dc-srp__star" aria-hidden="true">★</span> 4.3 <span class="dc-srp__meta">리뷰 318</span></p>
          </div>
          <div class="dc-srp__price">
            <span class="dc-srp__won">16,900원</span>
            <span class="dc-srp__ship">무료배송 · 내일 도착</span>
            <span class="dc-srp__badge">지난주 312개 판매</span>
          </div>
        </li>
      </ul>
      <nav class="dc-srp__pager" aria-label="검색 결과 페이지">
        <a class="dc-srp__page dc-srp__page--on" href="#" aria-current="page">1</a>
        <a class="dc-srp__page" href="#">2</a>
        <a class="dc-srp__page" href="#">3</a>
        <a class="dc-srp__page" href="#">4</a>
        <a class="dc-srp__page" href="#">다음</a>
      </nav>
    </main>
  </div>
</div>
.dc-srp { min-height:700px; background:var(--dc-bg); color:var(--dc-text); font-family:var(--dc-font); }
.dc-srp__bar { position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:var(--dc-4); padding:var(--dc-3) var(--dc-5); background:var(--dc-surface); border-bottom:1px solid var(--dc-line); }
.dc-srp__brand { font-size:16px; font-weight:800; letter-spacing:-.01em; color:var(--dc-brand); }
.dc-srp__search { display:flex; align-items:center; gap:var(--dc-2); flex:1; max-width:560px; }
.dc-srp__search-input { flex:1; min-height:44px; padding:0 var(--dc-3); border:1px solid var(--dc-line-field); border-radius:var(--dc-r-sm); background:var(--dc-surface); color:var(--dc-text); font-size:14px; }
.dc-srp__search-input:focus { border-color:var(--dc-brand); box-shadow:0 0 0 3px var(--dc-brand-soft); outline:none; }
.dc-srp__search-btn { min-height:44px; padding:0 var(--dc-4); border:1px solid transparent; border-radius:var(--dc-r-sm); background:var(--dc-brand); color:var(--dc-text-on); font-size:14px; font-weight:700; }
.dc-srp__search-btn:hover { background:var(--dc-brand-hi); }
.dc-srp__body { display:grid; grid-template-columns:236px minmax(0, 1fr); gap:var(--dc-6); max-width:1080px; margin-inline:auto; padding:var(--dc-5); align-items:start; }
.dc-srp__side { display:flex; flex-direction:column; gap:var(--dc-5); padding:var(--dc-4); border:1px solid var(--dc-line); border-radius:var(--dc-r-md); background:var(--dc-surface); }
.dc-srp__fgroup { display:flex; flex-direction:column; gap:var(--dc-2); }
.dc-srp__ftitle { font-size:13px; font-weight:700; }
.dc-srp__fopts { display:flex; flex-direction:column; }
.dc-srp__fopt { display:flex; align-items:center; gap:var(--dc-2); min-height:40px; font-size:13px; color:var(--dc-text-sub); cursor:pointer; }
.dc-srp__fbox { width:18px; height:18px; accent-color:var(--dc-brand); }
.dc-srp__fcount { margin-left:auto; color:var(--dc-text-mute); font-size:12px; }
.dc-srp__range { display:flex; align-items:center; gap:var(--dc-2); color:var(--dc-text-mute); font-size:13px; }
.dc-srp__range-in { width:84px; min-height:40px; padding:0 var(--dc-2); border:1px solid var(--dc-line-field); border-radius:var(--dc-r-sm); background:var(--dc-surface); color:var(--dc-text); font-size:13px; text-align:right; }
.dc-srp__main { display:flex; flex-direction:column; gap:var(--dc-4); }
.dc-srp__sum { display:flex; align-items:center; justify-content:space-between; gap:var(--dc-3); flex-wrap:wrap; }
.dc-srp__sum-text { font-size:14px; color:var(--dc-text-sub); }
.dc-srp__strong { color:var(--dc-text); font-weight:700; }
.dc-srp__sort { display:inline-flex; align-items:center; }
.dc-srp__sort-sel { min-height:40px; padding:0 var(--dc-3); border:1px solid var(--dc-line-field); border-radius:var(--dc-r-sm); background:var(--dc-surface); color:var(--dc-text); font-size:13px; }
.dc-srp__chips { display:flex; align-items:center; gap:var(--dc-2); flex-wrap:wrap; }
.dc-srp__chip { display:inline-flex; align-items:center; gap:var(--dc-1); padding:var(--dc-1) var(--dc-1) var(--dc-1) var(--dc-3); border:1px solid var(--dc-line); border-radius:var(--dc-r-full); background:var(--dc-brand-soft); color:var(--dc-brand-text); font-size:12px; font-weight:600; }
.dc-srp__chip-x { display:grid; place-items:center; width:28px; height:28px; border:none; border-radius:var(--dc-r-full); background:transparent; color:var(--dc-brand-text); font-size:12px; }
.dc-srp__chip-x:hover { background:var(--dc-surface); }
.dc-srp__chip-clear { min-height:32px; padding:0 var(--dc-2); border:none; background:transparent; color:var(--dc-text-sub); font-size:12px; text-decoration:underline; }
.dc-srp__list { display:flex; flex-direction:column; }
.dc-srp__item { display:grid; grid-template-columns:92px minmax(0, 1fr) auto; gap:var(--dc-4); padding:var(--dc-4) 0; border-top:1px solid var(--dc-line); }
.dc-srp__item:first-child { border-top:none; }
.dc-srp__thumb { display:grid; place-items:center; width:92px; height:92px; border:1px solid var(--dc-line); border-radius:var(--dc-r-md); background:var(--dc-sunken); color:var(--dc-text-mute); font-size:22px; font-weight:700; }
.dc-srp__info { display:flex; flex-direction:column; gap:var(--dc-1); }
.dc-srp__name { font-size:15px; font-weight:600; line-height:1.45; }
.dc-srp__name a { color:var(--dc-text); text-decoration:none; }
.dc-srp__name a:hover { color:var(--dc-brand); text-decoration:underline; }
.dc-srp__meta { font-size:12px; color:var(--dc-text-sub); }
.dc-srp__rate { display:flex; align-items:center; gap:var(--dc-1); margin-top:var(--dc-1); font-size:13px; font-weight:600; }
.dc-srp__star { color:var(--dc-warn); }
.dc-srp__price { display:flex; flex-direction:column; align-items:flex-end; gap:var(--dc-1); text-align:right; }
.dc-srp__won { font-size:18px; font-weight:800; letter-spacing:-.01em; }
.dc-srp__ship { font-size:12px; color:var(--dc-ok); font-weight:600; }
.dc-srp__badge { padding:2px var(--dc-2); border-radius:var(--dc-r-full); background:var(--dc-sunken); color:var(--dc-text-sub); font-size:11px; }
.dc-srp__pager { display:flex; align-items:center; justify-content:center; gap:var(--dc-1); padding-top:var(--dc-4); border-top:1px solid var(--dc-line); }
.dc-srp__page { display:grid; place-items:center; min-width:40px; min-height:40px; padding:0 var(--dc-2); border:1px solid var(--dc-line); border-radius:var(--dc-r-sm); color:var(--dc-text-sub); font-size:13px; text-decoration:none; }
.dc-srp__page:hover { background:var(--dc-sunken); color:var(--dc-text); }
.dc-srp__page--on { border-color:var(--dc-brand); background:var(--dc-brand); color:var(--dc-text-on); font-weight:700; }
.dc-srp__empty { display:flex; flex-direction:column; align-items:center; gap:var(--dc-3); padding:var(--dc-8) var(--dc-5); border:1px dashed var(--dc-line-bold); border-radius:var(--dc-r-lg); background:var(--dc-surface); text-align:center; }
.dc-srp__empty-title { font-size:18px; font-weight:700; }
.dc-srp__empty-text { max-width:420px; font-size:13px; color:var(--dc-text-sub); line-height:1.6; }
.dc-srp__empty-acts { display:flex; align-items:center; gap:var(--dc-2); flex-wrap:wrap; justify-content:center; }
.dc-srp__empty-btn { min-height:44px; padding:0 var(--dc-4); border:1px solid transparent; border-radius:var(--dc-r-sm); background:var(--dc-brand); color:var(--dc-text-on); font-size:14px; font-weight:700; }
.dc-srp__empty-btn:hover { background:var(--dc-brand-hi); }
@media (max-width:860px) {
  .dc-srp__body { grid-template-columns:1fr; gap:var(--dc-4); }
  .dc-srp__item { grid-template-columns:72px minmax(0, 1fr); }
  .dc-srp__thumb { width:72px; height:72px; }
  .dc-srp__price { grid-column:2; align-items:flex-start; text-align:left; }
}

How to use it

  • Say the result count and the active filters in words, right above the list
  • Show active filters as chips, with per-chip removal and a clear-all in the same spot every time
  • Default to relevance and keep the current sort visible
  • Keep one row to what the choice actually needs: price, delivery, rating

Watch out for

  • Wrapping the whole row in one link makes screen readers read a paragraph-long link — link the title only
  • An empty result needs more than an empty frame: name the filter to drop
  • Give each chip’s ✕ a dc-sr label saying what it removes; the glyph alone is not read out

Next