HTML 목록 태그 제대로 배우기 – 실무에서 자주 쓰는 ul, ol, li





HTML 리스트 태그 완전 정복


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. 물 끓이기
  2. 라면 넣기
  3. 계란 풀기

💡 “단계”, “과정”, “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>
  1. HTML
  2. CSS
  3. 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
  1. 계획 세우기
  2. 코딩 시작
  3. 디버깅

이제 리스트 태그에 대한 핵심은 모두 정리되었습니다. 처음엔 <ul><ol>이 헷갈릴 수 있지만, 실제로 써보면서 익숙해지면 자연스럽게 구분할 수 있습니다. 다음부터는 웹 페이지의 메뉴나 절차를 만들 때 리스트 태그가 자연스럽게 떠오를 거예요.


Leave a Comment