HTML 순서 리스트 — ol · type · start 완전 정리

 

 

Web Development · HTML List

HTML 순서 리스트 —
<ol> · type · start 완전 정리

번호 매기기 · 알파벳 · 로마숫자 · 시작 번호 변경까지

시작 오늘 분석할 코드

가족 여행 일정을 1일차·2일차로 나누고, 각 날짜의 활동을 알파벳 순서로 매긴 코드다. type 속성으로 번호 모양을 바꾸고, start 속성으로 시작 번호를 변경하는 두 가지 핵심 기법이 모두 들어 있다.

<ul> <li>1일차 <ol type="a"> <li>해녀박물관</li> <li>낚시체험</li> </ol> </li> <li>2일차 <ol type="a" start="3"> <li>용눈이오름</li> <li>만장굴</li> <li>카약체험</li> </ol> </li> </ul>

실제 출력 결과

• 1일차
  1. 해녀박물관
  2. 낚시체험
• 2일차
  3. 용눈이오름
  4. 만장굴
  5. 카약체험

용어 용어 정리

olOrdered List — 순서 리스트

type 속성번호 종류 (1, A, a, I, i)

start 속성시작 번호 변경

reversed역순 번호 (10, 9, 8...)

value 속성li 단위로 번호 강제 지정

속성태그에 부가 정보 (이름="값")

---

1 <ol> — 순서 리스트의 핵심

<ol>은 항목의 순서가 의미 있는 목록이다. 1, 2, 3... 자동으로 번호를 매겨준다. 코드 작성자는 li만 늘어놓으면 되고, 번호는 브라우저가 알아서 붙인다.

<ol>에 적합

요리 레시피 (1단계 → 2단계)
설치 매뉴얼
경기 순위
역사적 사건 시간순

<ul>이 적합

메뉴 항목
준비물 목록
옵션 선택지
태그 모음

※ 핵심 질문: "항목 순서를 무작위로 섞어도 의미가 같은가?" 다르면 ol.

---

2 type 속성 — 번호 종류 5가지

기본은 1, 2, 3... 숫자지만 type 속성으로 다른 형식으로 바꿀 수 있다.

type 값	표시	예시	용도
1 (기본)	아라비아 숫자	1, 2, 3, ...	일반적인 순서
A	대문자 알파벳	A, B, C, ...	주요 섹션
a	소문자 알파벳	a, b, c, ...	하위 항목 (이번 코드)
I	대문자 로마숫자	I, II, III, ...	책 챕터, 공식 문서
i	소문자 로마숫자	i, ii, iii, ...	각주, 소단락

type="A"

1. 첫 번째
2. 두 번째
3. 세 번째

type="I"

1. 첫 번째
2. 두 번째
3. 세 번째

type="i"

1. 첫 번째
2. 두 번째
3. 세 번째

※ CSS의 list-style-type으로도 같은 결과를 낼 수 있다. 더 많은 옵션(한국어 숫자, 그리스 문자 등)도 지원한다. 현대적 코드는 CSS 선호.

---

3 start 속성 — 번호 이어가기

두 번째 ol에 start="3"이 있는 이유는, 1일차에서 a, b로 끝났으니 2일차는 c부터 이어가게 하려는 것이다. 기본은 1부터지만 명시하면 원하는 번호부터 시작한다.

<ol type="a"> → a, b <li>해녀박물관</li> <li>낚시체험</li> </ol> <ol type="a" start="3"> → c, d, e (3번째 = c부터 시작) <li>용눈이오름</li> <li>만장굴</li> <li>카약체험</li> </ol>

※ start 값은 항상 숫자로 적는다. start="c"가 아니라 start="3". 브라우저가 숫자 → 알파벳/로마숫자로 변환한다.

왜 일부러 번호를 끊을까?

리스트 사이에 다른 콘텐츠(설명, 이미지 등)가 들어가면 번호가 자연히 끊긴다. 그래도 의미상 같은 시리즈로 보이게 하려고 start로 이어준다.

---

4 reversed 속성 — 역순 번호

HTML5에서 추가된 속성. 카운트다운이나 인기 순위(Top 10) 같은 곳에 유용하다.

<ol reversed> <li>BTS — 아미</li> <li>아이유</li> <li>뉴진스</li> </ol> → 표시: 3, 2, 1

1. 3등 항목
2. 2등 항목
3. 1등 항목

반응형

---

5 li의 value 속성 — 개별 번호 강제

특정 li만 번호를 다르게 매기고 싶을 때.

<ol> <li>첫째</li> → 1 <li value="5">다섯째</li> → 5 (점프) <li>여섯째</li> → 6 (이어서) </ol>

1. 첫째
5. 다섯째
6. 여섯째

---

6 ul과 ol을 섞어서 쓰기

이번 코드처럼 최상위는 ul(날짜는 순서 무관), 하위는 ol(활동은 일정 순서)으로 섞는 패턴은 매우 흔하다. 의미에 맞게 골라 쓰는 것이 핵심.

※ 1일차 → 2일차 순서가 의미 있으면 최상위도 ol일 수 있다. 본 예시는 "두 날 모두 동등하게 소개"하는 의미면 ul이 적절. 판단은 콘텐츠 의도에 따라.

---

7 자주 하는 실수

실수	증상	해결
start="c"처럼 문자로	속성 무시됨	숫자로: start="3"
type 속성을 ul에	적용 안 됨	type은 ol 전용
순서 의미 없는데 ol	접근성 오정보	의미가 없으면 ul
ol 안에 li 없이 텍스트	번호가 안 매겨짐	각 항목은 li로 감싸기
번호를 직접 텍스트로 (1. 2. 3.)	들여쓰기/접근성 ↓	ol에 맡기기

---

핵심 한 줄 요약

<ol>순서 리스트 — 번호 자동 부여

type번호 종류: 1 / A / a / I / i

start시작 번호 — 항상 숫자로

reversed역순 번호 (Top 10용)

li value특정 li 번호 강제

ul vs ol순서 의미 있으면 ol, 없으면 ul

CSS 대안list-style-type으로 더 다양한 옵션

Tags

#ol #li #HTML #순서리스트 #리스트 #type속성 #start속성 #reversed #번호매기기 #알파벳 #로마숫자 #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

ol, li, HTML, 순서리스트, 리스트, type속성, start속성, reversed, 번호매기기, 알파벳, 로마숫자, 웹개발, 티스토리