리스트 (Lists)

순서가 없는 리스트 (Unordered lists)

순서가 없는 리스트는 항목들의 순서가 전혀 중요하지 않은 목록을 마크업할 때 사용해요. 우리가 마트에 갈 때 적어가는 장보기 목록을 예로 들어볼까요?

우유
계란
빵
후무스

이 예시에서는 우유를 먼저 사든 빵을 먼저 사든 항목의 순서가 아무 상관이 없죠? 이런 리스트를 HTML로 표현하려면, 먼저 목록 전체를 <ul> (unordered list) 요소로 감싸주어야 해요.
그런 다음, 각 항목을 개별적으로 <li> (list item) 요소 안에 감싸주는 겁니다!

💡 [강사의 실무 꿀팁 & 면접 대비]
단순히 글머리 기호를 찍기 위해서 <ul>을 쓰는 게 아니에요. 실무에서 프론트엔드 개발을 하시다 보면 웹사이트 상단의 내비게이션 바(GNB), 쇼핑몰의 상품 리스트, 이미지 갤러리 등을 만들 때 이 <ul>과 <li>를 정말 밥 먹듯이 사용하게 될 거예요.
특히 지금 훌륭한 프론트엔드 개발자가 되기 위해 기술 면접을 준비하고 계신다면, '시맨틱 마크업(Semantic Markup)과 웹 접근성'에 대한 질문을 받을 확률이 높습니다. 이때 리스트 요소를 예시로 들어보세요. "텍스트를 단순히 <div>로 나열하면 시각장애인이 사용하는 스크린 리더기가 목록의 구조를 파악하지 못하지만, <ul>을 사용하면 스크린 리더기가 '4개의 항목으로 이루어진 목록입니다'라고 친절하게 맥락을 알려주어 사용자 경험을 크게 개선할 수 있습니다."라고 답변하시면 면접관에게 아주 좋은 인상을 남길 수 있을 거예요!

<ul>
  <li>milk</li>
  <li>eggs</li>
  <li>bread</li>
  <li>hummus</li>
</ul>

---

순서가 있는 리스트 (Ordered lists)

자, 이번에는 순서가 있는 리스트입니다. 이름에서 알 수 있듯, 항목들의 순서가 매우 중요한 목록에 사용돼요. 길 찾기 안내를 예로 들어볼게요.

길 끝까지 직진하세요
오른쪽으로 도세요
첫 번째와 두 번째 로터리에서 직진하세요
세 번째 로터리에서 왼쪽으로 도세요
학교는 오른쪽, 길 위쪽으로 300미터 지점에 있습니다

여기서 순서를 하나라도 바꾸면 목적지에 절대 도착할 수 없겠죠? 마크업 구조는 순서가 없는 리스트와 완벽하게 똑같습니다. 단 하나, 리스트 항목들을 <ul>이 아닌 <ol> (ordered list) 요소로 감싸주기만 하면 끝이에요!

<ol>
  <li>Drive to the end of the road</li>
  <li>Turn right</li>
  <li>Go straight across the first two roundabouts</li>
  <li>Turn left at the third roundabout</li>
  <li>The school is on your right, 300 meters up the road</li>
</ol>

---

레시피 페이지 마크업 해보기 (Marking up our recipe page)

이제 진짜 실력을 발휘할 도전 과제입니다! 이 시점이 되면, 조금 더 복잡한 콘텐츠 섹션을 마크업하는 데 필요한 모든 지식을 갖추셨을 거예요. 우리가 가장 좋아하는 후무스(hummus) 레시피의 요리법을 마크업해 보는 미션입니다.

다음 두 가지 방법 중 하나를 선택해서 진행해 보세요:

• 저희의 시작 파일인 text-start.html 사본을 로컬에 저장한 뒤, 여러분의 코드 에디터에서 작업해 보기. (강력 추천합니다!)
• 아래 렌더링된 코드 출력에서 "Play"를 클릭하여 MDN Playground에서 바로 편집하기.

여러분이 따라야 할 지침은 다음과 같습니다:
1. 메인 페이지 제목은 <h1> 요소를 사용해서 마크업하고, 3개의 소제목은 <h2> 요소를 사용해 마크업하세요.
2. <p> 요소(단락)로 마크업하는 게 가장 의미상 들어맞는 텍스트가 5줄 있습니다. 지금 바로 찾아내서 감싸보세요.
3. 재료 목록(Ingredients)은 순서가 없는 리스트로 마크업하세요.
4. 조리법 목록(Instructions)은 순서가 있는 리스트로 마크업하세요.

혹시 실수하셨다면 MDN Playground에서 Reset 버튼을 눌러 지우면 됩니다. 정말 꽉 막혀서 답답하다면 코드 출력 창 아래에 있는 솔루션(정답)을 확인해 보셔도 좋아요.

(💡 솔루션: 정답 HTML 코드는 GitHub 저장소의 text-complete.html 파일에서 확인하실 수 있습니다.)

---

리스트 중첩하기 (Nesting lists)

하나의 리스트 안에 다른 리스트를 집어넣는 것(중첩)은 아주 자연스럽고 완벽하게 괜찮은 방법이에요! 최상위 글머리 기호 아래에 하위 글머리 기호를 넣고 싶을 때가 많잖아요? 아까 보았던 레시피 예제의 두 번째 리스트(조리법)를 다시 가져와 볼게요.

