1. 목록 태그

목록 태그는 HTML에서 정보를 정렬하고 구조화하는 데 사용되는 중요한 도구입니다. '한글과컴퓨터'의 '한컴오피스' 또는 '마이크로소프트'의 'Word' 프로그램에서 사용하는 목록 기능과 비슷합니다. 최초의 웹 브라우저는 단순히 HTML 리더기였고, HTML은 문서를 표현하는 양식이었음을 기억해야 합니다. 목록 태그는 문서의 중요한 구성 요소입니다.

순서가 있는 목록(<ol>)과 순서가 없는 목록(<ul>)으로 나뉘며, 목록의 각 항목은 <li> 태그로 표현합니다. 이제 각 태그의 특징과 사용 방법을 살펴보겠습니다.

1.1 ol (Ordered List)

<ol> 태그는 ordered list의 약자로 순서가 있는 목록을 나타냅니다. 이 태그를 사용할 때는 구성 요소에 순서가 있는지 판단하여 사용하면 됩니다.

사용 예시:

• 요리 레시피의 단계
• 튜토리얼 진행 순서
• 순위 목록

자식으로는 반드시 li 태그만 사용할 수 있습니다. ol 바로 아래 div와 같은 태그를 넣지 않도록 주의하세요.

<ol>
  <li>웹 서비스 기획</li>
  <li>웹 디자인</li>
  <li>프론트엔드 개발 & 백엔드 개발</li>
  <li>배포</li>
</ol>

위 코드는 순서가 있기 때문에 <ol>태그를 사용했습니다.

1.2 ul (Unordered List)

<ul> 태그는 unordered list의 약자로 순서가 없는 목록을 나타냅니다. 순서가 중요하지 않은 목록을 나타낼 때 사용합니다.

사용 예시:

• 웹 서비스의 네비게이션 메뉴
• 카테고리 목록
• 특징 나열

<ol>과 마찬가지로 자식으로는 <li> 태그만 사용할 수 있습니다. 여러분이 자주 방문하는 웹 서비스에서 개발자 도구(F12)를 열어 메뉴 소스코드를 확인해 보세요.

<h2>위니브 캐릭터</h2>
<ul>
  <li>라이캣</li>
  <li>로지</li>
  <li>지지</li>
</ul>

1.3 li (List Item)

<li> 태그는 list item의 약자로 목록의 항목을 나타냅니다. <ol>과 <ul> 태그의 자식으로만 사용할 수 있으며, 단독으로 사용할 수 없습니다.

li 태그의 아이템들은 같은 위상의 아이템이어야 합니다.

예를 들어 아래 첫 번째 코드는 같은 위상의 아이템들이 아니기 때문에, 두 번째 코드처럼 따로 제목 태그로 구분하는 것을 권합니다.

<!-- X -->
<ul>
  <li>위니브 캐릭터</li>
  <li>라이캣</li>
  <li>로지</li>
  <li>지지</li>
</ul>

<!-- O -->
<h2>위니브 캐릭터</h2>
<ul>
  <li>라이캣</li>
  <li>로지</li>
  <li>지지</li>
</ul>

이번에는 사용하지 못하는 것과 올바른 사용법 예제를 살펴보도록 하겠습니다. 아래 코드는 <ol>태그의 자식으로 <div>태그를 사용했기 때문에 올바르지 않은 사용법입니다.

<!-- X -->
<ol>
  <div>item</div>
  <li>item</li>
  <li>item</li>
</ol>

자식이 아닌 자손 요소로는 다른 태그도 사용 가능합니다.

<!-- O -->
<ol>
  <li>
    item
    <div>first item</div>
  </li>
  <li>item</li>
</ol>

1.4 중첩 사용

<ol>과 <ul>태그는 중첩해서 사용할 수 있습니다. 아래 코드는 <ul>태그 안에 <ol>태그를 중첩해서 사용한 예제입니다. 기억하세요. 중첩할 때에도 <li>태그를 사용해야 합니다.

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>
    E
    <ol>
      <li>가</li>
      <li>나</li>
      <li>다</li>
    </ol>
  </li>
</ul>