Daftar produk
Layar untuk saat pilihannya terlalu banyak: persempit syaratnya, lalu bandingkan sisanya.
Pratinjau langsung
Sumber
<script>document.body.className="dc-bleed"</script>
<div class="dc-pl">
<header class="dc-pl__bar">
<a class="dc-pl__logo" href="#dc-pl-home">달리기상점</a>
<form class="dc-pl__search" action="#dc-pl-list" method="get" role="search">
<label class="dc-sr" for="dc-pl-q">상품 검색</label>
<input class="dc-pl__search-input" id="dc-pl-q" type="search" name="q" value="러닝화">
<button class="dc-pl__search-btn" type="submit">찾기</button>
</form>
<a class="dc-pl__cart" href="#dc-pl-cart">장바구니<span class="dc-pl__cart-num">2</span></a>
</header>
<nav class="dc-pl__crumb" aria-label="현재 위치">
<a class="dc-pl__crumb-link" href="#dc-pl-home">홈</a>
<span class="dc-pl__crumb-sep" aria-hidden="true">/</span>
<a class="dc-pl__crumb-link" href="#dc-pl-shoes">신발</a>
<span class="dc-pl__crumb-sep" aria-hidden="true">/</span>
<span class="dc-pl__crumb-now" aria-current="page">러닝화</span>
</nav>
<div class="dc-pl__body">
<form class="dc-pl__filter" action="#dc-pl-list" method="get">
<h2 class="dc-pl__filter-title">조건 좁히기</h2>
<fieldset class="dc-pl__set">
<legend class="dc-pl__legend">브랜드</legend>
<label class="dc-pl__check"><input class="dc-pl__box" type="checkbox" name="brand" value="asics"><span>아식스 (42)</span></label>
<label class="dc-pl__check"><input class="dc-pl__box" type="checkbox" name="brand" value="nike"><span>나이키 (38)</span></label>
<label class="dc-pl__check"><input class="dc-pl__box" type="checkbox" name="brand" value="nb"><span>뉴발란스 (21)</span></label>
<label class="dc-pl__check"><input class="dc-pl__box" type="checkbox" name="brand" value="hoka"><span>호카 (14)</span></label>
</fieldset>
<fieldset class="dc-pl__set">
<legend class="dc-pl__legend">가격대</legend>
<label class="dc-pl__check"><input class="dc-pl__box" type="radio" name="price" value="a"><span>10만원 미만</span></label>
<label class="dc-pl__check"><input class="dc-pl__box" type="radio" name="price" value="b" checked><span>10만 – 20만원</span></label>
<label class="dc-pl__check"><input class="dc-pl__box" type="radio" name="price" value="c"><span>20만원 이상</span></label>
</fieldset>
<fieldset class="dc-pl__set">
<legend class="dc-pl__legend">사이즈</legend>
<div class="dc-pl__chips">
<label class="dc-pl__chip"><input class="dc-pl__chip-box" type="checkbox" name="size" value="255"><span>255</span></label>
<label class="dc-pl__chip"><input class="dc-pl__chip-box" type="checkbox" name="size" value="260"><span>260</span></label>
<label class="dc-pl__chip"><input class="dc-pl__chip-box" type="checkbox" name="size" value="265" checked><span>265</span></label>
<label class="dc-pl__chip"><input class="dc-pl__chip-box" type="checkbox" name="size" value="270"><span>270</span></label>
<label class="dc-pl__chip"><input class="dc-pl__chip-box" type="checkbox" name="size" value="275"><span>275</span></label>
<label class="dc-pl__chip"><input class="dc-pl__chip-box" type="checkbox" name="size" value="280"><span>280</span></label>
</div>
</fieldset>
<fieldset class="dc-pl__set">
<legend class="dc-pl__legend">배송</legend>
<label class="dc-pl__check"><input class="dc-pl__box" type="checkbox" name="ship" value="free" checked><span>무료배송만</span></label>
<label class="dc-pl__check"><input class="dc-pl__box" type="checkbox" name="ship" value="today"><span>오늘 출발</span></label>
</fieldset>
<div class="dc-pl__filter-act">
<button class="dc-pl__apply" type="submit">조건 적용</button>
<button class="dc-pl__reset" type="reset">모두 지우기</button>
</div>
</form>
<main class="dc-pl__main" id="dc-pl-list">
<div class="dc-pl__head">
<div class="dc-pl__head-text">
<h1 class="dc-pl__h1">러닝화</h1>
<p class="dc-pl__count">115개 가운데 1 – 6번째</p>
</div>
<div class="dc-pl__sort">
<label class="dc-pl__sort-label" for="dc-pl-sort">정렬</label>
<select class="dc-pl__select" id="dc-pl-sort" name="sort">
<option selected>인기순</option>
<option>낮은 가격순</option>
<option>높은 가격순</option>
<option>신상품순</option>
<option>후기 많은순</option>
</select>
</div>
</div>
<ul class="dc-pl__chosen" aria-label="지금 적용한 조건">
<li><button class="dc-pl__chosen-btn" type="button">10만 – 20만원<span class="dc-pl__x" aria-hidden="true">×</span><span class="dc-sr"> 조건 지우기</span></button></li>
<li><button class="dc-pl__chosen-btn" type="button">265<span class="dc-pl__x" aria-hidden="true">×</span><span class="dc-sr"> 조건 지우기</span></button></li>
<li><button class="dc-pl__chosen-btn" type="button">무료배송만<span class="dc-pl__x" aria-hidden="true">×</span><span class="dc-sr"> 조건 지우기</span></button></li>
</ul>
<ul class="dc-pl__grid">
<li class="dc-pl__card">
<a class="dc-pl__card-link" href="#dc-pl-item-1">
<span class="dc-pl__thumb" aria-hidden="true"></span>
<span class="dc-pl__brand">아식스</span>
<span class="dc-pl__name">젤카야노 31 와이드</span>
<span class="dc-pl__price"><b class="dc-pl__now">178,000원</b><s class="dc-pl__was"><span class="dc-sr">정가 </span>219,000원</s><em class="dc-pl__off"><span class="dc-sr">할인 </span>19%</em></span>
<span class="dc-pl__meta"><span class="dc-pl__star" aria-hidden="true">★</span><span class="dc-sr">평점 </span>4.8<span class="dc-pl__rev">후기 1,204개</span></span>
<span class="dc-pl__tags"><span class="dc-pl__tag">무료배송</span><span class="dc-pl__tag dc-pl__tag--fast">오늘출발</span></span>
</a>
</li>
<li class="dc-pl__card">
<a class="dc-pl__card-link" href="#dc-pl-item-2">
<span class="dc-pl__thumb" aria-hidden="true"></span>
<span class="dc-pl__brand">나이키</span>
<span class="dc-pl__name">페가수스 41</span>
<span class="dc-pl__price"><b class="dc-pl__now">129,000원</b><s class="dc-pl__was"><span class="dc-sr">정가 </span>139,000원</s><em class="dc-pl__off"><span class="dc-sr">할인 </span>7%</em></span>
<span class="dc-pl__meta"><span class="dc-pl__star" aria-hidden="true">★</span><span class="dc-sr">평점 </span>4.6<span class="dc-pl__rev">후기 892개</span></span>
<span class="dc-pl__tags"><span class="dc-pl__tag">무료배송</span></span>
</a>
</li>
<li class="dc-pl__card">
<a class="dc-pl__card-link" href="#dc-pl-item-3">
<span class="dc-pl__thumb" aria-hidden="true"></span>
<span class="dc-pl__brand">뉴발란스</span>
<span class="dc-pl__name">프레시폼 1080 v14</span>
<span class="dc-pl__price"><b class="dc-pl__now">184,000원</b></span>
<span class="dc-pl__meta"><span class="dc-pl__star" aria-hidden="true">★</span><span class="dc-sr">평점 </span>4.7<span class="dc-pl__rev">후기 541개</span></span>
<span class="dc-pl__tags"><span class="dc-pl__tag">무료배송</span></span>
</a>
</li>
<li class="dc-pl__card">
<a class="dc-pl__card-link" href="#dc-pl-item-4">
<span class="dc-pl__thumb" aria-hidden="true"></span>
<span class="dc-pl__brand">호카</span>
<span class="dc-pl__name">클리프톤 10</span>
<span class="dc-pl__price"><b class="dc-pl__now">199,000원</b><s class="dc-pl__was"><span class="dc-sr">정가 </span>229,000원</s><em class="dc-pl__off"><span class="dc-sr">할인 </span>13%</em></span>
<span class="dc-pl__meta"><span class="dc-pl__star" aria-hidden="true">★</span><span class="dc-sr">평점 </span>4.5<span class="dc-pl__rev">후기 318개</span></span>
<span class="dc-pl__tags"><span class="dc-pl__tag">무료배송</span><span class="dc-pl__tag dc-pl__tag--fast">오늘출발</span></span>
</a>
</li>
<li class="dc-pl__card">
<a class="dc-pl__card-link" href="#dc-pl-item-5">
<span class="dc-pl__thumb" aria-hidden="true"></span>
<span class="dc-pl__brand">아식스</span>
<span class="dc-pl__name">노바블라스트 5</span>
<span class="dc-pl__price"><b class="dc-pl__now">142,000원</b></span>
<span class="dc-pl__meta"><span class="dc-pl__star" aria-hidden="true">★</span><span class="dc-sr">평점 </span>4.4<span class="dc-pl__rev">후기 267개</span></span>
<span class="dc-pl__tags"><span class="dc-pl__tag">무료배송</span></span>
</a>
</li>
<li class="dc-pl__card">
<a class="dc-pl__card-link" href="#dc-pl-item-6">
<span class="dc-pl__thumb" aria-hidden="true"></span>
<span class="dc-pl__brand">나이키</span>
<span class="dc-pl__name">보메로 18</span>
<span class="dc-pl__price"><b class="dc-pl__now">189,000원</b></span>
<span class="dc-pl__meta"><span class="dc-pl__star" aria-hidden="true">★</span><span class="dc-sr">평점 </span>4.9<span class="dc-pl__rev">후기 1,533개</span></span>
<span class="dc-pl__tags"><span class="dc-pl__tag">무료배송</span><span class="dc-pl__tag dc-pl__tag--fast">오늘출발</span></span>
</a>
</li>
</ul>
<nav class="dc-pl__pager" aria-label="쪽 넘기기">
<span class="dc-pl__page dc-pl__page--off">이전</span>
<a class="dc-pl__page dc-pl__page--on" href="#dc-pl-list" aria-current="page">1</a>
<a class="dc-pl__page" href="#dc-pl-list">2</a>
<a class="dc-pl__page" href="#dc-pl-list">3</a>
<a class="dc-pl__page" href="#dc-pl-list">4</a>
<a class="dc-pl__page" href="#dc-pl-list">다음</a>
</nav>
</main>
</div>
</div>.dc-pl { font-family:var(--dc-font); background:var(--dc-bg); color:var(--dc-text); }
.dc-pl__bar { display:flex; align-items:center; gap:var(--dc-4); padding:var(--dc-3) var(--dc-5); border-bottom:1px solid var(--dc-line); background:var(--dc-surface); }
.dc-pl__logo { font-size:17px; font-weight:800; letter-spacing:-.02em; color:var(--dc-text); text-decoration:none; }
.dc-pl__search { display:flex; flex:1; gap:var(--dc-2); max-width:420px; }
.dc-pl__search-input { flex:1; min-width:0; 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:14px; }
.dc-pl__search-input:focus { border-color:var(--dc-brand); box-shadow:0 0 0 3px var(--dc-brand-soft); }
.dc-pl__search-btn { min-height:40px; 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-pl__search-btn:hover { background:var(--dc-brand-hi); }
.dc-pl__cart { display:inline-flex; align-items:center; gap:var(--dc-2); min-height:40px; margin-left:auto; padding:0 var(--dc-3); border:1px solid var(--dc-line-field); border-radius:var(--dc-r-sm); color:var(--dc-text); font-size:14px; font-weight:600; text-decoration:none; }
.dc-pl__cart-num { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 var(--dc-1); border-radius:var(--dc-r-full); background:var(--dc-brand); color:var(--dc-text-on); font-size:12px; font-weight:700; }
.dc-pl__crumb { display:flex; align-items:center; gap:var(--dc-2); padding:var(--dc-3) var(--dc-5); font-size:13px; color:var(--dc-text-sub); }
.dc-pl__crumb-link { color:var(--dc-text-sub); text-decoration:none; }
.dc-pl__crumb-link:hover { color:var(--dc-text); text-decoration:underline; }
.dc-pl__crumb-sep { color:var(--dc-text-mute); }
.dc-pl__crumb-now { color:var(--dc-text); font-weight:600; }
.dc-pl__body { display:grid; grid-template-columns:232px minmax(0,1fr); gap:var(--dc-6); align-items:start; padding:0 var(--dc-5) var(--dc-7); }
.dc-pl__filter { display:flex; flex-direction:column; gap:var(--dc-4); padding:var(--dc-4); border:1px solid var(--dc-line); border-radius:var(--dc-r-md); background:var(--dc-surface); }
.dc-pl__filter-title { font-size:15px; font-weight:700; }
.dc-pl__set { display:flex; flex-direction:column; gap:var(--dc-1); padding:0; border:0; border-top:1px solid var(--dc-line); padding-top:var(--dc-3); }
.dc-pl__legend { padding:0; font-size:13px; font-weight:700; color:var(--dc-text-sub); }
.dc-pl__check { display:flex; align-items:center; gap:var(--dc-2); min-height:44px; font-size:14px; color:var(--dc-text); cursor:pointer; }
.dc-pl__box { width:18px; height:18px; accent-color:var(--dc-brand); }
.dc-pl__chips { display:flex; flex-wrap:wrap; gap:var(--dc-2); padding-top:var(--dc-2); }
.dc-pl__chip { position:relative; display:inline-flex; align-items:center; justify-content:center; min-width:56px; min-height:44px; border:1px solid var(--dc-line-field); border-radius:var(--dc-r-sm); font-size:14px; cursor:pointer; }
.dc-pl__chip:hover { background:var(--dc-sunken); }
.dc-pl__chip:has(.dc-pl__chip-box:checked) { border-color:var(--dc-brand); background:var(--dc-brand-soft); color:var(--dc-brand-text); font-weight:700; }
.dc-pl__chip-box { position:absolute; width:1px; height:1px; opacity:0; }
.dc-pl__chip:has(.dc-pl__chip-box:focus-visible) { outline:2px solid var(--dc-brand); outline-offset:2px; }
.dc-pl__filter-act { display:flex; flex-direction:column; gap:var(--dc-2); }
.dc-pl__apply { min-height:44px; 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-pl__apply:hover { background:var(--dc-brand-hi); }
.dc-pl__reset { min-height:44px; border:1px solid var(--dc-line-field); border-radius:var(--dc-r-sm); background:var(--dc-surface); color:var(--dc-text-sub); font-size:14px; font-weight:600; }
.dc-pl__reset:hover { color:var(--dc-text); background:var(--dc-sunken); }
.dc-pl__main { display:flex; flex-direction:column; gap:var(--dc-4); min-width:0; }
.dc-pl__head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--dc-3); }
.dc-pl__head-text { display:flex; flex-direction:column; gap:var(--dc-1); }
.dc-pl__h1 { font-size:24px; font-weight:800; letter-spacing:-.02em; }
.dc-pl__count { font-size:13px; color:var(--dc-text-mute); }
.dc-pl__sort { display:flex; align-items:center; gap:var(--dc-2); }
.dc-pl__sort-label { font-size:13px; color:var(--dc-text-sub); }
.dc-pl__select { 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:14px; }
.dc-pl__chosen { display:flex; flex-wrap:wrap; gap:var(--dc-2); }
.dc-pl__chosen-btn { display:inline-flex; align-items:center; gap:var(--dc-1); min-height:36px; padding:0 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:13px; font-weight:600; }
.dc-pl__chosen-btn:hover { border-color:var(--dc-brand); }
.dc-pl__x { font-size:15px; line-height:1; }
.dc-pl__grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--dc-4); }
.dc-pl__card { display:flex; flex-direction:column; }
.dc-pl__card-link { display:flex; flex-direction:column; gap:var(--dc-1); padding:var(--dc-3); border:1px solid var(--dc-line); border-radius:var(--dc-r-md); background:var(--dc-surface); color:inherit; text-decoration:none; transition:box-shadow var(--dc-fast), border-color var(--dc-fast); }
.dc-pl__card-link:hover { border-color:var(--dc-line-bold); box-shadow:var(--dc-sh-2); }
.dc-pl__thumb { display:block; aspect-ratio:4 / 3; margin-bottom:var(--dc-2); border-radius:var(--dc-r-sm); background:linear-gradient(135deg, var(--dc-sunken), var(--dc-brand-soft)); }
.dc-pl__brand { font-size:12px; font-weight:700; color:var(--dc-text-mute); }
.dc-pl__name { font-size:15px; font-weight:600; line-height:1.4; }
.dc-pl__price { display:flex; align-items:baseline; gap:var(--dc-2); margin-top:var(--dc-1); }
.dc-pl__now { font-size:17px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.dc-pl__was { font-size:13px; color:var(--dc-text-mute); }
.dc-pl__off { font-size:13px; font-style:normal; font-weight:700; color:var(--dc-danger); }
.dc-pl__meta { display:flex; align-items:center; gap:var(--dc-2); font-size:13px; color:var(--dc-text-sub); }
.dc-pl__star { color:var(--dc-warn); }
.dc-pl__rev { color:var(--dc-text-mute); }
.dc-pl__tags { display:flex; flex-wrap:wrap; gap:var(--dc-1); margin-top:var(--dc-2); }
.dc-pl__tag { padding:2px var(--dc-2); border-radius:var(--dc-r-xs); background:var(--dc-sunken); color:var(--dc-text-sub); font-size:12px; font-weight:600; }
.dc-pl__tag--fast { background:var(--dc-ok-soft); color:var(--dc-ok); }
.dc-pl__pager { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--dc-2); margin-top:var(--dc-3); }
.dc-pl__page { display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:0 var(--dc-3); border:1px solid var(--dc-line-field); border-radius:var(--dc-r-sm); color:var(--dc-text); font-size:14px; font-weight:600; text-decoration:none; }
.dc-pl__page:hover { background:var(--dc-sunken); }
.dc-pl__page--on { border-color:var(--dc-brand); background:var(--dc-brand); color:var(--dc-text-on); }
.dc-pl__page--off { border-color:var(--dc-line); color:var(--dc-text-mute); }
@media (max-width:900px) {
.dc-pl__grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:760px) {
.dc-pl__body { grid-template-columns:1fr; gap:var(--dc-4); padding:0 var(--dc-4) var(--dc-6); }
.dc-pl__search { order:3; max-width:none; flex-basis:100%; }
.dc-pl__bar { flex-wrap:wrap; }
}Cara memakainya
- Cerminkan filter aktif sebagai chip di atas kisi supaya panel kiri tak perlu dibaca ulang
- Kunci urutan di dalam kartu — merek, nama, harga, rating; baris yang bergeser membuat kartu tak bisa dibandingkan
- Tulis posisi pembaca di samping judul: "6 dari 115"
Hal yang perlu diwaspadai
- Sediakan kotak gambar dengan rasio tetap; foto yang datang terlambat menggeser baris dan orang menekan kartu yang salah
- Bungkus kotak centang dalam label agar teksnya bisa ditekan, dan jaga tinggi area tekan minimal 44px