목록 ul·ol·li

목록은 ul이나 ol 안에 줄마다 li를 넣어 씁니다. 순서가 뜻을 가지는 목록은 순서 있는 목록 ol, 순서를 바꿔도 뜻이 같은 목록은 순서 없는 목록 ul이고, 줄 앞의 번호와 점은 브라우저가 매깁니다. 목록 바로 안에는 li만 둡니다.

재료나 조리 순서처럼 줄마다 나뉜 글은 문단 하나에 몰아 쓰면 어디서 끊기는지 알기 어렵습니다. 줄 앞에 1. · 2.를 손으로 써 넣으면, 가운데에 한 줄을 끼울 때마다 아래 번호를 모두 고쳐야 합니다. 이 레슨에서는 두 목록의 뜻, 브라우저가 매기는 번호, 목록 안 목록을 봅니다.

<ul>  <li>양념    <ul>      <li>간장        <ul>          <li>국간장</li>        </ul>      </li>    </ul>  </li></ul>

<ol>  <li>김치 볶기</li>  <li>밥 넣고 볶기</li>  <li>김가루 뿌리기</li></ol>

1순서가 뜻이면 ol, 아니면 ul

<ul>
  <li>밥 2공기</li>
  <li>잘 익은 김치 1컵</li>
</ul>
<ol>
  <li>김치 볶기</li>
  <li>밥 넣고 볶기</li>
  <li>김가루 뿌리기</li>
</ol>

ul은 순서 없는 목록(unordered list), ol은 순서 있는 목록(ordered list), li는 목록의 한 줄(list item)입니다. 재료는 밥을 먼저 적든 김치를 먼저 적든 뜻이 같아 ul로, 조리 순서는 차례가 바뀌면 요리가 달라져 ol로 썼습니다. ul의 줄에는 점(disc)이, ol의 줄에는 1부터 차례로 번호(decimal)가 붙습니다. 점과 번호는 코드에 없습니다. 브라우저가 li를 보고 붙인 것입니다.

17단원에서 만들 할 일 화면의 할 일 목록도 ul 하나와 li 셋입니다. 자바스크립트 과목은 이 li들을 지우고 배열로 다시 그립니다.

2번호는 브라우저가 매긴다

조리 순서 둘째 줄과 셋째 줄 사이에 '달걀 올리기'를 끼웠습니다.

<ol>
  <li>김치 볶기</li>
  <li>밥 넣고 볶기</li>
  <li>달걀 올리기</li>
  <li>김가루 뿌리기</li>
</ol>

끼운 줄이 3번이 되고, '김가루 뿌리기'는 4번으로 밀렸습니다. 브라우저가 ol 안의 li를 위에서부터 세어 번호를 다시 매겼기 때문입니다. 잰 값의 보이는 글에 번호가 없는 것도 같은 까닭입니다. 번호는 글이 아니라 브라우저가 줄 앞에 그려 넣는 표시입니다.

3목록 바로 안에는 li만 — 목록 안 목록은 li 안에

목록 안에 목록을 넣을 때는, 안쪽 목록을 바깥 목록의 li 안에 넣습니다. 안쪽 목록이 그 줄에 딸린 목록이 됩니다.

<ul>
  <li>양념
    <ul>
      <li>간장
        <ul>
          <li>국간장</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

잰 값의 ul ul은 'ul 안의 ul'이라는 뜻입니다. 한 겹 안으로 들어갈 때마다 점이 ●(disc)에서 ◦(circle), 그다음 ▪(square)로 바뀝니다. 목록 바로 안, li 밖에 글을 쓰면 어떻게 될까요? 브라우저는 오류 없이 그 글을 그대로 그립니다.

<ul>
  <li>밥 2공기</li>
  김치 1컵
</ul>

'김치 1컵'은 li가 아니라 점이 붙지 않은 줄로 섞여 그려졌습니다. 나무에서도 ul 바로 안에 글로 남았습니다. 목록의 한 줄은 늘 li로 감쌉니다. 이런 틀림은 검사기로 틀린 HTML 찾기의 검사기가 잡아 줍니다.

예제

김치볶음밥 페이지의 글을 세 걸음으로 씁니다. 걸음마다 맨 위에 주석 머리줄을 답니다.

1. 제목 단계 정하기 — 제목만으로 차례를 먼저 세웁니다.

<!-- 1. 제목 단계 정하기 -->
<h1>김치볶음밥</h1>
<h2>재료</h2>
<h2>조리 순서</h2>

2. 문단과 목록 — 제목 아래를 채웁니다. 재료와 조리 순서에 어떤 목록을 골랐는지, 두 목록 앞에 무엇이 붙을지 먼저 적어 본 뒤 결과 화면을 펴 보세요.

<!-- 2. 문단과 목록 -->
<h1>김치볶음밥</h1>
<p>15분이면 만드는 요리입니다.</p>
<h2>재료</h2>
<ul>
  <li>밥 2공기</li>
  <li>잘 익은 김치 1컵</li>
</ul>
<h2>조리 순서</h2>
<ol>
  <li>김치 볶기</li>
  <li>밥 넣고 볶기</li>
</ol>

3. 강조할 곳 — 꼭 필요한 곳 한두 군데만 강조합니다. 김치를 먼저 볶는 차례에 힘을 주었습니다.

<!-- 3. 강조할 곳 -->
<ol>
  <li><em>먼저</em> 김치 볶기</li>
  <li>밥 넣고 볶기</li>
</ol>

세 걸음의 이름(제목 단계 정하기 · 문단과 목록 · 강조할 곳)은 글 한 페이지를 쓸 때마다 같은 차례로 씁니다.

