HTML 목록의 3가지 유형과 사용 방법

by

핵심 요약

  • HTML 목록은 웹페이지에서 데이터를 효과적으로 구조화하고 표시하는 데 매우 중요합니다. 순서 목록, 비순서 목록, 설명 목록이라는 세 가지 주요 형식이 있습니다.
  • 순서 목록은 항목에 번호 또는 다른 기호를 사용하여 순서를 지정합니다. ‘type’ 속성을 통해 목록 스타일을 변경할 수 있으며, ‘start’와 ‘reversed’ 속성을 사용하여 시작 번호와 순서를 조정할 수 있습니다.
  • 비순서 목록은 특정 순서 없이 관련된 항목들을 묶습니다. CSS를 사용하여 글머리 기호 스타일을 사용자 정의할 수 있습니다.

HTML 목록은 웹페이지에서 관련 데이터 그룹을 구성하는 데 필수적인 요소입니다. 메뉴를 만들거나, 판매 상품을 정렬하거나, 복잡한 정보를 더 쉽게 읽을 수 있도록 표시할 때 HTML 목록은 매우 유용합니다.

HTML 목록은 크게 세 가지 종류로 나뉘며, 각각 웹 개발에서 특정 구조적 역할을 수행합니다.

1. 순서 목록

HTML 순서 목록은 관련 항목을 특정 순서대로 그룹화하는 데 사용됩니다. 새로운 순서 목록을 생성하려면 <ol> 태그를 사용해야 합니다. <ol> 태그는 <li> 태그들을 묶어 포함하며, 각 <li> 태그는 목록의 특정 항목을 나타냅니다.

<ol>
  <li>항목 1</li>
  <li>항목 2</li>
  <li>항목 3</li>
  <li>항목 4</li>
</ol>

위의 코드는 다음과 같이 표시됩니다.

순서 목록의 기본 순서 유형은 숫자이지만, type 속성을 사용하여 이를 변경할 수 있습니다. type 속성은 목록을 정렬하는 데 사용할 문자를 지정합니다. 예를 들어, 알파벳 (대문자 또는 소문자), 숫자 또는 로마 숫자 (대문자 또는 소문자)를 선택할 수 있습니다.

<ol type="a">
  <li>항목 1</li>
  <li>항목 2</li>
  <li>항목 3</li>
  <li>항목 4</li>
</ol>

<ol> 태그에 type 속성을 추가하면 다음과 같이 목록이 업데이트되어 표시됩니다.

type 속성 외에도 <ol> 태그와 함께 사용할 수 있는 두 가지 다른 속성으로 start와 reversed가 있습니다.

start 속성은 정수 값을 사용하여 목록의 시작 위치를 지정합니다. 예를 들어, <ol start="3">와 같이 type 속성을 지정하지 않으면 목록이 3부터 시작합니다. type="a" 또는 type="I"를 지정하면 각각 c 또는 III부터 순서가 시작됩니다.

<ol type="I" start="3">
  <li>항목 1</li>
  <li>항목 2</li>
  <li>항목 3</li>
  <li>항목 4</li>
</ol>

위 코드는 다음과 같은 결과를 보여줍니다.

reversed 속성은 목록의 순서를 반대로 뒤집습니다. 부울 값을 허용하며 기본값은 false입니다.

<ol reversed="true">
  <li>항목 1</li>
  <li>항목 2</li>
  <li>항목 3</li>
  <li>항목 4</li>
</ol>

이 코드는 브라우저에 다음과 같이 표시됩니다.

2. 비순서 목록

비순서 목록은 순서가 중요하지 않은 관련 항목들을 그룹화하는 데 사용됩니다. 기본적으로 브라우저는 각 항목에 글머리 기호를 사용하여 표시합니다.

새로운 비순서 목록을 만들려면 <ul> 태그를 최상위 요소로 사용하고, 각 목록 항목은 <li> 태그로 감싸야 합니다.

<ul>
  <li>항목 1</li>
  <li>항목 2</li>
  <li>항목 3</li>
  <li>항목 4</li>
</ul>

위 코드는 다음과 같이 나타납니다.

비순서 목록의 기본 글머리 기호 스타일은 디스크 모양입니다. 과거에는 type 속성을 사용하여 비순서 목록의 글머리 기호 스타일을 설정할 수 있었지만, 현재 이 속성은 더 이상 사용되지 않습니다. 비순서 목록의 스타일을 변경하는 데 권장되는 방법은 CSS의 list-style-type 속성을 사용하는 것입니다.

<style>
ul { list-style-type: square; }
</style>

위 코드는 목록 스타일을 다음과 같이 업데이트합니다.

CSS list-style-type 속성을 사용하면 원, 사용자 정의 이미지, 아이콘 또는 기호를 포함한 다양한 글머리 기호 스타일을 적용할 수 있습니다. 목록 항목의 레이아웃을 수정하는 CSS를 사용하면 비순서 목록을 네비게이션 메뉴로 활용할 수도 있습니다.

중첩 목록

중첩 목록은 다른 목록 안에 포함된 목록 요소입니다. 순서 목록과 비순서 목록을 혼합하여 중첩 목록을 만들 수 있으며, 이를 통해 복잡한 계층 구조를 효과적으로 나타낼 수 있습니다.

<h3>치킨 파스타 조리법</h3>
<ol>
  <li>파스타를 삶는다.</li>
  <li>
     닭가슴살에 양념을 한다.
    <ul>
      <li>소금과 후추</li>
      <li>파프리카</li>
      <li>마늘 가루</li>
      <li>이탈리아 허브</li>
    </ul>
  </li>
  <li>냄비에 올리브 오일을 두르고 중간 불로 가열한다.</li>
  <li>닭가슴살을 넣고 5분간 익힌다.</li>
  <li>빈 냄비에 생크림과 파마산 치즈를 넣는다.</li>
  <li>파스타와 썰어 놓은 닭가슴살을 크림 소스에 넣는다.</li>
</ol>

이 코드는 다음과 같이 표시됩니다.

3. 설명 목록

설명 목록 요소는 용어와 관련 세부 정보를 제공하는 데 사용됩니다. <dl> 태그를 사용하여 새로운 설명 목록을 생성하고, <dt> (설명 용어) 및 <dd> (설명 세부 정보) 요소를 함께 사용해야 합니다.

<h3>인기 노트북</h3>
<dl>
  <dt>MacBook Pro</dt>
  <dd>
    최대 22시간의 배터리 수명, 첨단 카메라, Touch ID가 있는 Magic Keyboard를 제공합니다.
  </dd>
  <dt>MSI GS76 Stealth</dt>
  <dd>
    향상된 그래픽과 맞춤형 키를 갖춘 강력한 게이밍 노트북입니다.
  </dd>
</dl>

위 코드는 다음과 같이 출력됩니다.

적절한 HTML 목록으로 콘텐츠 구성하기

웹 개발 프로젝트에서 어떤 HTML 목록을 사용할지는 제공하려는 콘텐츠에 따라 결정해야 합니다. 예를 들어, 식사 준비 단계나 작업 완료 단계와 같이 순서가 있는 목록을 만들 때는 순서 목록이 가장 적합합니다.

반면, 체크리스트와 같이 순서가 필수는 아닌 관련 정보들을 그룹화하려면 비순서 목록이 더 실용적인 선택이 될 수 있습니다. 용어집이나 자주 묻는 질문 목록을 만들 때는 설명 목록이 더욱 유용합니다.