फुटर नेभिगेसन
पृष्ठको फेदमा 'यहाँ अरू के छ' र 'यो ठाउँ भरपर्दो छ कि' दुवैको जवाफ एकैचोटि दिने टुक्रा।
प्रत्यक्ष पूर्वावलोकन
स्रोत
<footer class="dc-foot">
<nav class="dc-foot__cols" aria-label="사이트 안내">
<div class="dc-foot__col">
<h2 class="dc-foot__head">일자리 찾기</h2>
<ul class="dc-foot__list">
<li><a class="dc-foot__link" href="#">오늘 올라온 공고</a></li>
<li><a class="dc-foot__link" href="#">지역별 보기</a></li>
<li><a class="dc-foot__link" href="#">업종별 보기</a></li>
</ul>
</div>
<div class="dc-foot__col">
<h2 class="dc-foot__head">일하며 알아 둘 것</h2>
<ul class="dc-foot__list">
<li><a class="dc-foot__link" href="#">근로계약서 안내</a></li>
<li><a class="dc-foot__link" href="#">임금을 못 받았을 때</a></li>
<li><a class="dc-foot__link" href="#">산업재해 신청</a></li>
</ul>
</div>
<div class="dc-foot__col">
<h2 class="dc-foot__head">도움 받기</h2>
<ul class="dc-foot__list">
<li><a class="dc-foot__link" href="#">상담 전화 1350</a></li>
<li><a class="dc-foot__link" href="#">가까운 지원센터</a></li>
<li><a class="dc-foot__link" href="#">자주 묻는 질문</a></li>
</ul>
</div>
</nav>
<div class="dc-foot__bar">
<p class="dc-foot__copy">© 2026 이음 협동조합</p>
<ul class="dc-foot__legal">
<li><a class="dc-foot__link dc-foot__link--small" href="#">이용약관</a></li>
<li><a class="dc-foot__link dc-foot__link--small" href="#">개인정보 처리방침</a></li>
<li><a class="dc-foot__link dc-foot__link--small" href="#">문의하기</a></li>
</ul>
</div>
</footer>.dc-foot { padding:var(--dc-6) var(--dc-4) var(--dc-4); border-top:1px solid var(--dc-line); background:var(--dc-sunken); font-family:var(--dc-font); }
.dc-foot__cols { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:var(--dc-6) var(--dc-5); }
.dc-foot__col { min-width:0; }
.dc-foot__head { margin:0 0 var(--dc-2); font-size:13px; font-weight:700; color:var(--dc-text); }
.dc-foot__list { margin:0; padding:0; list-style:none; }
.dc-foot__link { display:inline-flex; align-items:center; min-height:36px; padding:var(--dc-1) 0; color:var(--dc-text-sub); font-size:13px; text-decoration:none; }
.dc-foot__link:hover { color:var(--dc-brand-text); text-decoration:underline; }
.dc-foot__link--small { min-height:32px; font-size:12px; }
.dc-foot__bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--dc-2) var(--dc-4); margin-top:var(--dc-6); padding-top:var(--dc-4); border-top:1px solid var(--dc-line); }
.dc-foot__copy { margin:0; font-size:12px; color:var(--dc-text-sub); }
.dc-foot__legal { display:flex; flex-wrap:wrap; gap:var(--dc-4); margin:0; padding:0; list-style:none; }
.dc-foot--compact { padding:var(--dc-4); }
.dc-foot__row { display:flex; flex-wrap:wrap; gap:var(--dc-2) var(--dc-5); margin:0; padding:0; list-style:none; }
.dc-foot__fold { border-bottom:1px solid var(--dc-line); }
.dc-foot__sum { display:flex; align-items:center; min-height:44px; font-size:13px; font-weight:700; color:var(--dc-text); cursor:pointer; }
.dc-foot__sum::-webkit-details-marker { display:none; }
.dc-foot__caret { margin-left:auto; font-size:11px; color:var(--dc-text-sub); transition:transform var(--dc-fast); }
.dc-foot__fold[open] .dc-foot__caret { transform:rotate(180deg); }कसरी प्रयोग गर्ने
- समूह तीन-चारभन्दा बढी नराख्नु, र नाम आउने मान्छेको भाषामा राख्नु — 'कम्पनी परिचय' नभई 'काम खोज्ने'
- कानुनी सूचना र सम्पर्क अन्तिम लाइनमा छुट्टै राख्नु; खोज्ने मान्छे सधैँ त्यहीँ हेर्छ
- माथिको मेनु जस्ताको तस्तै नदोहोर्याउनु — फुटर माथि नअटेका चीजको ठाउँ हो
ध्यान दिनुपर्ने कुरा
- लिंकको उचाइ ३६px वा बढी राख्नु र लाइनबीच खुकुलो राख्नु; साना अक्षर टाँसिए औँलाले थिच्न सकिँदैन
- nav मा aria-label राख्नु, नत्र मूल मेनुसँग मिल्छ