목록

docs.scrimba.com

웹 페이지의 상당 부분은 실제로 목록입니다: 네비게이션 메뉴, 검색 결과, 상품 그리드, 레시피의 재료, 비밀번호 재설정 단계. 관련 항목들의 집합일 때마다 HTML에는 그것을 나타내는 요소가 있으며, 이를 사용하면 브라우저와 보조 소프트웨어를 사용하여 읽는 모든 사람이 해당 항목들이 함께 속한다는 것을 알 수 있습니다.

순서 없는 목록

항목의 순서가 중요하지 않을 때는 **순서 없는 목록**을 사용합니다. 장보기 목록을 생각해보세요: 우유, 빵, 계란. 어떤 것을 먼저 쓰든 중요하지 않으며, 함께 묶인 항목들입니다.

두 개의 태그로 만들어집니다. <ul> 태그는 전체 목록을 감싸고, 각 항목은 자신의 <li> 태그("list item")에 들어갑니다:

<ul>
  <li>우유</li>
  <li>빵</li>
  <li>계란</li>
</ul>

브라우저는 각 항목을 자신의 줄에 앞에 글머리 기호가 있게 표시합니다. 글머리 기호나 줄 바꿈을 직접 추가하지 않았으며, 이것이 목록이라고 알렸기 때문에 브라우저가 이를 수행합니다.

순서 없는 목록은 수열이 의미를 갖지 않는 항목들의 그룹입니다. <ul> 요소는 컨테이너이고, 모든 직속 자식은 하나의 항목을 보유하는 <li> 요소입니다:

<ul>
  <li>£40 이상 무료 배송</li>
  <li>30일 이내 반품</li>
  <li>2년 보증</li>
</ul>

기억해야 할 한 가지 규칙이 있습니다: <ul>의 직속 자식으로 허용되는 유일한 것은 <li>입니다. <p>나 <div>를 <ul> 바로 안에 넣지 않습니다. 항목에 단락이나 링크를 원한다면, 이는 <li> 안으로 들어가며, <li>는 어떤 콘텐츠든 보유할 수 있습니다.

글머리 기호와 들여쓰기는 기본 브라우저 스타일링이며, 의미의 일부가 아닙니다. CSS에 도달하면 이들을 자유롭게 변경하거나 제거할 수 있으며, 목록은 여전히 그 아래에서 목록입니다.

순서 없는 목록은 수열이 중요하지 않은 항목들의 집합을 표시합니다. <ul>은 컨테이너이고 각 항목은 <li>입니다; <ul>의 유일한 허용된 직속 자식은 <li> 요소(<template>과 같은 스크립트 지원 요소 포함)이므로, <ul>과 그 항목 사이에 맨 <div>를 배치하는 것은 유효하지 않으며 파서는 이를 목록의 일부로 취급하지 않습니다.

<ul>
  <li>£40 이상 무료 배송</li>
  <li>30일 이내 반품</li>
  <li>2년 보증</li>
</ul>

글머리 기호 마커와 들여쓰기는 브라우저의 기본 제공 스타일시트의 표시적 기본값이며, 의미가 아닙니다; list-style: none은 요소가 의미하는 것을 변경하지 않고 이들을 제거합니다. 그 분리가 중요한 이유는 의미는 요소에 있고, 글머리 기호는 단지 그림일 뿐이기 때문입니다. 보조 소프트웨어(화면 읽기 프로그램과 같은 도구의 우산 용어로, 보지 못하는 사람들을 위해 페이지를 소리내어 읽음)는 마커가 아닌 구조를 읽습니다: 목록이 시작되고 몇 개의 항목을 보유하는지 발표합니다. 중첩에 관한 Deep Dive에서 그 발표가 무엇을 가져오는지 다시 돌아옵니다.

Juno순서 없는 목록 순서가 중요하지 않은 목록에는 <ul>을 사용하고, 각 항목을 자신의 <li>에 감싸세요. 브라우저가 글머리 기호와 줄 바꿈을 추가하므로, 직접 입력할 필요가 없습니다. 그것을 신뢰하는 데 시간이 걸렸으며, 점들을 직접 추가하고 싶었습니다.

