खोज नतिजाको पङ्क्ति
पढ्ने भन्दा आँखा दौडाउने पङ्क्ति — शीर्षक र तलको एक लाइनले क्लिक गर्ने नगर्ने निर्णय हुन्छ।
प्रत्यक्ष पूर्वावलोकन
स्रोत
<ul class="dc-result">
<li class="dc-result__item">
<span class="dc-result__thumb" aria-hidden="true">용접</span>
<div class="dc-result__body">
<h3 class="dc-result__title"><a class="dc-result__link" href="#"><mark class="dc-result__mark">용접</mark> 보조 구인 — 김해 주촌</a></h3>
<p class="dc-result__meta"><span>대성산업</span><span class="dc-result__dot" aria-hidden="true">·</span><span>경남 김해</span><span class="dc-result__dot" aria-hidden="true">·</span><span class="dc-result__pay">월 290만원</span></p>
<p class="dc-result__desc">주 5일 08:00~17:00, 기숙사를 제공합니다. <mark class="dc-result__mark">용접</mark> 자격이 없어도 두 달 교육 뒤에 배치합니다.</p>
<ul class="dc-result__tags">
<li class="dc-result__tag">기숙사</li>
<li class="dc-result__tag">E-9 가능</li>
</ul>
</div>
<div class="dc-result__side">
<span class="dc-result__date">2일 전</span>
<button class="dc-result__save" type="button" aria-pressed="false"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M6 3h12v18l-6-4-6 4z"></path></svg><span class="dc-sr">이 공고 저장</span></button>
</div>
</li>
<li class="dc-result__item">
<span class="dc-result__thumb" aria-hidden="true">설비</span>
<div class="dc-result__body">
<h3 class="dc-result__title"><a class="dc-result__link" href="#">주말 <mark class="dc-result__mark">용접</mark> 보조 — 이천 식품공장 설비팀</a></h3>
<p class="dc-result__meta"><span>한빛푸드</span><span class="dc-result__dot" aria-hidden="true">·</span><span>경기 이천</span><span class="dc-result__dot" aria-hidden="true">·</span><span class="dc-result__pay">시급 12,000원</span></p>
<p class="dc-result__desc">토·일 09:00~18:00만 일합니다. 설비팀에서 <mark class="dc-result__mark">용접</mark> 기사를 돕는 자리로, 통근 버스가 이천역에서 출발합니다.</p>
<ul class="dc-result__tags">
<li class="dc-result__tag">통근버스</li>
</ul>
</div>
<div class="dc-result__side">
<span class="dc-result__date">어제</span>
<button class="dc-result__save" type="button" aria-pressed="false"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M6 3h12v18l-6-4-6 4z"></path></svg><span class="dc-sr">이 공고 저장</span></button>
</div>
</li>
</ul>.dc-result { display:flex; flex-direction:column; width:100%; max-width:780px; font-family:var(--dc-font); }
.dc-result__item { display:flex; gap:var(--dc-4); padding:var(--dc-4) var(--dc-2); border-bottom:1px solid var(--dc-line); }
.dc-result__item:hover { background:var(--dc-sunken); }
.dc-result__thumb { display:flex; flex:0 0 auto; align-items:center; justify-content:center; width:64px; height:64px; border:1px solid var(--dc-line); border-radius:var(--dc-r-sm); background:var(--dc-sunken); color:var(--dc-text-mute); font-size:12px; font-weight:700; }
.dc-result__body { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:var(--dc-1); }
.dc-result__title { font-size:16px; font-weight:600; line-height:1.4; }
.dc-result__link { color:var(--dc-brand); text-decoration:none; }
.dc-result__link:hover { text-decoration:underline; text-underline-offset:.15em; }
.dc-result__mark { padding:0 2px; border-radius:var(--dc-r-xs); background:var(--dc-warn-soft); color:var(--dc-text); font-weight:700; }
.dc-result__meta { display:flex; flex-wrap:wrap; align-items:center; gap:var(--dc-1); font-size:12px; color:var(--dc-text-sub); font-weight:600; }
.dc-result__pay { color:var(--dc-text); font-weight:700; }
.dc-result__dot { color:var(--dc-line-bold); }
.dc-result__desc { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font-size:13px; line-height:1.6; color:var(--dc-text-sub); }
.dc-result__url { font-size:12px; color:var(--dc-text-mute); word-break:break-all; }
.dc-result__tags { display:flex; flex-wrap:wrap; gap:var(--dc-1); margin-top:var(--dc-1); }
.dc-result__tag { padding:2px var(--dc-2); border-radius:var(--dc-r-full); background:var(--dc-brand-soft); color:var(--dc-brand-text); font-size:11px; font-weight:600; }
.dc-result__badge { display:inline-block; margin-bottom:var(--dc-1); padding:1px var(--dc-2); border:1px solid var(--dc-line-bold); border-radius:var(--dc-r-xs); color:var(--dc-text-sub); font-size:11px; font-weight:700; }
.dc-result__side { display:flex; flex:0 0 auto; flex-direction:column; align-items:flex-end; gap:var(--dc-2); }
.dc-result__date { font-size:12px; color:var(--dc-text-mute); white-space:nowrap; }
.dc-result__save { display:flex; align-items:center; justify-content:center; width:44px; height:44px; border:1px solid var(--dc-line-field); border-radius:var(--dc-r-sm); background:var(--dc-surface); color:var(--dc-text-sub); cursor:pointer; }
.dc-result__save:hover { border-color:var(--dc-brand); color:var(--dc-brand); }
.dc-result__save[aria-pressed="true"] { border-color:var(--dc-brand); background:var(--dc-brand-soft); color:var(--dc-brand-text); }
.dc-result--compact .dc-result__item { gap:var(--dc-3); padding:var(--dc-3) var(--dc-2); }
@media (max-width:560px) {
.dc-result__item { flex-wrap:wrap; }
.dc-result__thumb { width:44px; height:44px; }
.dc-result__side { flex-direction:row; align-items:center; width:100%; justify-content:space-between; }
}कसरी प्रयोग गर्ने
- खोजेको शब्द शीर्षक र विवरण दुवैमा mark ले देखाउनुहोस्, रङ मात्र नभई पृष्ठभूमि दिनुहोस्
- विवरण दुई लाइनमा काट्नुहोस्; उचाइ फरक भए आँखा दौडाउन गाह्रो हुन्छ
- पूरा पङ्क्ति नभई शीर्षकमा मात्र लिङ्क राख्नुहोस्, सेभ बटनलाई ठाउँ चाहिन्छ
ध्यान दिनुपर्ने कुरा
- विज्ञापन पङ्क्तिमा विज्ञापन भन्ने शब्द लेख्नुहोस्; मधुरो रङले छुट्टिँदैन
- थम्बनेलको ठाउँमा img राख्दा विषय बताउने alt दिनुहोस्; यहाँजस्तै शीर्षक दोहोर्याउने बाकसलाई aria-hidden ले छोप्नुहोस्