중첩 리스트
Coddy HTML 여정의 Fundamentals 섹션에 포함된 레슨 — 60개 중 14번째.
하나의 리스트를 다른 리스트 안에 넣을 수 있습니다—이를 중첩 리스트(nested list)라고 합니다. 이는 개요나 다단계 메뉴와 같은 계층적 구조를 만드는 데 유용합니다.
중첩된 리스트를 만들려면, 단순히 <ul> 또는 <ol> 요소를 다른 리스트의 <i><li></i> 요소 내부에 배치하면 됩니다.
다음은 중첩된 순서 없는 목록의 예입니다:
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Subitem 2.1</li>
<li>Subitem 2.2</li>
</ul>
</li>
<li>Item 3</li>
</ul>두 번째 항목에는 두 개의 하위 항목이 있는 중첩된 목록이 포함되어 있습니다. 브라우저에서는 다음과 같이 표시됩니다:
- 항목 1
- 항목 2
- 하위 항목 2.1
- 하위 항목 2.2
- 항목 3
순서가 있는 목록을 중첩하거나 두 가지를 혼합할 수도 있습니다.
챌린지
쉬움중첩된 리스트가 포함된 HTML 문서를 작성하세요. 리스트는 다음과 같은 형태여야 합니다:
- Fruits
- Apple
- Banana
- Orange
- Vegetables
- Carrot
- Broccoli
- Spinach
- Grains
치트 시트
중첩 리스트는 다른 리스트의 <li> 요소 안에 <ul> 또는 <ol> 요소를 배치하여 생성합니다:
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Subitem 2.1</li>
<li>Subitem 2.2</li>
</ul>
</li>
<li>Item 3</li>
</ul>순서가 있는 리스트를 중첩하거나, 순서가 있는 리스트와 순서가 없는 리스트를 서로 혼합하여 사용할 수 있습니다.
직접 해보기
<!DOCTYPE html>
<html>
<body>
<!-- 여기에 코드를 작성하세요 -->
</body>
</html>
실력 점검이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.
