HTML 리스트 태그 완전 정복 – 초보자를 위한 ul, ol, li 설명과 예제
웹사이트에서 정보를 정리할 때 가장 자주 사용하는 구조 중 하나가 목록입니다. 쇼핑몰의 상품 리스트, 블로그 글 목차, 단계별 설명서 등 모두 리스트 태그를 사용하면 더 깔끔하고 구조적인 표현이 가능합니다. 이번 글에서는 <ul>
, <ol>
, <li>
태그를 각각 이해하고, 실제 어떻게 화면에 표시되는지 함께 살펴보겠습니다.
Step 1. ul
태그 – 순서 없는 목록
<ul>은 “unordered list”의 약자입니다. 이름 그대로 항목 간의 순서가 중요하지 않을 때 사용합니다. 각 항목은 기본적으로 ● 점(dot)으로 표시됩니다.
<ul>
<li>커피</li>
<li>녹차</li>
<li>물</li>
</ul>
- 커피
- 녹차
- 물
💡 순서가 중요하지 않다면 무조건
<ul>
을 사용하는 것이 좋습니다.
Step 2. ol
태그 – 순서 있는 목록
<ol>은 “ordered list”의 약자이며, 항목 간의 순서가 중요할 때 사용합니다. 자동으로 번호가 매겨지며, 레시피 순서, 절차 설명 등에 적합합니다.
<ol>
<li>물 끓이기</li>
<li>라면 넣기</li>
<li>계란 풀기</li>
</ol>
- 물 끓이기
- 라면 넣기
- 계란 풀기
💡 “단계”, “과정”, “1번부터 시작” 같은 단어가 있다면
<ol>
을 쓰세요.
Step 3. li
태그 – 목록 항목
<li>는 “list item”으로, 실제 항목 하나를 나타냅니다. <ul>이나 <ol> 내부에만 쓸 수 있습니다. 단독 사용은 문법 오류입니다.
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
- HTML
- CSS
💡
<li>
는 반드시<ul>
또는<ol>
안에서만 사용하세요!
Step 4. 중첩 리스트 – 리스트 안에 리스트
하나의 항목이 다시 하위 항목들을 포함할 때는 리스트 안에 리스트를 중첩해서 사용합니다.
<ul>
<li>프로그래밍 언어
<ul>
<li>Python</li>
<li>JavaScript</li>
</ul>
</li>
</ul>
- 프로그래밍 언어
- Python
- JavaScript
💡 중첩된
<ul>
이나<ol>
은 항상<li>
안에 들어가야 합니다.
Step 5. 리스트 스타일 변경하기 – ol의 type 속성
<ol>
에는 type
속성을 줘서 번호 대신 알파벳이나 로마 숫자로 바꿀 수 있습니다.
<ol type="A">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
- HTML
- CSS
- JS
💡
type="a"
(소문자),type="I"
(로마 숫자) 등 다양한 옵션이 있습니다.
정리 – 전체 코드 예제
<ul>
<li>프론트엔드 기술
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>백엔드 기술
<ul>
<li>Python</li>
<li>Java</li>
</ul>
</li>
</ul>
<ol type="a">
<li>계획 세우기</li>
<li>코딩 시작</li>
<li>디버깅</li>
</ol>
- 프론트엔드 기술
- HTML
- CSS
- JavaScript
- 백엔드 기술
- Python
- Java
- 계획 세우기
- 코딩 시작
- 디버깅
이제 리스트 태그에 대한 핵심은 모두 정리되었습니다. 처음엔 <ul>
과 <ol>
이 헷갈릴 수 있지만, 실제로 써보면서 익숙해지면 자연스럽게 구분할 수 있습니다. 다음부터는 웹 페이지의 메뉴나 절차를 만들 때 리스트 태그가 자연스럽게 떠오를 거예요.