HTML로 중첩 목록 만들기

HTML에서 중첩 목록을 만드는 적절한 방법을 소개합니다.

HTML에서 중첩 목록 만들기

ol 태그로 정렬된 목록을 만들고 ul 태그로 정렬되지 않은 목록을 만들 수 있습니다. 이 태그 내에서 li 태그를 사용하여 항목 목록을 만듭니다.

다른 항목 목록 안에 항목 목록을 만들어야 하는 경우가 있습니다. 이러한 목록 구조를 중첩 목록이라고 하며 이 기사에서는 중첩 목록을 작성하는 올바른 방법을 살펴봅니다.

무순 리스트의 구조는 다음과 같다.

<ul>
 <li> Item 1 </li>
 <li> Item 2 </li>
 <li> Item 3 </li> 
</ul> 

Item 1 아래에 몇 가지 목록 항목을 추가해야 한다고 가정해 보겠습니다. 이러한 시나리오에서는 특정 li 태그 내부에 ul 태그를 사용해야 합니다. 그런 다음 li 태그를 사용하여 ul 태그 안에 항목 목록을 작성할 수 있습니다.

예를 들어 ul 태그를 만들고 ul 태그 안에 li 태그 3개를 만듭니다. 아래 예시와 같이 li 태그 안에 Dogs, Cats, Hamsters라는 텍스트를 작성하세요.

첫 번째 li 태그 안에 ul 태그를 만듭니다. ul 태그 안에 두 개의 li 태그를 만들고 목록 항목을 Siberian Husky 및 German Shepherd로 작성합니다.

이것은 HTML에서 중첩 목록을 작성하는 올바른 방법입니다.

예제 코드:

<ul>
 <li> Dogs 
 <ul>
 <li> Siberian Husky </li>
 <li> German Shepherd </li>
 </ul> 
 </li>
 
 <li> Cats </li>
 <li> Hamster </li> 
</ul> 

중첩 목록을 생성하는 동안 li 태그를 닫은 후 중첩 ul 태그를 작성하지 않아야 합니다. 이러한 관행에는 중첩 목록이 포함되지 않습니다.

중첩 목록을 작성하는 잘못된 방법은 다음과 같습니다.

<ul>
 <li> Dogs </li>
 <ul>
 <li> Siberian Husky </li>
 <li> German Shepherd </li>
 </ul> 
 <li> Cats </li>
 <li> Hamsters </li> 
</ul> 

하위 목록을 작성하기 전에 Dog 항목 목록의 li 태그를 닫았습니다. 그런 다음 하위 목록을 추가하기 위해 ul 태그를 만들었습니다.

위의 두 예에서는 결과가 같아 보이지만 첫 번째 접근 방식을 따라야 합니다. ul 태그가 속한 li 태그의 자식인지 확인해야 합니다.

따라서 HTML에서 중첩 목록을 적절하게 작성할 수 있습니다.