Juno순서 없는 목록<ul>은 컨테이너이고, 그 직속 자식은 <li> 항목뿐입니다. 링크, 단락 같은 더 풍부한 것은 <li> 안에 들어가며, 절대 <ul> 내에서 느슨하게 남아있지 않습니다. 글머리 기호는 나중에 변경할 수 있는 기본 스타일링이므로, 모양이 아닌 의미로 요소를 선택하세요.

Juno순서 없는 목록<ul>은 직속 자식으로 <li>만 받으므로, 거기에 있는 떠있는 <div>는 유효하지 않은 마크업입니다. 글머리 기호는 브라우저 스타일시트에서 오며, 의미가 아니므로 list-style: none은 점을 제거하고 목록을 유지합니다. 이 구분은 CSS가 마커를 숨긴 후에도 화면 읽기 프로그램이 여전히 항목을 셀 수 있는 이유입니다.

순서 목록 및 그 속성

때때로 순서가 핵심입니다. 레시피의 단계, 경주에서의 위치, 하나씩 따르는 지시. 이러한 경우 **순서 목록**을 사용하며, 이는 항목에 번호를 매깁니다.

순서 없는 목록과 정확히 같은 방식으로 작동하지만, 컨테이너는 <ul> 대신 <ol>입니다:

<ol>
  <li>오븐을 180°C로 예열하세요</li>
  <li>밀가루와 설탕을 섞으세요</li>
  <li>틀에 붓고 25분간 굽으세요</li>
</ol>

이제 브라우저는 글머리 기호 대신 항목 앞에 1, 2, 3을 붙입니다. 나중에 중간에 새 단계를 추가하면, 번호들이 자동으로 다시 번호가 매겨집니다. 번호를 직접 입력할 수 없으며, 이것이 <ol>을 사용하는 이유입니다.

순서 목록은 수열이 의미를 갖는 항목들을 위한 것입니다. <ul>과 같은 구조이지만, 컨테이너를 <ol>로 바꾸면, 브라우저가 각 <li>에 자동으로 번호를 매깁니다. 번호가 생성되므로, 항목을 삽입하거나 제거하면 나머지가 자동으로 다시 번호가 매겨집니다.

<ol>에는 알아야 할 세 가지 속성이 있습니다. start는 목록이 시작하는 번호를 설정합니다:

<ol start="4">
  <li>계란을 휘젓으세요</li>
  <li>밀가루를 접으세요</li>
</ol>

그 목록은 4, 5로 실행됩니다. 목록이 다른 콘텐츠로 두 부분으로 나뉜 후 계속될 때 유용합니다.

type은 번호 매기기 스타일을 변경합니다: 숫자는 1(기본값), 문자는 A 또는 a, 로마 숫자는 I 또는 i.

<ol type="a">
  <li>증거를 모으세요</li>
  <li>요약을 작성하세요</li>
</ol>

그 목록은 1, 2 대신 a, b로 실행됩니다. 그리고 reversed는 역순으로 세어 내려가며, 이는 카운트다운이나 아래에서부터 위로 읽는 상위 5개 순위에 적합합니다:

<ol reversed>
  <li>동</li>
  <li>은</li>
  <li>금</li>
</ol>

순서 목록은 수열이 의미 있는 항목들을 표시합니다; <ol>은 생성된 값에서 각 <li>에 번호를 매기므로, 서수는 입력하는 콘텐츠가 아니며 항목이 이동할 때 올바르게 유지됩니다.

세 가지 속성이 번호 매기기를 제어합니다. start는 첫 번째 서수를 표시 스타일에 관계없이 정수로 설정하므로, 로마 숫자 목록에서 start="4"는 iv부터 시작합니다. type은 마커 스타일을 설정합니다: 1, A, a, I, 또는 i. reversed(부울 속성이며, 설정할 것이 없는 그 존재만이 값입니다)는 항목 수에서 1까지 역순으로 셉니다.

<ol type="I" start="4" reversed>
  <li>기초</li>
  <li>출시</li>
  <li>검토</li>
</ol>

