तेर्सो स्क्रोल लाइन
ठाडो थुपार्दा स्क्रिन निकै लामो बनाउने समूहलाई एउटै लाइनमा सार्दै हेर्न दिने टुक्रा।
प्रत्यक्ष पूर्वावलोकन
स्रोत
<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);
}कसरी प्रयोग गर्ने
- दायाँ छेउमा अर्को कोठाको केही भाग देखिने गरी राख्नुहोस् — अझै छ भन्ने एउटै सङ्केत त्यही हो
- एक लाइनमा दस कोठाभित्र राख्नुहोस्; बढी भए 'सबै देखाउनु' स्क्रिनमा पठाउनुहोस्
- कोठाको चौडाइ स्क्रिनसँग नमिलाई निश्चित राख्नुहोस्; snap mandatory नभई proximity राख्नुहोस्
ध्यान दिनुपर्ने कुरा
- दुवै छेउको खाली ठाउँ कोठाको margin नभई लाइनको padding ले दिनुहोस्, नत्र अन्तिम कोठा स्क्रिनको छेउमा टाँसिन्छ
- तेर्सो मात्र चल्ने लाइनमा किबोर्डले पनि पुग्नुपर्छ — कोठालाई लिङ्क वा बटन बनाउनुहोस्
- एउटै लाइनभित्र ठाडो स्क्रोल पनि हुन नदिनुहोस् — औँलाले दिशा हराउँछ