순서 있는 목록과 순서 없는 목록 만들기

이번 단계에서 배울 내용

항목의 순서가 중요하지 않으면 <ul>을, 순서대로 따라야 하면 <ol>을 사용합니다. 두 목록 모두 각 항목을 <li>로 감쌉니다.

재료 목록처럼 순서가 없는 정보는 <ul>, 조리 단계처럼 순서가 결과에 영향을 주는 정보는 <ol>이 알맞습니다.

예시

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

<ul>
  <li>연필</li>
  <li>지우개</li>
</ul>
<ol>
  <li>문제를 읽는다.</li>
  <li>답을 작성한다.</li>
</ol>

해야 할 일

샌드위치 재료 빵, 채소, 치즈는 순서 없는 목록으로 만드세요. 만드는 과정 재료를 준비한다., 빵 사이에 넣는다.는 순서 있는 목록으로 만듭니다.

완성 조건

• id="ingredients"인 <ul> 안에 재료 항목 세 개를 작성합니다.
• id="steps"인 <ol> 안에 과정 항목 두 개를 작성합니다.
• 페이지 제목은 <h1>부터 시작합니다.

작업 방법

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

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

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

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

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

도움말: 목록의 글을 쉼표로 나누는 대신, 각 글을 별도의 <li>...</li>로 작성합니다.