잘못된 HTML 중첩 디버깅하기

이번 단계에서 배울 내용

HTML 요소는 허용된 부모와 자식 관계를 지켜야 합니다. <ul> 바로 안에는 목록 항목 <li>가 와야 하며, 일반 <p>를 직접 둘 수 없습니다.

또한 문단 <p> 안에는 구역을 만드는 <div>를 넣을 수 없습니다. 브라우저가 코드를 임의로 고치기 전에 올바른 구조로 작성해야 예상한 결과가 나옵니다.

예시

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

<ul>
  <li><p>첫 번째 학습 내용</p></li>
  <li><p>두 번째 학습 내용</p></li>
</ul>
<div><p>추가 안내입니다.</p></div>

해야 할 일

잘못 작성된 학습 목록을 고치세요. 두 학습 내용은 각각 목록 항목이 되어야 하고, 각 항목 안의 설명은 문단으로 유지합니다. 안내 문단과 div의 잘못된 포함 관계도 바로잡습니다.

완성 조건

• lessons 목록 바로 안에 <li>를 두 개 둡니다.
• 두 <li> 바로 안에 문단을 하나씩 둡니다.
• <ul> 바로 안에 <p>가 남아 있지 않습니다.
• <p> 안에 <div>가 남아 있지 않습니다.
• 페이지 제목을 <h1>부터 순서대로 사용합니다.

작업 방법

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

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

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

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

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

도움말: 목록은 ul → li → p 순서로 중첩하고, 마지막 안내는 <div><p>...</p></div>로 바꿀 수 있습니다.