Web Front/HTML
[HTML의 TEXT 요소] #02 HTML 목록 태그 완벽 정리, 순서가 있을 때와 없을 때의 차이는?
TOASTDEV
2025. 7. 16. 10:00
반응형
[HTML의 TEXT요소] HTML 목록 태그 완전 정리! #ul #ul #li #dt #dl #dd
안녕하세요, 토스트 데브입니다!
지난 시간에는 HTML 문서에서 제목(<h1>~<h6>)과 단락(<p>) 태그를 어떻게 사용하는지 알아보았죠?
오늘은 문서를 구성할 때 자주 사용되는 목록(List) 태그에 대해 알아보겠습니다.
✅ 왜 목록 태그가 필요할까요?
우리는 글을 작성할 때 자주 항목별로 정리된 정보를 나열하게 됩니다.
예를 들어:
- 장보기 목록
- 순위 리스트
- 사용 방법
- FAQ
이런 항목들을 HTML에서 표현할 때 사용하는 것이 바로 목록 태그입니다.
📌 HTML의 목록 태그 종류
| 태그 | 설명 |
| <ul> | 순서가 없는(Unordered) 목록 |
| <ol> | 순서가 있는(Ordered) 목록 |
| <li> | 목록 항목 (List Item) |
| <dl> | 정의 목록 (Description List) |
| <dt> | 용어 (Definition Term) |
| <dd> | 설명 (Definition Description) |
🟢 순서 없는 목록 (<ul>)
순서가 중요하지 않을 때 사용합니다.
브라우저에서는 보통 ● (불릿) 아이콘으로 표시됩니다.
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>🔢 순서 있는 목록 (<ol>)
순서가 중요할 때 사용합니다.
예: 단계별 설명, 랭킹, 절차 등
<ol>
<li>이메일 입력</li>
<li>비밀번호 입력</li>
<li>로그인 클릭</li>
</ol>📘 정의 목록 (<dl>)
사전처럼 용어와 설명을 짝지어서 표현할 때 사용합니다.
<dl>
<dt>HTML</dt>
<dd>웹 페이지의 구조를 설계하는 마크업 언어</dd>
<dt>CSS</dt>
<dd>웹 페이지를 꾸미기 위한 스타일 언어</dd>
</dl>
- <dt>: 정의할 용어
- <dd>: 해당 용어에 대한 설명
💡 목록 태그의 중첩 사용
목록 안에 목록을 넣는 것도 가능합니다. 이런 구조는 자주 쓰이니 꼭 익혀두세요!
<ol>
<li>프론트엔드
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
<li>백엔드</li>
</ol>
🧠 목록 태그 사용 시 주의사항
- 목록 안에는 반드시 <li> 요소만 포함되어야 합니다. (단, 정의 목록은 <dt>, <dd> 조합 사용)
- 중첩 시에는 시각적 구분을 위해 들여쓰기를 활용하세요.
- 웹 접근성 측면에서도 **순서 있는 정보는 <ol>, 순서 없는 정보는 <ul>**을 사용하는 것이 중요합니다.
🔎 목록 태그와 웹 접근성
- 스크린 리더 등 보조 기술은 <ol>, <ul>, <dl> 구조를 분석하여 사용자가 내용을 더 쉽게 이해할 수 있도록 돕습니다.
- 의미 없는 줄바꿈보다는 목록 태그를 적극 활용해 주세요.
- 순서를 혼동하게 만드는 잘못된 목록 사용은 접근성과 SEO 모두에 악영향을 줍니다.
✨ 정리하면?
| 목록 유형 | 태그 | 사용목적 |
| 순서 없는 목록 | <ul> + <li> | 메뉴, 체크리스트 등 |
| 순서 있는 목록 | <ol> + <li> | 절차, 순위, 단계 등 |
| 정의 목록 | <dl> + <dt> + <dd> | 용어와 설명, FAQ 등 |
🎯 마무리
목록은 단순한 나열 이상의 역할을 합니다.
정보를 구조화하고, 문서를 깔끔하게 정리하며, 사용자의 이해를 돕는 강력한 도구입니다.
앞으로 여러분이 웹 페이지를 만들 때 메뉴, FAQ, 설명서 등을 작성해야 한다면
오늘 배운 목록 태그들을 꼭 활용해보세요!
#HTML #HTML기초 #목록태그 #ul #ol #dl #웹개발입문 #프론트엔드 #웹접근성 #코딩공부 #토스트데브
반응형