topic★★★★★난이도 · 약 10분

목록으로 정리하기

ul(순서 없음)과 ol(순서 있음), li 항목 — 정보를 깔끔하게 나열한다.

#ul#ol#li#목록#중첩

왜 배우는가

장보기 목록, 레시피 순서, 뉴스 목차 — 일상에서 목록은 정보를 정리하는 가장 효과적인 방법이다.

목록에는 두 종류가 있습니다: 순서가 중요한가, 아닌가

구분	순서 없는 목록 (ul)	순서 있는 목록 (ol)
표시	글머리 기호 (●)	번호 (1. 2. 3.)
용도	취미, 재료	레시피, 순위

html

<ul>
  <li>코딩</li>
  <li>게임</li>
  <li>독서</li>
</ul>

ul = Unordered List. 순서 없는 목록 (●).

html

<ol>
  <li>HTML 배우기</li>
  <li>CSS 배우기</li>
  <li>JS 배우기</li>
</ol>

ol = Ordered List. 순서 있는 목록 (1. 2. 3.).

ul = Unordered List (순서 무관 → 취미, 재료) ol = Ordered List (순서 중요 → 레시피, 순위) li = List Item (항목 하나하나)

목록 안에 또 다른 목록을 넣을 수 있습니다

html

<ul>
  <li>프로그래밍 언어
    <ul>
      <li>HTML / CSS</li>
      <li>JavaScript</li>
      <li>Python</li>
    </ul>
  </li>
  <li>취미
    <ul>
      <li>게임</li>
      <li>독서</li>
    </ul>
  </li>
</ul>

li 안에 ul/ol을 다시 넣어 하위 목록을 만들 수 있다.

취미와 학습 목표를 목록으로 정리해봅시다

html

<h2>나의 취미</h2>
<ul>
  <li>코딩</li>
  <li>게임</li>
  <li>음악 듣기</li>
</ul>

<h2>학습 순서</h2>
<ol>
  <li>HTML 구조 익히기</li>
  <li>CSS로 스타일 입히기</li>
  <li>JavaScript로 동작 추가하기</li>
</ol>

ul로 취미(순서 무관), ol로 학습 순서(순서 중요)를 정리한 예시.

태그	설명
`<ul>`	순서 없는 목록 — 글머리 기호로 표시
`<ol>`	순서 있는 목록 — 번호(1, 2, 3)로 표시
`<li>`	목록의 각 항목을 나타내는 태그

핵심	설명
중첩	li 안에 ul/ol을 다시 넣어 하위 목록 생성
들여쓰기	중첩될 때마다 자동으로 들여쓰기 적용

순서가 중요하면 ol, 아니면 ul을 사용하세요. li는 반드시 ul/ol 안에!

실기 드릴 3문항

edit실기 드릴 · 단답형

레시피의 조리 순서를 표시하기에 적합한 태그는?

check_circle실기 드릴 · OX

<li> 태그는 <ul> 또는 <ol> 없이 단독으로 사용할 수 있다.

edit실기 드릴 · 단답형

순서 없는 번호 목록을 만드는 태그는? (ul/ol 중)