중첩 목록과 설명 목록 사용하기

이번 단계에서 배울 내용

목록 항목 안에 또 다른 목록을 넣으면 단계가 있는 중첩 목록을 만들 수 있습니다. 하위 목록은 관련된 상위 <li> 안에 넣습니다.

용어와 뜻을 짝지을 때는 설명 목록 <dl>을 사용합니다. 용어는 <dt>, 그 용어의 설명은 <dd>로 작성합니다.

예시

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

<ol>
  <li>기초
    <ul>
      <li>요소</li>
      <li>속성</li>
    </ul>
  </li>
</ol>
<dl>
  <dt>HTML</dt>
  <dd>문서의 구조를 만드는 언어</dd>
</dl>

해야 할 일

HTML 학습 순서를 두 개의 상위 과정으로 정리하세요. 첫 번째 과정 안에는 요소, 속성 두 하위 항목을 넣습니다. 이어서 요소와 속성 용어를 각각 설명하는 설명 목록을 만드세요.

완성 조건

• <ol id="curriculum">의 바로 안쪽에 상위 과정 두 개를 작성합니다.
• 첫 번째 과정 안의 <ul>에 하위 항목 요소, 속성을 작성합니다.
• <dl id="terms"> 안에 용어 <dt>를 두 개 작성합니다.
• 각 용어 다음에 뜻을 설명하는 <dd>를 하나씩 작성합니다.
• 페이지 제목은 <h1>부터 시작합니다.

작업 방법

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

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

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

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

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

도움말: 하위 <ul>은 <ol> 바로 아래가 아니라 관련된 상위 <li>의 안쪽에 넣습니다.