फुटर
पृष्ठको अन्तिमसम्म झरेको मान्छेले खोज्ने कुरा — सम्पर्क, सर्त, उजुरी गर्ने ठाउँ — जम्मा गर्ने टुक्रा।
प्रत्यक्ष पूर्वावलोकन
स्रोत
<footer class="dc-footer">
<div class="dc-footer__inner">
<div class="dc-footer__brand">
<p class="dc-footer__name">일자리찾기</p>
<p class="dc-footer__about">한국에서 일하는 사람을 위한 구인 정보. 구직자에게 수수료를 받지 않습니다.</p>
</div>
<nav class="dc-footer__col" aria-label="서비스">
<h2 class="dc-footer__ctitle">서비스</h2>
<ul class="dc-footer__list">
<li><a class="dc-footer__link" href="#">일자리 찾기</a></li>
<li><a class="dc-footer__link" href="#">공고 올리기</a></li>
<li><a class="dc-footer__link" href="#">비자 안내</a></li>
</ul>
</nav>
<nav class="dc-footer__col" aria-label="도움">
<h2 class="dc-footer__ctitle">도움</h2>
<ul class="dc-footer__list">
<li><a class="dc-footer__link" href="#">자주 묻는 질문</a></li>
<li><a class="dc-footer__link" href="#">상담 전화 1234-5678</a></li>
<li><a class="dc-footer__link" href="#">부당한 대우 신고</a></li>
</ul>
</nav>
</div>
<div class="dc-footer__bottom">
<p class="dc-footer__legal">ⓒ 2026 일자리찾기 · 사업자등록번호 123-45-67890</p>
<ul class="dc-footer__meta">
<li><a class="dc-footer__link" href="#">이용약관</a></li>
<li><a class="dc-footer__link" href="#">개인정보 처리방침</a></li>
</ul>
</div>
</footer>.dc-footer { padding:var(--dc-7) var(--dc-6) var(--dc-5); border-top:1px solid var(--dc-line); background:var(--dc-sunken); font-family:var(--dc-font); }
.dc-footer__inner { display:grid; grid-template-columns:minmax(0,1.5fr) repeat(2, minmax(0,1fr)); gap:var(--dc-6); max-width:1120px; margin-inline:auto; }
.dc-footer__brand { min-width:0; }
.dc-footer__name { margin:0 0 var(--dc-2); font-size:16px; font-weight:700; color:var(--dc-text); }
.dc-footer__about { margin:0; max-width:40ch; font-size:13px; line-height:1.65; color:var(--dc-text-sub); }
.dc-footer__col { min-width:0; }
.dc-footer__ctitle { margin:0 0 var(--dc-3); font-size:13px; font-weight:700; color:var(--dc-text); }
.dc-footer__list { display:flex; flex-direction:column; gap:var(--dc-2); margin:0; padding:0; list-style:none; }
.dc-footer__link { display:inline-block; padding:var(--dc-1) 0; font-size:13px; color:var(--dc-text-sub); text-decoration:none; }
.dc-footer__link:hover { color:var(--dc-text); text-decoration:underline; }
.dc-footer__bottom { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--dc-3); max-width:1120px; margin:var(--dc-6) auto 0; padding-top:var(--dc-4); border-top:1px solid var(--dc-line); }
.dc-footer__legal { margin:0; font-size:12px; color:var(--dc-text-mute); }
.dc-footer__meta { display:flex; flex-wrap:wrap; gap:var(--dc-4); margin:0; padding:0; list-style:none; }
.dc-footer--slim { padding:var(--dc-4) var(--dc-6); }
.dc-footer--slim .dc-footer__bottom { margin-top:0; padding-top:0; border-top:0; }
@media (max-width:700px) {
.dc-footer { padding-inline:var(--dc-4); }
.dc-footer__inner { grid-template-columns:minmax(0,1fr); gap:var(--dc-5); }
.dc-footer__bottom { flex-direction:column; align-items:flex-start; }
}कसरी प्रयोग गर्ने
- लिङ्कका समूह बढीमा तीन–चार; सबै लिङ्क कोच्दा कसैले पनि भेट्दैन
- सहायता फोन र उजुरीको लिङ्क कानुनी लिङ्कभन्दा माथि, सजिलै देखिने ठाउँमा राख्नु
- कम्पनीको विवरण — दर्ता नम्बर, ठेगाना — सबैभन्दा तल एक लाइनमा राख्नु
ध्यान दिनुपर्ने कुरा
- समूहको शीर्षक मोटो p ले नबनाउनु; साँचो h2 भए स्क्रिन रिडरले पूरो समूह नाघ्न सक्छ
- लिङ्क धेरै नजिक भए औंलाले छिमेकी लिङ्क थिच्छ। माथितल थोरै खाली ठाउँ दिनु