Ch.2 콘텐츠 쌓기 — 텍스트, 목록, 링크, 이미지

목록으로 정리하기

순서 없는 목록(ul)과 순서 있는 목록(ol)을 구별한다목록 항목(li)의 중첩 사용법을 이해한다홈페이지에 목록을 추가할 수 있다

정리되지 않은 정보는 기억에 남지 않는다

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

HTML에서 항목을 깔끔하게 나열하려면?

ul(순서 없음)과 ol(순서 있음) — 두 종류의 목록 태그를 배워봅시다.

article

핵심 내용

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

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

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

<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> 없이 단독으로 사용할 수 있다

<ul>은 순서가 있는 번호 목록을 만든다

HTML 목록

edit_note

정리 노트

목록으로 정리하기

목록 태그

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

중첩 목록

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

★

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

check_circle

핵심 정리

1<ul> = 순서 없는 목록 (●), <ol> = 순서 있는 목록 (1.2.3.)
2<li>는 반드시 ul 또는 ol 안에서 사용
3목록 안에 목록을 중첩할 수 있다

퀴즈와 인터랙션으로 더 깊이 학습하세요

play_circle인터랙티브 레슨 시작