자주 틀리는 곳

틀린 생각: 순서를 보이려면 줄마다 번호를 글로 쓴다.

번호가 화면에 꼭 보여야 하니, 글에 직접 적어 두는 편이 확실해 보입니다.

<ol>
  <li>1. 김치 볶기</li>
  <li>2. 밥 넣고 볶기</li>
</ol>

결과 화면에서 줄마다 번호가 두 번(1. 1.) 보입니다. 하나는 브라우저가 매긴 번호이고, 하나는 글로 쓴 번호입니다. 가운데에 줄을 끼우면 글로 쓴 번호는 저절로 바뀌지 않습니다.

맞는 규칙: 순서는 ol로 나타내고 번호는 쓰지 않습니다. 브라우저가 li를 세어 번호를 매기고, 줄을 끼우면 다시 매깁니다.

틀린 생각: 안쪽 목록은 바깥 목록 바로 안, li 사이에 둔다.

안쪽 목록도 목록의 한 줄처럼 보이니, li와 나란히 두면 될 것 같습니다.

<ul>
  <li>양념</li>
  <ul>
    <li>간장</li>
  </ul>
</ul>

결과 화면은 1절의 바른 목록과 거의 같아 보입니다. 하지만 나무에서 안쪽 ul은 '양념' 줄에 딸리지 않고 바깥 ul 바로 안에 섰습니다. 목록 바로 안에 li가 아닌 것을 둔 틀린 나무라, 검사기가 잡습니다.

맞는 규칙: 안쪽 목록은 그것이 딸린 줄의 li 안, 그 줄의 글 뒤에 넣습니다(3절). 화면이 비슷해도 나무는 태그가 짓습니다(브라우저 규칙 2).

틀린 생각: 줄을 들여 쓰면 목록 안 목록이 된다.

코드에서 들여 쓴 줄이 안쪽에 든 것처럼 보이니, 들여쓰기만으로 안쪽 목록이 될 것 같습니다.

<ul>
  <li>양념</li>
      <li>간장</li>
</ul>

'간장'도 '양념'과 같은 점(●)으로, 같은 자리에 그려졌습니다. 나무에서도 두 li가 나란히 섭니다.

맞는 규칙: 들여쓰기는 사람이 읽기 위한 것이고, 나무를 짓는 것은 태그입니다(브라우저 규칙 2). 목록 안 목록은 li 안에 ul이나 ol을 넣어야 생깁니다.

틀린 생각: 문단 안에 목록을 넣으면 그 문단에 딸린 목록이 된다.

'재료:' 문단 안에 목록을 넣으면 한 덩어리로 묶일 것 같습니다.

<p>재료:
  <ul>
    <li>밥 2공기</li>
  </ul>
</p>

브라우저는 오류 없이 <ul>에서 문단을 닫았습니다. 목록은 문단 밖으로 나왔고, 짝을 잃은 </p>는 빈 문단 하나를 만들었습니다. 검사기는 이 줄에 'No “p” element in scope but a “p” end tag seen.'을 냅니다(이 단원 끝 레슨).

맞는 규칙: 문단 p 안에는 목록을 넣을 수 없습니다. 목록이 시작되면 문단이 저절로 닫힙니다(브라우저 규칙 2). 목록 앞의 글은 문단을 닫은 뒤 목록을 따로 씁니다.

확인 문제

1. 예제의 조리 순서입니다. 빈 줄(3번 줄)에 li 없이 '불 끄기'를 그대로 치면, 화면에서 '불 끄기'와 '밥 넣고 볶기'의 번호는 어떻게 될까요?

<ol>
  <li>김치 볶기</li>

  <li>밥 넣고 볶기</li>
</ol>

• ① '불 끄기'가 2번, '밥 넣고 볶기'가 3번이 된다
• ② '불 끄기'는 번호 없이 그려지고, '밥 넣고 볶기'는 2번 그대로다
• ③ 오류가 나서 목록이 그려지지 않는다

<ol>
  <li>김치 볶기</li>
불 끄기
  <li>밥 넣고 볶기</li>
</ol>

<ol>
  <li>김치 볶기</li>
  
  <li>밥 넣고 볶기</li>
</ol>

2. 계란말이 페이지를 세 걸음으로 쓰는 중입니다. '2. 문단과 목록'의 ____ 자리에, 재료 '달걀 3개'와 '소금 조금'을 담은 목록을 통째로 쓰세요. 재료는 순서가 뜻이 없습니다.

<!-- 1. 제목 단계 정하기 -->
<h1>계란말이</h1>
<h2>재료</h2>
<!-- 2. 문단과 목록 -->
____

<ul>
  <li>달걀 3개</li>
  <li>소금 조금</li>
</ul>

3. 여행 일정입니다. '불국사'를 '1일: 경주'에 딸린 일정으로 보이려고 한 칸 더 들여 썼습니다. 화면에서 '불국사' 줄 앞의 점은 무엇일까요?

<ul>
  <li>1일: 경주</li>
    <li>불국사</li>
  <li>2일: 부산</li>
</ul>

• ① 다른 줄과 같은 ●
• ② 안쪽 목록의 ◦
• ③ 점이 없다

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. 1절 코드를 hello.html의 body 안에 붙여 저장하고 엽니다. 그다음 재료 목록의 ul을 ol로 바꿔(여는 태그와 닫는 태그 둘 다) 저장 · 새로고침하고, 줄 앞의 표시가 어떻게 바뀌는지 봅니다. 파일을 만들고 여는 법은 준비: VS Code와 작업 폴더에 있습니다.