ការរុករកជើងទំព័រ

ផ្នែកក្រោមបំផុតនៃទំព័រ ដែលឆ្លើយទាំង "មានអ្វីទៀតនៅទីនេះ" និង "កន្លែងនេះអាចទុកចិត្តបានទេ"។

មើលជាមុនផ្ទាល់

ប្រភព

HTML CSS

<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); }

របៀបប្រើ

ដាក់ក្រុមត្រឹមបីឬបួន ហើយដាក់ឈ្មោះតាមពាក្យអ្នកមកលេង — "រកការងារ" មិនមែន "អំពីក្រុមហ៊ុន"
ព័ត៌មានច្បាប់និងទំនាក់ទំនងដាក់ដោយឡែកនៅជួរចុងក្រោយ ព្រោះគេរកនៅទីនោះ
មិនត្រូវដាក់ម៉ឺនុយខាងលើម្ដងទៀត — ជើងទំព័រសម្រាប់អ្វីដែលដាក់ខាងលើមិនបាន

ចំណុចត្រូវប្រុងប្រយ័ត្ន

ដាក់តំណឲ្យខ្ពស់ពី 36px ឡើង និងចន្លោះជួរធំ; អក្សរតូចជិតគ្នាពេកចុចមិនបាន
ដាក់ aria-label លើ nav ដើម្បីកុំច្រឡំនឹងម៉ឺនុយធំ

បន្ទាប់

ក្បាលទំព័រ ការរុករក វេប

មឺនុយទម្លាក់ ការរុករក វេប

ផ្លូវនាំ breadcrumb ការរុករក វេប

ការបែងចែកទំព័រ ការរុករក វេប