안녕하세요. 이번 포스팅에서는 HTML에서 목록(List)을 만들 때 사용하는 ul, ol, li 태그를 정리해보았습니다.
웹페이지를 만들다 보면 메뉴 목록, 순서가 있는 설명, 체크리스트 등 여러 개의 항목을 나열해야 하는 경우가 있습니다.
이럴 때 단순히 줄바꿈으로 작성하는 것이 아니라 HTML의 목록 태그를 사용하면 구조를 더 명확하게 표현할 수 있습니다.
처음에는 ul, ol, li가 비슷학세 보여 헷갈릴 수 있지만 각각의 역할을 이해하면 상황에 맞게 사용할 수 있습니다.
학습 목표
웹 페이지에서는 메뉴, 게시판, 카테고리, 검색 결과 등 여러 정보를 목록 형태로 보여주는 경우가 많습니다. 이번 포스팅에서는 HTML의 목록 태그인 ul, ol, li를 사용하여 정보를 구조적으로 표현하는 방법을 익혀보겠습니다.
- 순서가 없는 목록(ul)을 이해한다.
- 순서가 있는 목록(ol)을 이해한다.
- 목록 항목을 만드는 li 태그를 이해한다.
- 각 태그가 언제 사용되는지 구분할 수 있다.
- 직접 코드를 작성하며 목록 구조를 확인한다.
태그 하나씩 살펴보기
순서가 없는 목록
<ul>
Unordered List의 약자로 순서가 없는 목록을 만들 때 사용합니다. 브라우저에서는 기본적으로 앞에 ● 모양의 불릿(Bullet)이 표시됩니다.
메뉴 목록, 기능 소개, 준비물 목록처럼 순서가 중요하지 않은 경우에 사용합니다.
순서가 있는 목록
<ol>
Ordered List의 약자로 순서가 있는 목록을 만들 때 사용합니다. 브라우저에서는기본적으로 1, 2, 3 형태의 번호가 붙습니다.
설치 순서, 회원가입 절차, 요리 레시피처럼 순서가 중요한 경우에 사용합니다.
목록 항목
<li>
List item의 약자로 목록의 각 항목을 의미합니다. ul 또는 ol 태그 안에서 사용하며 실제 목록 내용을 작성하는 역할을 합니다.
li 태그는 단독으로 사용하지 않고 반드시 ul 또는 ol 안에 작성하는 것이 일반적입니다.
< 왜 li만 쓰면 안 될까? >
간혹 아래와 같이 li 태그만 사용하는 경우가 있습니다.
<li>사과</li>
<li>바나나</li>
<li>포도</li>
하지만 브라우저 입장에서는 이것이 순서가 있는 목록인지, 순서가 없는 목록인지 알 수 없습니다. 그래서 li는 반드시 ul 또는 ol 안에서 사용해아 합니다.
목록 전체를 김싸는 부모 태그가 있어야 HTML 구조가 올바르게 작성됩니다.
태그 한눈에 정리
| 태그 | 역할 |
| ul | 순서가 없는 목록 |
| ol | 순서가 있는 목록 |
| li | 목록의 개별 항목 |
실습하기
VS Code를 실행한 후 새 파일을 엽니다. 파일 안에 느낌표( ! )를 입력하고 Tab 키를 누르면 HTML5 기본 구조가 자동완성됩니다. 이후 아래 예제 코드를 <body> 안에 작성해보세요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>목록 태그</title>
</head>
<body>
<h2>좋아하는 과일</h2>
<ul>
<li>사과</li>
<li>바나나</li>
<li>포도</li>
</ul>
<hr>
<h2>회원가입 순서</h2>
<ol>
<li>회원 정보 입력</li>
<li>이메일 인증</li>
<li>가입 완료</li>
</ol>
</body>
</html>
코드를 다 작성했으면 VS Code 하단이나 파일에서 우클릭 후 Open with Live Server를 클릭해 브라우저로 열어보세요.
페이지가 실행되면 ul 태그와 ol 태그의 차이를 직접 확인해보세요.
- ul 태그는 각 항목 앞에 ● 모양의 불릿(Bullet)이 표시됩니다.
- ol 태그는 각 항목 앞에 1, 2, 3과 같은 번호가 자동으로 표시됩니다.
- 두 태그 모두 여러 항목을 목록 형태로 묶어주지만, 순서의 중요 여부에 따라 사용하는 태그가 달라집니다.
코드의 내용을 변경해가며 목록 항목을 추가하거나 삭제해보세요. 브라우저 화면이 어떻게 바뀌는지 직접 확인해보는 것이 가장 좋은 학습 방법입니다.
마치며
오늘은 HTML에서 목록을 만들 때 사용하는 ul, ol, li 태그를 살펴보았습니다. 목록을 표현할 때는 단순히 줄바꿈을 사용하는 것이 아니라 상황에 맞는 태그를 선택하는 것이 중요합니다.
특히 ul과 ol의 차일르 이해하고, li가 목록의 개별 항목이라는 점을 기억해두면 앞으로 다양한 웹 페이지를 만들 때 도움이 될 것입니다. 궁금한 점은 댓글 남겨주세요!
'HTML CSS JS' 카테고리의 다른 글
| 1-3 HTML 자주 쓰는 태그 (0) | 2026.05.26 |
|---|---|
| 1-2 기본 문서 구조 (0) | 2026.04.29 |
| 1-1. HTML 역할 이해 (1) | 2026.04.23 |