본문 바로가기
명함 만들기 캐릭터 모음 16가지 디자인 · PNG / SVG / PDF

앵커 목록

한 페이지에 여러 꼭지가 길게 이어질 때, 맨 위에서 필요한 대목으로 바로 뛰게 해 주는 조각.

내비게이션

실제 미리보기

출처

<nav class="dc-anchors" aria-labelledby="dc-anchors-h">
  <h2 class="dc-anchors__title" id="dc-anchors-h">이 페이지에서 바로 가기</h2>
  <ol class="dc-anchors__list">
    <li class="dc-anchors__item"><a class="dc-anchors__link" href="#dc-anchors-a1"><span class="dc-anchors__arrow" aria-hidden="true">↓</span>신청 자격</a></li>
    <li class="dc-anchors__item"><a class="dc-anchors__link" href="#dc-anchors-a2"><span class="dc-anchors__arrow" aria-hidden="true">↓</span>준비할 서류</a></li>
    <li class="dc-anchors__item"><a class="dc-anchors__link" href="#dc-anchors-a3"><span class="dc-anchors__arrow" aria-hidden="true">↓</span>신청하는 곳과 기간</a></li>
    <li class="dc-anchors__item"><a class="dc-anchors__link" href="#dc-anchors-a4"><span class="dc-anchors__arrow" aria-hidden="true">↓</span>받는 금액과 지급일</a></li>
    <li class="dc-anchors__item"><a class="dc-anchors__link" href="#dc-anchors-a5"><span class="dc-anchors__arrow" aria-hidden="true">↓</span>자주 묻는 질문</a></li>
  </ol>
</nav>
.dc-anchors { max-width:420px; padding:var(--dc-4); border:1px solid var(--dc-line); border-left:3px solid var(--dc-brand); border-radius:0 var(--dc-r-md) var(--dc-r-md) 0; background:var(--dc-surface); font-family:var(--dc-font); }
.dc-anchors__title { margin:0 0 var(--dc-2); font-size:13px; font-weight:700; color:var(--dc-text); }
.dc-anchors__list { margin:0; padding:0; list-style:none; }
.dc-anchors__item { margin:0; border-top:1px solid var(--dc-line); }
.dc-anchors__item:first-child { border-top:0; }
.dc-anchors__link { display:flex; align-items:center; gap:var(--dc-2); min-height:40px; padding:var(--dc-2) 0; color:var(--dc-brand-text); font-size:14px; text-decoration:underline; text-decoration-thickness:1px; }
.dc-anchors__link:hover { color:var(--dc-text); }
.dc-anchors__arrow { flex:0 0 auto; font-size:12px; line-height:1; color:var(--dc-text-mute); }
.dc-anchors__row { display:flex; flex-wrap:wrap; gap:var(--dc-2); margin:0; padding:0; list-style:none; }
.dc-anchors__chip { display:inline-flex; align-items:center; min-height:36px; padding:var(--dc-1) var(--dc-4); border:1px solid var(--dc-line-field); border-radius:var(--dc-r-full); background:var(--dc-sunken); color:var(--dc-text); font-size:13px; text-decoration:none; }
.dc-anchors__chip:hover { border-color:var(--dc-brand); background:var(--dc-brand-soft); color:var(--dc-brand-text); }
.dc-anchors__index { display:flex; flex-wrap:wrap; gap:var(--dc-1); margin:0; padding:0; list-style:none; }
.dc-anchors__letter { display:inline-flex; align-items:center; justify-content:center; min-width:40px; min-height:40px; padding:0 var(--dc-1); border:1px solid var(--dc-line-field); border-radius:var(--dc-r-sm); background:var(--dc-surface); color:var(--dc-brand-text); font-size:14px; font-weight:700; text-decoration:none; }
.dc-anchors__letter:hover { border-color:var(--dc-brand); background:var(--dc-brand-soft); }
.dc-anchors__letter.is-empty { border-style:dashed; background:var(--dc-sunken); color:var(--dc-text-mute); font-weight:400; }

이렇게 씁니다

  • 본문이 시작되기 전에 두고 4~8개로 끊는다. 목차와 달리 읽는 위치를 따라가지 않는다
  • 항목 글자는 뛰어갈 제목과 똑같이 쓴다 — 다르면 도착해서 제 자리인지 모른다
  • 도착하는 제목에 scroll-margin-top 을 줘서 고정 헤더에 가리지 않게 한다

주의할 점

  • 화살표 같은 모양은 aria-hidden 으로 감춘다. 읽어 줄 내용이 아니다
  • 링크를 색으로만 구분하지 말고 밑줄이나 테두리도 같이 준다

다음에 볼 것