스타일링이 숨길 수 있는 구분이 있습니다. type은 마커가 그려지는 방법만 변경합니다; 값은 보조 소프트웨어에 발표되고 start에 사용되며, 항상 기본 정수입니다. 따라서 문자로 스타일된 목록은 여전히 아래에서 위치 1, 2, 3입니다. 서수가 콘텐츠 자체의 일부일 때, 인용을 위해 번호가 매겨진 법적 조항, 텍스트에 서수를 하드코딩하는 것 위에 <ol>이 번호를 소유하도록 선택하세요. 왜냐하면 <li>의 하드코딩된 "3."은 다시 번호가 매겨지지 않을 것이고 화면 읽기 프로그램은 두 번 읽을 것입니다: 생성된 마커로 한 번, 텍스트로 한 번. 알아야 할 또 다른 제어: 개별 <li>의 value 속성은 그 항목의 번호를 재정의하고 목록이 거기서부터 계속 세어 내려갑니다.

Juno순서 목록 및 그 속성 레시피 단계처럼 순서가 중요할 때 <ol>을 사용하세요. 브라우저가 항목에 번호를 매깁니다. 단계를 추가하거나 제거하면, 번호들이 자동으로 수정되므로 1.이나 2.를 손으로 입력할 필요가 없습니다. 이전과 같은 <li> 항목들이지만, 다른 컨테이너일 뿐입니다.

Juno순서 목록 및 그 속성<ol>은 세 가지 편리한 속성을 제공합니다: 1 이외의 숫자부터 시작하는 start, 숫자 대신 문자나 로마 숫자를 위한 type, 역순으로 세기 위한 reversed. 이들은 모두 브라우저가 번호를 생성하도록 하므로, 이것이 순서 목록을 사용하는 이유입니다.

Juno순서 목록 및 그 속성type은 마커만 다시 스타일링합니다; 그 뒤의 값, start가 사용하는 것, 보조 기술이 읽는 것은 항상 정수입니다. <li>에 "3."을 손으로 입력하지 마세요. 다시 번호가 매겨지지 않을 것이고 화면 읽기 프로그램이 번호를 두 번 말할 것입니다. <ol>이 수를 소유하게 하고, 한 항목을 밀어야 할 때 단일 <li>에 value를 사용하세요.

설명 목록

각 항목이 정말로 쌍일 때 세 번째 종류의 목록이 있습니다: 단어와 그 의미, 레이블과 그 값. 용어집이 가장 명확한 예입니다. 각 용어 뒤에 그것이 의미하는 것이 따라옵니다.

이것은 **설명 목록**이며, 세 개의 태그를 사용합니다. <dl>은 전체를 감싸고, <dt>는 각 용어를 보유하고, <dd>는 그것과 함께 가는 설명을 보유합니다:

<dl>
  <dt>HTML</dt>
  <dd>페이지의 구조를 설명하는 언어입니다.</dd>
  <dt>CSS</dt>
  <dd>페이지가 어떻게 보이는지를 설명하는 언어입니다.</dd>
</dl>

브라우저는 각 설명을 그 용어 아래 들여쓴 상태로 표시하므로, 쌍이 한눈에 명확합니다. "dt"를 정의하는 단어로, "dd"를 정의로 생각하세요.

각 항목이 독립적인 것이 아니라 쌍일 때, 설명 목록이 <ul> 또는 <ol>보다 더 잘 맞습니다. 세 가지 요소로 만들어집니다: <dl>은 컨테이너, <dt>는 용어, <dd>는 그것과 묶인 설명입니다.

<dl>
  <dt>저자</dt>
  <dd>민지 김</dd>
  <dt>출판</dt>
  <dd>2024년 3월 14일</dd>
  <dt>읽기 시간</dt>
  <dd>6분</dd>
</dl>

이 예제는 용어집 너머의 두 번째 큰 용도를 보여줍니다: 키/값 메타데이터, 레이블과 그 값의 집합입니다. 그룹화는 유연합니다. 하나의 <dt> 뒤에 여러 <dd> 요소가 있을 수 있으며, 용어가 하나 이상의 설명을 가질 때, 여러 <dt> 요소가 하나의 <dd>를 공유할 수 있으며, 여러 용어가 같은 것을 의미할 때입니다. "이것, 그리고 그 세부 사항"이 자연스럽게 보일 때마다 <dl>을 사용하세요. 항목이 자신에게 있을 때는 <ul> 또는 <ol>을 사용하세요.

설명 목록은 이름을 값과 연결합니다. <dl>은 컨테이너입니다; <dt>는 용어(이름)입니다; <dd>는 설명(값)입니다. 브라우저와 보조 소프트웨어가 이해하는 구조는 그룹의 수열이며, 여기서 그룹은 하나 이상의 <dt> 요소 뒤에 하나 이상의 <dd> 요소가 있습니다.

