Baris gulir mendatar
Merangkum kelompok yang akan membuat layar vertikal terlalu panjang ke dalam satu baris yang bisa digeser.
Pratinjau langsung
Sumber
<section class="dc-hrow" aria-labelledby="dc-hrow-h">
<div class="dc-hrow__head">
<h2 class="dc-hrow__title" id="dc-hrow-h">오늘 새로 올라온 일자리</h2>
<a class="dc-hrow__more" href="#">전체 보기</a>
</div>
<ul class="dc-hrow__track">
<li class="dc-hrow__cell">
<a class="dc-hrow__card" href="#">
<span class="dc-hrow__thumb" aria-hidden="true"></span>
<span class="dc-hrow__name">물류 상하차</span>
<span class="dc-hrow__meta">인천 · 일당 140,000원</span>
</a>
</li>
<li class="dc-hrow__cell">
<a class="dc-hrow__card" href="#">
<span class="dc-hrow__thumb" aria-hidden="true"></span>
<span class="dc-hrow__name">용접 보조</span>
<span class="dc-hrow__meta">김해 · 일당 160,000원</span>
</a>
</li>
<li class="dc-hrow__cell">
<a class="dc-hrow__card" href="#">
<span class="dc-hrow__thumb" aria-hidden="true"></span>
<span class="dc-hrow__name">식품 포장</span>
<span class="dc-hrow__meta">평택 · 일당 130,000원</span>
</a>
</li>
<li class="dc-hrow__cell">
<a class="dc-hrow__card" href="#">
<span class="dc-hrow__thumb" aria-hidden="true"></span>
<span class="dc-hrow__name">객실 정리</span>
<span class="dc-hrow__meta">제주 · 월급 2,450,000원</span>
</a>
</li>
<li class="dc-hrow__cell">
<a class="dc-hrow__card" href="#">
<span class="dc-hrow__thumb" aria-hidden="true"></span>
<span class="dc-hrow__name">수확 일손</span>
<span class="dc-hrow__meta">나주 · 일당 120,000원</span>
</a>
</li>
</ul>
</section>.dc-hrow { font-family: var(--dc-font); }
.dc-hrow__head {
display: flex; align-items: center; justify-content: space-between;
gap: var(--dc-3);
padding: 0 var(--dc-4) var(--dc-2);
}
.dc-hrow__title {
font-size: 16px; font-weight: 800; letter-spacing: -.02em;
color: var(--dc-text);
}
.dc-hrow__more {
flex: 0 0 auto;
display: inline-flex; align-items: center;
min-height: 44px; padding-left: var(--dc-2);
font-size: 13px; font-weight: 700;
color: var(--dc-brand-text); text-decoration: none;
}
.dc-hrow__track {
display: flex; gap: var(--dc-3);
margin: 0; padding: var(--dc-1) var(--dc-4) var(--dc-4);
overflow-x: auto; overflow-y: hidden;
scroll-snap-type: x proximity;
scroll-padding-left: var(--dc-4);
-webkit-overflow-scrolling: touch;
}
.dc-hrow__cell { flex: 0 0 auto; scroll-snap-align: start; }
.dc-hrow__card {
display: flex; flex-direction: column; gap: var(--dc-1);
width: 152px;
color: var(--dc-text); text-decoration: none;
}
.dc-hrow__thumb {
display: block; width: 100%; aspect-ratio: 4 / 3;
margin-bottom: var(--dc-1);
border: 1px solid var(--dc-line); border-radius: var(--dc-r-md);
background: var(--dc-sunken);
}
.dc-hrow__name {
font-size: 14px; font-weight: 700; line-height: 1.35;
}
.dc-hrow__meta { font-size: 12px; color: var(--dc-text-sub); }
.dc-hrow__card--peek { width: 272px; }
.dc-hrow__card--peek .dc-hrow__thumb { aspect-ratio: 16 / 9; }
.dc-hrow__card--peek .dc-hrow__name { font-size: 16px; }
.dc-hrow__track--chips { padding-top: var(--dc-2); padding-bottom: var(--dc-2); }
.dc-hrow__chip {
display: inline-flex; align-items: center;
min-height: 44px; padding: 0 var(--dc-4);
border: 1px solid var(--dc-line-field); border-radius: var(--dc-r-full);
background: var(--dc-surface); color: var(--dc-text-sub);
font-family: inherit; font-size: 14px; font-weight: 700;
white-space: nowrap;
}
.dc-hrow__chip[aria-pressed="true"] {
border-color: var(--dc-brand);
background: var(--dc-brand-soft);
color: var(--dc-brand-text);
}Cara memakainya
- Biarkan sel berikutnya mengintip di tepi kanan — irisan itu satu-satunya petunjuk bahwa masih ada lagi
- Satu baris cukup di bawah sekitar sepuluh sel; lebih dari itu arahkan ke layar daftar lengkap
- Beri sel lebar tetap, bukan selebar layar, dan pakai snap proximity, bukan mandatory
Hal yang perlu diwaspadai
- Letakkan jarak kedua ujung di padding baris, bukan margin sel, supaya sel terakhir tidak menempel ke tepi layar
- Baris yang hanya bergerak mendatar tetap harus terjangkau keyboard — jadikan tiap sel tautan atau tombol
- Jangan biarkan baris itu juga bisa digulir vertikal; arah gerak jari jadi kabur