HTML_02) 목록 태그

학습 목표

• HTML 목록태그의 종류와 각각의 특징 이해
• ul태그와 ol태그의 차이점과 사용 시기 파악
• 중첩 목록을 통한 계층적 정보 구조화 방법 학습
• ol태그의 다양한 속성을 활용한 고급 목록 표현 기법 습득

---

<목록태그의 기본 개념>

HTML에서 목록은 관련된 항목들을 체계적으로 나열할 때 사용하는 구조적 요소다. 목록태그는 정보의 가독성을 높이고 논리적 구조를 명확하게 표현하는 역할을 한다.

- 잘못된 목록 사용 예시

<li>목록1</li>
<li>목록2</li>

문제점 분석: 위 코드는 <li> 태그만 단독으로 사용한 잘못된 예시다. <li> 태그는 반드시 부모 목록 태그(<ul> 또는 <ol>) 안에서 사용되어야 한다. 단독 사용 시 브라우저가 임의로 해석하여 예상과 다른 결과가 나타날 수 있다.

 

---

<순서 없는 목록 (Unordered List)>

- ul태그의 기본 구조

<ul> 태그는 항목들 간의 순서가 중요하지 않은 목록을 만들 때 사용한다.

<h1>ul : 순서가 없는 목록태그</h1>
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>jQuery</li>
</ul>

실행 결과:

• 각 항목 앞에 불릿 포인트(•) 표시
• 항목들의 순서 변경이 의미에 영향을 주지 않음
• 브라우저가 자동으로 들여쓰기와 여백 적용

- 중첩 목록 (Nested List)

목록 안에 또 다른 목록을 넣어 계층적 구조를 표현할 수 있다.

<ul>
    <li>HTML
        <ul>
            <li>글자관련태그</li>
            <li>목록관련태그</li>
        </ul>
    </li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>jQuery</li>
</ul>

실행 결과:

• 1단계: 실심 불릿(●)
• 2단계: 빈 원형 불릿(○)
• 3단계: 사각형 불릿(■)
• 각 단계마다 자동으로 들여쓰기 적용

중첩 목록 작성 시 주의사항:

1. 올바른 중첩 구조: <li> 안에 새로운 <ul> 삽입
2. 적절한 들여쓰기: 코드 가독성을 위한 일관된 들여쓰기
3. 의미적 계층: 논리적으로 상-하위 관계가 성립하는 구조

---

<순서 있는 목록 (Ordered List)>

- ol태그의 기본 특징

<ol> 태그는 항목들의 순서나 우선순위가 중요한 목록에 사용한다.

<h1>ol : 순서가 있는 목록 태그</h1>

<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>jQuery</li>
</ol>

실행 결과:

• 각 항목 앞에 숫자(1, 2, 3, 4) 자동 표시
• 항목의 순서 변경 시 번호도 자동 조정
• 학습 단계, 절차, 순위 등을 표현할 때 적합

- ol태그의 고급 속성 활용

<!-- type속성을 통해서 순서표현방식을 변경할 수 있음 -->
<ol type="A" reversed start="5">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>jQuery</li>
</ol>

속성별 상세 설명:

속성 설명 가능한 값

type	순서 표시 방식	1(기본), A, a, I, i
start	시작 번호 지정	숫자값
reversed	역순 정렬	불리언 속성

실행 결과:

• type="A": 대문자 알파벳 (A, B, C, D)
• start="5": 5번째부터 시작 (E, F, G, H)
• reversed: 역순으로 표시 (H, G, F, E)

- type 속성의 다양한 활용

<!-- 숫자 (기본값) -->
<ol type="1">
    <li>첫 번째</li>
    <li>두 번째</li>
</ol>

<!-- 대문자 알파벳 -->
<ol type="A">
    <li>첫 번째</li>
    <li>두 번째</li>
</ol>

<!-- 소문자 알파벳 -->
<ol type="a">
    <li>첫 번째</li>
    <li>두 번째</li>
</ol>

<!-- 대문자 로마숫자 -->
<ol type="I">
    <li>첫 번째</li>
    <li>두 번째</li>
</ol>

<!-- 소문자 로마숫자 -->
<ol type="i">
    <li>첫 번째</li>
    <li>두 번째</li>
</ol>

실행 결과:

• type="1": 1, 2, 3, 4...
• type="A": A, B, C, D...
• type="a": a, b, c, d...
• type="I": I, II, III, IV...
• type="i": i, ii, iii, iv...

---

<목록태그 선택 가이드라인>

- ul태그 사용 시기

다음과 같은 경우에 ul태그 선택:

• 장보기 목록, 기능 목록 등 순서가 중요하지 않은 항목
• 네비게이션 메뉴
• 태그 목록, 카테고리 분류
• 팀 구성원 소개

- ol태그 사용 시기

다음과 같은 경우에 ol태그 선택:

• 절차나 단계를 설명하는 튜토리얼
• 순위나 랭킹 표시
• 시간순 이벤트 나열
• 우선순위가 있는 할 일 목록

---

정리 및 요약

HTML 목록태그는 정보를 구조적으로 정리하고 표현하는 핵심 요소다. 단순한 나열을 넘어서 의미적 구조를 제공한다.

핵심 포인트:

• ul태그: 순서 무관한 항목들의 나열 (불릿 포인트 사용)
• ol태그: 순서나 우선순위가 중요한 항목들 (자동 번호 부여)
• 중첩 목록: 계층적 정보 구조 표현으로 복잡한 관계 시각화
• ol 속성 활용: type, start, reversed 속성으로 다양한 표현 방식 구현

목록태그의 올바른 사용은 웹 접근성을 향상시키고, SEO 최적화에도 도움이 된다. 스크린 리더와 같은 보조 기술이 목록 구조를 인식하여 사용자에게 더 나은 정보 전달이 가능하기 때문이다.