문서 내부 위치로 이동하기

이번 단계에서 배울 내용

긴 문서에서는 링크를 눌러 같은 페이지의 특정 위치로 바로 이동할 수 있습니다. 이동할 요소에 id를 지정하고, 링크의 href에는 #과 id 값을 함께 작성합니다.

예를 들어 id="contact"인 구역으로 이동하려면 링크 주소를 #contact로 작성합니다.

예시

아래 코드는 사용 방법을 보여 주는 예시입니다. 문제의 정답과는 다른 내용입니다.

<a href="#contact">연락처로 이동</a>
<section id="contact">
  <h2>연락처</h2>
</section>

해야 할 일

문서 위쪽에 상세 내용으로 이동 링크를 만들고, 아래의 상세 내용 구역으로 연결하세요. 링크의 id는 skip-intro, 상세 구역의 id는 details입니다.

완성 조건

• id="skip-intro"가 지정된 이동 링크를 한 개 만듭니다.
• 상세 내용을 <section id="details">로 묶습니다.
• 이동 링크의 href 값은 #details로 작성합니다.
• 링크 글자는 상세 내용으로 이동으로 작성합니다.
• 페이지 제목과 구역 제목의 단계를 순서대로 사용합니다.

작업 방법

1. 에디터에서 index.html을 엽니다.
2. TODO 주석이 있는 부분을 중심으로 코드를 수정합니다.
3. 미리보기에서 결과를 확인한 뒤 제출합니다.

별도의 입력값은 없습니다.

에디터에 준비된 index.html을 열고, 문제에서 안내하는 HTML 요소와 속성을 추가하거나 수정하세요. 브라우저 미리보기로 작성한 결과를 확인할 수 있습니다.

별도의 출력값은 없습니다.

수정한 index.html이 브라우저에서 정상적으로 열리고, 아래의 완성 조건을 모두 만족하면 됩니다.

도움말: 링크의 href="#details"와 이동할 구역의 id="details"에서 이름이 정확히 같아야 합니다.