HTML 비순서 리스트 — ul · li 완전 정리

 

 

Web Development · HTML List

HTML 비순서 리스트 —
<ul> · <li> 완전 정리

순서 상관없는 항목 나열의 표준 · 데이터 크롤링의 핵심 타겟

시작 오늘 분석할 코드

관광 안내 전화번호 두 개를 보여주는 단순한 페이지지만, 웹에서 가장 흔한 패턴인 비순서 리스트(unordered list)를 정확히 보여준다.

<h1>관광 안내 전화</h1> <p>한국관광공사에서는 ... 1330 서비스를 ...</p> <p>1330에는 ... 영어, 중국어, 일어의 3개 국어로도 ...</p> <ul> <li>일반 전화 : (국번없이) 1330</li> <li>휴대 전화 : 064-1330</li> </ul>

실제 출력 결과

관광 안내 전화

• 일반 전화 : (국번없이) 1330
• 휴대 전화 : 064-1330

용어 용어 정리

ulUnordered List — 비순서 리스트

liList Item — 리스트의 한 항목

불릿(bullet)li 앞에 자동으로 붙는 점

olOrdered List — 순서 리스트

중첩 리스트li 안에 또 ul/ol을 넣음

list-style-type불릿 모양 변경 CSS 속성

---

1 ul vs ol — 언제 어떤 걸?

둘 다 리스트지만 순서의 의미 유무가 결정 기준이다.

<ul> — 비순서

순서 상관없음
각 li는 동등
예: 메뉴, 태그 목록, 옵션
기본 표시: 점(•)

<ol> — 순서

순서가 중요
1번 → 2번 → 3번
예: 요리 순서, 단계별 가이드
기본 표시: 숫자(1, 2, 3)

※ 판단 기준: "항목 순서를 바꿔도 의미가 같은가?" 같으면 ul, 다르면 ol.

---

2 구조 — ul과 li는 짝을 이룬다

<ul>은 컨테이너고 <li>가 실제 항목이다. 둘은 반드시 같이 쓰여야 한다.

※ <ul> 안에는 오직 <li>만 직접 들어갈 수 있다. <p>나 <div>를 직접 넣으면 HTML 검증 오류.

✗ 잘못된 예 <ul> <p>항목 1</p> ← p가 직접 들어감 (오류) <div>항목 2</div> </ul> ✓ 올바른 예 <ul> <li>항목 1</li> <li> <p>항목 2 — 안에 p는 OK</p> </li> </ul>

li 안에는 p, div, span, a, img 등 거의 뭐든 들어갈 수 있다. 단지 ul의 직접 자식은 li만이라는 게 규칙이다.

---

3 중첩 리스트 — li 안에 또 ul

리스트 안에 또 다른 리스트를 넣는 패턴은 메뉴, 카테고리, 트리 구조에서 매우 흔하다.

<ul> <li>프론트엔드 <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </li> <li>백엔드 <ul> <li>PHP</li> <li>Node.js</li> </ul> </li> </ul>

• 프론트엔드
  • HTML
  • CSS
  • JavaScript
• 백엔드
  • PHP
  • Node.js

중첩하면 브라우저가 자동으로 들여쓰기와 다른 모양의 불릿(• → ◦ → ▪)을 적용해서 단계가 한눈에 보인다.

---

4 불릿 모양 바꾸기 — list-style-type

기본 점(•)이 마음에 안 들 때 CSS로 바꿀 수 있다.

값	모양	비고
disc	● (실원)	기본값
circle	○ (빈원)	2단계 중첩 기본
square	■ (사각)	3단계 중첩 기본
none	(없음)	네비 메뉴에서 자주 사용

ul { list-style-type: square; /* 또는 list-style: none; */ }

※ 네비게이션 메뉴는 거의 항상 list-style: none; + flex로 가로 배치한다. ul·li 구조는 의미상 유지하면서 디자인만 일반 메뉴처럼.

---

반응형

5 데이터 크롤링과 ul/li

왜 리스트 태그가 중요한가? 데이터 분석과 웹 크롤링에서 ul/li가 핵심 타겟이기 때문이다.

예: 쇼핑몰 상품 목록, 뉴스 기사 목록, 댓글 목록 — 거의 항상 ul/li 구조다. 크롤러는 이 구조를 보고 "이게 반복되는 데이터"라고 판단해 추출한다.

도구/언어	리스트 추출 예
JavaScript	document.querySelectorAll('ul.product-list li')
Python BeautifulSoup	soup.select('ul.list > li')
jQuery	$('ul.menu li')

---

6 자주 하는 실수

실수	증상	해결
ul 안에 p나 div 직접	HTML 검증 오류	ul의 자식은 li만
li 닫기 빼먹음	리스트가 어긋남	각 li마다 닫기 짝
순서 의미 있는데 ul	접근성 정보 부정확	순서면 ol
div로만 메뉴 만듦	의미 정보 없음	nav + ul + li 패턴
중첩 ul을 잘못된 위치에	들여쓰기 깨짐	중첩 ul은 li 안에

---

핵심 한 줄 요약

<ul>비순서 리스트 — 순서 무관 항목

<li>List Item — ul/ol의 한 항목

짝꿍 규칙ul의 직접 자식은 li만

중첩 가능li 안에 또 ul/ol 가능

list-style불릿 모양·표시 여부 CSS

메뉴 구현nav > ul > li 패턴 표준

크롤링 타겟데이터 수집 시 ul/li가 핵심

Tags

#ul #li #HTML #비순서리스트 #리스트 #불릿 #중첩리스트 #list-style #메뉴 #크롤링 #시맨틱태그 #웹개발 #티스토리

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

ul, li, HTML, 비순서리스트, 리스트, 불릿, 중첩리스트, list-style, 메뉴, 크롤링, 시맨틱태그, 웹개발, 티스토리