<ol>
  <li>Remove the skin from the garlic, and chop coarsely.</li>
  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
  <li>Add all the ingredients into a food processor.</li>
  <li>Process all the ingredients into a paste.</li>
  <li>If you want a coarse "chunky" hummus, process it for a short time.</li>
  <li>If you want a smooth hummus, process it for a longer time.</li>
</ol>

마지막 두 항목을 가만히 보면, 그 바로 앞 항목("페이스트 형태로 가공하세요")과 아주 밀접하게 연결되어 있어요. 마치 해당 글머리 기호 아래에 딱 맞는 하위 지침이나 선택지처럼 읽히죠. 이런 경우에는 마지막 두 항목을 그들만의 순서가 없는 리스트(<ul>)로 새롭게 묶어준 다음, 그 리스트를 현재의 4번째 글머리 기호 안에 쏙 넣어주는 게 의미상 훨씬 깔끔합니다. 코드로 보면 다음과 같아요.

💡 [강사의 부연설명]
리스트를 중첩할 때 초보자분들이 제일 많이 하는 실수가 닫는 태그 </li>의 위치를 잘못 잡는 겁니다. 하위 리스트(<ul>이나 <ol>)를 만들려면 반드시 부모가 되는 <li> 태그가 닫히기 전(안쪽)에 넣어야 한다는 점, 잊지 마세요!

<ol>
  <li>Remove the skin from the garlic, and chop coarsely.</li>
  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
  <li>Add all the ingredients into a food processor.</li>
  <li>
    Process all the ingredients into a paste.
    <ul>
      <li>
        If you want a coarse "chunky" hummus, process it for a short time.
      </li>
      <li>If you want a smooth hummus, process it for a longer time.</li>
    </ul>
  </li>
</ol>

이전 실습 과제로 돌아가서 두 번째 목록을 위와 같이 한 번 업데이트해 보세요.

---

설명 리스트 (Description lists)

설명 리스트의 목적은 용어와 그에 대한 정의, 혹은 질문과 답변처럼 한 세트로 묶이는 항목들과 그 연관된 설명들을 마크업하는 거예요. 극작 용어와 정의 세트를 예로 살펴볼까요?

독백 (soliloquy)
연극에서 등장인물이 혼잣말을 하며 자신의 내면의 생각이나 감정을 관객에게 전달하는 것 (하지만 다른 등장인물에게는 들리지 않음).
독백 (monologue)
연극에서 등장인물이 자신의 생각을 소리 내어 말하여 관객 및 함께 있는 다른 등장인물들과 공유하는 것.
방백 (aside)
연극에서 등장인물이 유머러스하거나 극적인 효과를 위해 오직 관객과만 코멘트를 공유하는 것. 보통 감정, 생각 또는 추가적인 배경 정보 등을 나타냄.

설명 리스트는 앞서 배운 두 리스트와는 감싸는 틀(wrapper)이 다릅니다. 전체를 <dl> (description list) 요소로 감싸주어야 해요. 거기에 더해, 각 '용어'는 <dt> (description term) 요소로 감싸고, 각 '설명(정의)'은 <dd> (description definition) 요소로 감쌉니다.

💡 [강사의 실무 꿀팁]
실무에서 이 <dl>, <dt>, <dd> 구조를 자주 깜빡하시곤 해요. 하지만 사전 서비스, 자주 묻는 질문(FAQ) 게시판, 혹은 쇼핑몰에서 제품 스펙(예: 제조사 - 구글, 무게 - 1.5kg)을 표시할 때 이 태그를 사용하시면 접근성과 의미론적 측면에서 만점짜리 코드 퀄리티를 보여줄 수 있답니다!

설명 리스트 예제 (Description list example)

자, 그럼 용어 예제를 마저 마크업해 볼까요?

<dl>
  <dt>soliloquy</dt>
  <dd>
    In drama, where a character speaks to themselves, representing their inner
    thoughts or feelings and in the process relaying them to the audience (but
    not to other characters.)
  </dd>
  <dt>monologue</dt>
  <dd>
    In drama, where a character speaks their thoughts out loud to share them
    with the audience and any other characters present.
  </dd>
  <dt>aside</dt>
  <dd>
    In drama, where a character shares a comment only with the audience for
    humorous or dramatic effect. This is usually a feeling, thought, or piece of
    additional background information.
  </dd>
</dl>

브라우저의 기본 스타일은 설명 리스트를 화면에 그릴 때, 설명(<dd>) 부분을 용어(<dt>)보다 안쪽으로 살짝 들여쓰기(indent)해서 보여준답니다.

하나의 용어에 여러 개의 설명 달기 (Multiple descriptions for one term)

여기서 기억해 둘 점! 하나의 용어(<dt>)에 여러 개의 설명(<dd>)을 연달아 다는 것도 문법적으로 완벽하게 허용됩니다. 예를 들면 이렇게요:

<dl>
  <dt>aside</dt>
  <dd>
    In drama, where a character shares a comment only with the audience for
    humorous or dramatic effect. This is usually a feeling, thought, or piece of
    additional background information.
  </dd>
  <dd>
    In writing, a section of content that is related to the current topic, but
    doesn't fit directly into the main flow of content so is presented nearby
    (often in a box off to the side.)
  </dd>
</dl>