HTML 입문 문법

HTML 리스트 (Lists)

HTML 리스트 (Lists) — 초급

리스트 (Lists)

1. 도입 (왜 배워야 하는가)

HTML 리스트는 웹 페이지를 구성하는 중요한 요소입니다. 리스트는 정보를 정리하고, 시각적으로 쉽게 전달할 수 있게 도와줍니다. 실무에서는 제품 목록, 블로그 포스트의 태그, 내비게이션 메뉴 등 다양한 곳에서 리스트를 사용하게 됩니다. 만약 리스트의 사용법을 모르거나 잘못 사용하게 되면, 정보가 혼란스럽게 전달되거나 사용자 경험이 저하될 수 있습니다. 따라서 리스트를 제대로 이해하고 활용하는 것은 필수입니다.

2. 핵심 개념 설명

HTML에서는 두 가지 주요 리스트 형태가 있습니다: 순서 있는 리스트(Ordered List)와 순서 없는 리스트(Unordered List).

순서 있는 리스트 (Ordered List): 순서가 중요한 항목들로 구성됩니다. 예를 들어, 조리법의 단계나 순서대로 진행해야 하는 작업 목록이 이에 해당합니다.
순서 없는 리스트 (Unordered List): 순서가 중요하지 않은 항목들로 구성됩니다. 예를 들어, 장바구니에 담을 제품 리스트나 관심 있는 주제 목록 등이 이에 해당합니다.

용어	설명
`<ol>`	순서 있는 리스트의 시작 태그
`<ul>`	순서 없는 리스트의 시작 태그
`<li>`	리스트 항목을 정의하는 태그

3. 기본 코드 예제

아래는 순서 없는 리스트와 순서 있는 리스트의 기본 사용법입니다.

<!-- 순서 없는 리스트 -->
<ul>
    <li>사과</li>
    <li>바나나</li>
    <li>오렌지</li>
</ul>

<!-- 순서 있는 리스트 -->
<ol>
    <li>재료 준비</li>
    <li>조리 시작</li>
    <li>요리 완료</li>
</ol>

실행 결과:

사과
바나나
오렌지

<ul> 태그로 순서 없는 리스트를 시작합니다.
각 항목은 <li> 태그로 정의됩니다.
리스트가 끝나면 </ul>로 닫습니다.
<ol> 태그로 순서 있는 리스트를 시작합니다.
각 단계도 <li> 태그로 정의됩니다.
리스트가 끝나면 </ol>로 닫습니다.

4. 실전 활용 예제

예제 1: 쇼핑몰 장바구니 구현

쇼핑몰에서 장바구니에 담긴 제품 목록을 표시할 때 순서 없는 리스트를 사용할 수 있습니다.

<h2>장바구니</h2>
<ul>
    <li>티셔츠</li>
    <li>청바지</li>
    <li>운동화</li>
</ul>

예제 2: 블로그 포스트의 단계

블로그 포스트에서 조리법이나 작업 과정을 설명할 때 순서 있는 리스트를 사용합니다.

<h2>조리법</h2>
<ol>
    <li>재료를 준비합니다.</li>
    <li>프라이팬을 예열합니다.</li>
    <li>재료를 볶습니다.</li>
</ol>

5. 흔한 실수와 주의사항

1. 리스트 태그를 잘못 사용

잘못된 코드:

<ul>
    <li>사과
    <li>바나나
</ul>

올바른 코드:

<ul>
    <li>사과</li>
    <li>바나나</li>
</ul>

주의사항: 각 리스트 항목은 반드시 </li> 태그로 닫아야 합니다.

2. 리스트 중첩 사용

잘못된 코드:

<ul>
    <li>과일</li>
        <li>사과</li>
        <li>바나나</li>
</ul>

올바른 코드:

<ul>
    <li>과일
        <ul>
            <li>사과</li>
            <li>바나나</li>
        </ul>
    </li>
</ul>

주의사항: 중첩 리스트를 사용할 때는 중첩된 리스트를 별도의 <ul>로 감싸야 합니다.

6. 정리

리스트는 정보를 정리하여 전달하는 데 유용하다.
순서 있는 리스트와 순서 없는 리스트 두 가지 형태가 있다.
각 항목은 <li> 태그로 정의한다.
중첩 리스트를 사용할 때는 별도의 태그로 감싸야 한다.

다음에 학습하면 좋은 주제: HTML 테이블(table), 웹 접근성(accessibility)