HTML 목록 태그 완벽 가이드: <ul>, <ol>, <li>와 중첩 리스트 활용법

 

웹 페이지를 제작하다 보면 정보를 구조화하여 나열해야 할 때가 많습니다. 이때 가장 기본이 되는 도구가 바로 HTML 목록(List) 태그입니다. 단순한 나열부터 복잡한 메뉴 구조까지, 목록 태그를 제대로 활용하는 방법을 풍부한 예제와 함께 알아보겠습니다.

1. 순서 없는 목록: <ul> (Unordered List)

<ul> 태그는 항목 간의 순서가 중요하지 않을 때 사용합니다. 기본적으로 각 항목 앞에 작은 점(블릿, Bullet)이 붙습니다.

기본 문법

<ul>
  <li>사과</li>
  <li>바나나</li>
  <li>오렌지</li>
</ul>

실용 예제: 장보기 목록

주로 체크리스트나 특징 나열 등에 활용됩니다.

<h3>오늘의 쇼핑 리스트</h3>
<ul>
  <li>우유 1L</li>
  <li>계란 (10구)</li>
  <li>통밀 식빵</li>
  <li>신선한 샐러드용 채소</li>
</ul>

2. 순서 있는 목록: <ol> (Ordered List)

<ol> 태그는 단계별 절차나 우선순위 등 항목의 순서가 중요한 경우에 사용합니다. 기본적으로 숫자가 자동으로 부여됩니다.

기본 문법

<ol>
  <li>HTML 배우기</li>
  <li>CSS 적용하기</li>
  <li>JavaScript로 상호작용 더하기</li>
</ol>

다양한 속성 활용하기

<ol> 태그는 숫자의 종류나 시작 번호를 변경할 수 있는 속성을 제공합니다.

• type: 숫자의 종류 (1, a, A, i, I)
• start: 시작할 번호
• reversed: 번호를 역순으로 표시

<!-- 로마자 소문자로 5번부터 시작하는 목록 -->
<ol type="i" start="5">
  <li>환경 설정</li>
  <li>프로젝트 생성</li>
  <li>코드 작성</li>
</ol>

3. 목록의 핵심: <li> (List Item)

<li> 태그는 <ul>이나 <ol> 내부에서 각각의 개별 항목을 정의할 때 사용합니다. 주의할 점: <li> 태그는 반드시 <ul> 또는 <ol> 태그의 자식 요소로만 사용되어야 하며, 반대로 <ul>과 <ol>의 직계 자식으로는 <li>만 올 수 있는 것이 웹 표준(Semantic HTML)의 원칙입니다.

4. 중첩 리스트로 계층 구조 만들기

목록 안에 또 다른 목록을 넣는 것을 **중첩 리스트(Nested List)**라고 합니다. 이는 사이트의 네비게이션 메뉴, 책의 목차, 카테고리 구조 등을 표현할 때 필수적입니다.

중첩 리스트 작성 시 핵심 규칙

새로운 목록(<ul> 혹은 <ol>)은 반드시 부모 목록의 <li> 태그 안에 위치해야 합니다.

예제 1: 컴퓨터 부품 카테고리 (계층형)

<ul>
  <li>중앙처리장치 (CPU)
    <ul>
      <li>Intel Core i9</li>
      <li>AMD Ryzen 9</li>
    </ul>
  </li>
  <li>메모리 (RAM)
    <ul>
      <li>DDR4 16GB</li>
      <li>DDR5 32GB</li>
    </ul>
  </li>
  <li>저장장치 (Storage)
    <ul>
      <li>SSD (NVMe)</li>
      <li>HDD (SATA3)</li>
    </ul>
  </li>
</ul>

예제 2: 요리 레시피 (순서와 항목의 조합)

큰 단계는 순서가 있고, 그 안의 재료는 순서가 없는 복합적인 구조입니다.

<h2>김치볶음밥 만들기</h2>
<ol>
  <li>재료 준비하기
    <ul>
      <li>신김치 1공기</li>
      <li>찬밥 1공기</li>
      <li>스팸 또는 베이컨</li>
      <li>대파 약간</li>
    </ul>
  </li>
  <li>파기름 내기
    <p>팬에 식용유를 두르고 송송 썬 대파를 볶습니다.</p>
  </li>
  <li>김치와 부재료 볶기</li>
  <li>밥 넣고 섞기</li>
</ol>

5. CSS를 이용한 목록 스타일링 팁

브라우저의 기본 스타일 대신 디자인에 맞는 목록을 만들고 싶다면 CSS의 list-style 속성을 활용하세요.

/* 블릿 제거하기 */
ul.no-bullet {
  list-style: none;
  padding: 0;
}

/* 블릿 대신 이미지나 사각형 사용하기 */
ul.custom-style {
  list-style-type: square;
}

요약 및 정리

1. 순서가 없다면 <ul>, 순서가 중요하다면 <ol>을 사용하세요.
2. 모든 항목은 <li> 태그로 감싸야 합니다.
3. 계층 구조를 만들 때는 <li> 태그 내부에 새로운 <ul>이나 <ol>을 삽입하세요.
4. 웹 표준을 준수하는 목록 작성은 검색 엔진 최적화(SEO)와 웹 접근성 향상에 큰 도움이 됩니다.

이제 직접 코드를 작성해 보며 여러분만의 구조화된 목록을 만들어 보세요!