विषयसूची
लामो लेखमा अहिले पढिरहेको भाग पूरै लेखको कहाँ पर्छ भन्ने छेउमै देखाउनुपर्दा प्रयोग गर्ने टुक्रा।
प्रत्यक्ष पूर्वावलोकन
स्रोत
<nav class="dc-toc" aria-labelledby="dc-toc-h">
<h2 class="dc-toc__title" id="dc-toc-h">이 문서의 차례</h2>
<ul class="dc-toc__list">
<li class="dc-toc__item"><a class="dc-toc__link" href="#dc-toc-s1">계약하기 전에 확인할 것</a></li>
<li class="dc-toc__item">
<a class="dc-toc__link is-now" href="#dc-toc-s2" aria-current="true">근로계약서 읽는 법</a>
<ul class="dc-toc__sub">
<li class="dc-toc__item"><a class="dc-toc__link dc-toc__link--sub" href="#dc-toc-s2a">근무 시간과 휴게</a></li>
<li class="dc-toc__item"><a class="dc-toc__link dc-toc__link--sub" href="#dc-toc-s2b">임금과 지급일</a></li>
</ul>
</li>
<li class="dc-toc__item"><a class="dc-toc__link" href="#dc-toc-s3">4대 보험과 세금</a></li>
<li class="dc-toc__item"><a class="dc-toc__link" href="#dc-toc-s4">문제가 생겼을 때 어디로</a></li>
</ul>
</nav>.dc-toc { max-width:300px; font-family:var(--dc-font); }
.dc-toc__title { margin:0 0 var(--dc-2); font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--dc-text-mute); }
.dc-toc__list { margin:0; padding:0; list-style:none; }
.dc-toc__sub { margin:2px 0 0; padding:0; list-style:none; }
.dc-toc__item { margin:0; }
.dc-toc__link { display:block; padding:var(--dc-2) var(--dc-3); border-left:2px solid var(--dc-line); border-radius:0 var(--dc-r-xs) var(--dc-r-xs) 0; color:var(--dc-text-sub); font-size:13px; line-height:1.45; text-decoration:none; transition:background var(--dc-fast), color var(--dc-fast); }
.dc-toc__link:hover { background:var(--dc-sunken); color:var(--dc-text); }
.dc-toc__link.is-now { border-left-color:var(--dc-brand); background:var(--dc-brand-soft); color:var(--dc-brand-text); font-weight:700; }
.dc-toc__link--sub { padding-left:var(--dc-6); font-size:12px; }
.dc-toc--box { max-width:320px; padding:var(--dc-4); border:1px solid var(--dc-line); border-radius:var(--dc-r-md); background:var(--dc-surface); box-shadow:var(--dc-sh-1); }
.dc-toc__fold { max-width:340px; border:1px solid var(--dc-line); border-radius:var(--dc-r-md); background:var(--dc-surface); font-family:var(--dc-font); }
.dc-toc__sum { display:flex; align-items:center; gap:var(--dc-2); min-height:44px; padding:var(--dc-2) var(--dc-4); font-size:13px; font-weight:700; color:var(--dc-text); cursor:pointer; }
.dc-toc__sum::-webkit-details-marker { display:none; }
.dc-toc__caret { margin-left:auto; font-size:11px; color:var(--dc-text-sub); transition:transform var(--dc-fast); }
.dc-toc__fold[open] .dc-toc__caret { transform:rotate(180deg); }
.dc-toc__fold[open] .dc-toc__sum { border-bottom:1px solid var(--dc-line); }
.dc-toc__foldbody { padding:var(--dc-3) var(--dc-3) var(--dc-4); }कसरी प्रयोग गर्ने
- शीर्षकका दुई तह मात्र राख्नु — त्योभन्दा गहिरो गए सूची आफै अर्को लेख बन्छ
- पढाइ अघि बढ्दा हाइलाइट पनि सर्नु पर्छ, र सधैँ एक पङ्क्तिमा मात्र हुनु पर्छ
- खण्ड तीन वा त्योभन्दा कम भए विषयसूची नै नराख्नु
ध्यान दिनुपर्ने कुरा
- अहिलेको पङ्क्तिमा aria-current राख्नु र मोटाइ वा पृष्ठभूमि पनि फेर्नु — रङले मात्र छुट्टाउनु हुँदैन
- साँघुरो पर्दामा खुल्ने-बन्द हुने रूपमा बदल्नु, नत्र मूल लेखको ठाउँ खान्छ