<dl>
  <dt>저장소</dt>
  <dt>용량</dt>
  <dd>256 GB SSD</dd>

  <dt>색상</dt>
  <dd>흑연</dd>
  <dd>은</dd>
</dl>

이 유연성이 핵심입니다: 많은 용어가 하나의 설명을 공유할 수 있으며, 하나의 용어가 많은 설명을 가질 수 있습니다. 두 가지 실용적인 사용이 두드러집니다. 첫 번째는 용어 정의 콘텐츠(예: 용어집)입니다. 두 번째는 키/값 메타데이터, 사양 표 또는 게시물 세부 사항의 집합입니다. 여기서 각 레이블이 그 값과 쌍을 이룹니다; <dl>은 "이들은 이름/값 쌍입니다"라고 <div> 스택이 절대 하지 못하는 방식으로 말합니다. 이름 지정의 특이성에 주목하세요: <dt>와 <dd>는 역사적으로 "definition term" 및 "definition description"을 나타냈지만, 최신 사양은 의도적으로 사전 정의만이 아닌 모든 이름/값 연결로 이들을 확장했습니다. 콘텐츠가 페어링이 없는 평면 피어 목록이라면, <dl>은 잘못된 도구이고 <ul>은 정직한 도구입니다.

Juno설명 목록 설명 목록은 쌍을 위한 것입니다: 용어와 그 의미. 전체를 감싸기 위해 <dl>을 사용하고, 각 용어를 위해 <dt>를, 그 뒤에 오는 설명을 위해 <dd>를 사용하세요. 용어집이 머리에 보관할 그림입니다: 단어 그 다음 정의, 단어 그 다음 정의.

Juno설명 목록 각 항목이 쌍, 용어와 그 세부 사항 또는 레이블과 그 값일 때, 피어들의 집합이 아닐 때 <dl>에 도달하세요. 그룹화는 맞게 구부러집니다: 하나의 <dt>는 여러 <dd>들을 취할 수 있고, 여러 <dt>들은 하나의 <dd>를 공유할 수 있습니다. 저자와 날짜 같은 키/값 메타데이터는 용어집 너머에서 그 자리를 얻게 되는 곳입니다.

Juno설명 목록<dl>은 이름/값 쌍을 의미하고, 사양은 <dt>와 <dd>를 사전 정의 너머 모든 레이블과 값으로 확장했으므로, 메타데이터는 공정한 게임입니다. 많은 용어가 값을 공유할 수 있고 하나의 용어가 많은 값을 보유할 수 있으며, <div> 벽은 절대 표현할 수 없습니다. 항목들이 페어링할 것이 없는 피어들이라면, 그것은 <dl>이 아니라 <ul>입니다.

목록 중첩

목록들은 다른 목록 안으로 들어갈 수 있습니다. 메뉴는 "음료"에 위와 아래 옵션이 있을 수 있으며, 각각이 자신의 선택을 가질 수 있습니다. 하나의 목록을 다른 목록 안에 넣는 것을 **중첩**이라고 합니다.

올바르게 하기 위한 핵심: 내부 목록은 <li> 안으로 들어가며, 항목 사이에서 뜨지 않습니다. 전체 <ul> (또는 <ol>)을 그것이 속하는 목록 항목 안에 넣습니다:

<ul>
  <li>음료
    <ul>
      <li>커피</li>
      <li>차</li>
    </ul>
  </li>
  <li>간식</li>
</ul>

"커피"와 "차"는 "음료"의 일부이므로, 그들의 작은 목록은 "음료" 항목 안에 있습니다. 브라우저가 내부 목록을 조금 더 들여쓰므로, 그것이 위 항목에 속한다는 것을 알 수 있습니다.

일부 항목들이 다른 항목 아래에 속한다는 것을 보여주기 위해, 하나의 목록을 목록 안에 중첩시킵니다. 유효함을 유지하는 규칙: 중첩된 목록은 <li>의 자식이며, 외부 <ul> 또는 <ol>의 직속 자식이 아닙니다. 내부 목록은 그것이 확장하는 항목 안에 있습니다.

<ul>
  <li>과일
    <ul>
      <li>사과</li>
      <li>바나나</li>
    </ul>
  </li>
  <li>야채
    <ul>
      <li>당근</li>
      <li>시금치</li>
    </ul>
  </li>
</ul>

중첩할 때 유형들을 섞을 수 있으며, <ol>을 <ul> 안에 넣거나 그 반대로 하고, 콘텐츠가 정직하게 가는 만큼 깊게 중첩할 수 있습니다. 실제 코드에서 중첩된 목록을 만나는 가장 일반적인 장소는 부분 메뉴가 있는 네비게이션 메뉴입니다: 섹션의 최상위 목록, 각각은 자신의 <li> 안의 페이지들의 자신의 목록을 가집니다.

중첩은 계층 구조가 표현되는 방법입니다: 부분 목록은 그것이 속하는 <li> 안에 배치되며, 부모 <ul> 또는 <ol>의 직속 자식이 아닙니다. 잘못 처리하는 것(다른 <ul> 바로 안에 있는 <ul>)은 유효하지 않으며, 파서의 복구가 당신이 그려낸 것과 일치하지 않을 가능성이 있습니다.

중첩은 또한 들여쓰기를 볼 수 없는 사람들을 위해 구조가 비용을 치르는 곳입니다. 화면 읽기 프로그램은 각 레벨에 들어갈 때 목록, 그 항목 수, 그리고 그 중첩 깊이를 발표합니다: "목록, 3개 항목", 그러면 부분 목록에서 "목록, 2개 항목", 그리고 그들이 다시 벗어날 때 사용자에게 알립니다. 그 실행 중인 해설은 당신의 눈이 자유롭게 읽는 들여쓰기의 비시각적 동등물이며, 중첩이 항목들을 간격으로 밀어낸 것이 아닌 실제 마크업이어야만 존재합니다.

이것은 모든 목록에 대한 정직함 테스트로 이어집니다. 네비게이션 메뉴(방문자를 페이지 사이로 이동시키는 링크의 집합, 대부분의 사이트 상단의 행)는 정말로 목록이며 링크입니다. 따라서 의미적으로 올바른 마크업은 <ul>로 링크되며, 보통 네비게이션을 나타내는 리전으로 레이블을 지정하는 <nav> 요소 안에 있습니다. 나중에 CSS가 무엇을 만드는지 상관없이 콘텐츠가 관련 항목들의 집합일 때 실제 목록을 사용하세요. 그렇지 않을 때는 사용하지 마세요: 목록 간격을 빌리기 위해 관련 없는 블록들을 <li>들로 감싸는 것은 보조 소프트웨어에 "이 세 가지는 세 개 그룹입니다"라고 말할 때 그들이 아닙니다. 마커는 숨겨질 수 있고 레이아웃은 무엇이든 될 수 있습니다; <ul>, <ol> 또는 <dl>의 선택은 항상 콘텐츠가 정직하게 무엇인지에 응답해야 합니다.

Juno목록 중첩 목록을 목록 안에 넣으려면, 내부 목록을 그것이 속하는 <li> 안에 넣으세요. 항목 사이에서 느슨하게 넣지 마세요. 브라우저가 그것을 들여쓰므로 위 항목의 일부임을 알 수 있습니다. <li> 안이라는 규칙이 여기에서 기억해야 할 유일한 것입니다.

Juno목록 중첩 중첩된 목록은 항상 <li>의 자식이며, 외부 <ul> 또는 <ol>의 직속 자식이 아닙니다. <ol>을 <ul> 안에 섞을 수 있고 콘텐츠가 정말로 가는 만큼 깊게 갈 수 있습니다. 부분 메뉴가 있는 네비게이션 메뉴는 당신이 가장 많이 이것을 만날 곳이므로, 지금 편안하게 하는 것이 가치가 있습니다.

Juno목록 중첩 부분 목록을 자신의 <li> 안에 넣으세요. 화면 읽기 프로그램이 항목 수와 중첩 깊이를 읽어내며, 그 말해진 구조는 보지 못하는 사람을 위해 들여쓰기를 대체합니다. 네비게이션 메뉴는 정말로 링크의 목록이므로, 하나로 표시하세요. 간격을 빌리기 위해 관련 없는 블록들을 <li>들로 감싸지 마세요. 요소가 콘텐츠가 정직하게 무엇인지를 말하도록 하고, 나중에 그것을 어떻게든 스타일링하세요.