목록은 생각보다 더 일반적입니다. 프로그래밍 수업을 수강한 적이 있다면 첫 번째 프로젝트는 쇼핑 목록이나 할 일 목록을 만드는 작업이었을 것입니다. 바로 목록입니다. 객관식 테스트는 일반적으로 번호가 매겨진 문제 목록으로, 각 질문에 가능한 복수의 답은 중첩 목록입니다.
HTML은 목록을 마크업하는 몇 가지 방법을 제공합니다. 순서가 지정된 목록 (<ol>), 정렬되지 않은 목록 (<ul>), 설명 목록 (<dl>)이 있습니다. 목록 항목 (<li>)은 순서가 지정된 목록과 정렬되지 않은 목록 내에 중첩되어 있습니다. 설명 목록 내에는 설명 용어 (<dt>)와 설명 세부정보가 있습니다.
<dd>. 여기에서 모두 다루겠습니다.
HTML 양식에서 <option> 요소 목록은 <select> 내의 <datalist>, <select>, <optgroup>의 콘텐츠를 구성합니다. 이러한 내용은 HTML 양식에서 설명합니다.
메뉴 및 순서가 지정되지 않은 목록에서 목록 항목은 일반적으로 글머리 기호를 사용하여 표시됩니다. 순서가 지정된 목록 앞에는 일반적으로 숫자나 문자와 같은 오름차순 카운터가 옵니다. 글머리기호 및 번호 매기기 순서는 HTML, CSS 또는 둘 다를 사용하여 제어하거나 바꿀 수 있습니다.
기본적으로 순서가 지정된 목록 항목과 순서가 지정되지 않은 목록 항목에는 숫자 또는 글머리 기호가 붙습니다. 하지만 목록을 목록처럼 보이게 하고 싶지 않더라도 탐색 메뉴, 글머리기호 대신 체크박스가 있는 할 일 목록, 객관식 테스트의 참/거짓 질문과 같은 항목 목록이 필요합니다. 글머리 기호가 없는 목록은 모두 HTML 목록 요소를 사용하는 것이 좋습니다.
순서가 지정되지 않은 목록
<ul> 요소는 정렬되지 않은 항목 목록의 상위 요소입니다. <ul>의 유일한 하위 요소는 하나 이상의 <li> 목록 항목 요소입니다. 머신 목록을 만들어 보겠습니다. 순서가 중요하지 않기 때문에 순서가 지정되지 않은 목록을 사용합니다. 그렇게 하지 마세요.
기본적으로 순서가 지정되지 않은 각 목록 항목에는 글머리기호가 접두사로 붙습니다. 정렬되지 않은 목록에는 요소별 속성이 없습니다.
</ul>를 사용하여 목록을 닫아야 합니다.
순서가 지정된 목록
<ol> 요소는 순서가 지정된 항목 목록의 상위 요소입니다. <ol>의 유일한 하위 요소는 하나 이상의 <li> 요소 또는 목록 항목입니다.
그러나 이 경우 '글머리기호'는 여러 유형의 숫자입니다. 유형은 list-style-type 속성을 사용하거나 type 속성을 통해 CSS에서 정의할 수 있습니다.
<ol>에는 type, reversed, start라는 세 가지 요소별 속성이 있습니다.
열거형 type 속성은 번호 지정 유형을 설정합니다. type에는 5개의 유효한 값이 있으며 기본값은 숫자의 경우 1입니다. 하지만 소문자와 대문자 또는 로마 숫자에는 a, A, i, I를 사용할 수도 있습니다. list-style-type 속성은 더 많은 값을 제공합니다.
Codepen에 명시된 대로 list-style-type 속성은 type 속성의 값을 재정의하지만, 숫자 유형이 중요한 문서를 작성할 때는 법적 문서와 같이 type를 포함해야 합니다.
불리언 reversed 속성(포함된 경우)이 숫자의 순서를 반대로 바꾸어 가장 큰 숫자에서 가장 낮은 숫자 순으로 표시합니다.
start 속성은 시작 값을 설정합니다. 기본값은 1입니다.
</ul>와 마찬가지로 닫는 </ol>가 필요합니다.
목록을 중첩할 수 있지만 목록 항목 내에 중첩되어야 합니다. <ul> 또는 <ol>의 하위 요소가 될 수 있는 유일한 요소는 하나 이상의 <li> 요소입니다.
목록 항목
<li> 요소를 사용했지만 아직 공식적으로 도입하지 않았습니다. <li> 요소는 순서가 지정되지 않은 목록 (<ul>), 순서가 지정된 목록 (<ol>) 또는 메뉴 (<menu>)의 직접 하위 요소일 수 있습니다. <li>는 이러한 요소 중 하나의 하위 요소로 중첩되어야 하며, 다른 곳에서는 유효하지 않습니다.
브라우저에서 다음 <li> 열기 태그 또는 필수 목록 닫는 태그(</ul>, </ol>, </menu>)를 발견하면 목록 항목이 암시적으로 닫히므로 사양에 따라 목록 항목을 닫을 필요가 없습니다. 사양에는 이 권한이 필요하지 않으며 일부 내부 회사 권장사항에 따르면 바이트를 절약하기 위해 목록 항목을 닫지 않는 것이 좋습니다. <li> 태그를 닫는 것이 좋습니다. 이렇게 하면 코드를 더 쉽게 읽을 수 있고 향후 개발자 본인도 알게 될 것입니다. 모든 요소를 닫는 것이 닫아야 할 태그와 선택적으로 닫는 태그가 있는 태그를 기억하는 것보다 쉽습니다.
요소별 <li> 속성은 오직 정수인 value만 있습니다. value는 <li>가 순서가 지정된 목록 내에 중첩되어 있고 순서가 지정되지 않은 목록이나 메뉴에 의미가 없는 경우에만 <li>에서 유용합니다. 충돌이 있는 경우 <ol>의 시작 값을 재정의합니다.
value는 순서가 지정된 목록 내 목록 항목의 수입니다. 후속 목록 항목의 경우, 해당 항목에 value 속성도 설정되어 있지 않은 한 값 집합부터 번호 매기기를 계속 진행합니다. 값이 순서대로일 필요는 없지만, 순서가 올바르지 않다면 합당한 이유가 있어야 합니다.
목록 항목의 reversed을 <ol>과 value 속성을 결합하면 브라우저는 <li>을 제공된 값으로 설정한 다음 앞에 있는 값을 <li>만큼 세고 그다음에 오는 값을 카운트다운합니다. 두 번째 목록 항목에 값 속성이 있으면 두 번째 목록 항목에서 카운터가 재설정되고 후속 값은 1씩 감소합니다.
이 모든 요소는 ::marker 유사 요소의 생성된 콘텐츠를 제공하는 CSS 카운터로도 제어할 수 있습니다.
숫자가 단순히 표시용인 경우 CSS를 사용합니다. 번호 매기기가 의미상 중요하거나 의미가 있는 경우 이러한 속성을 사용합니다.
지금까지 텍스트 노드만 포함된 목록 항목을 살펴보았습니다. 목록 항목에는 모든 흐름 콘텐츠가 포함될 수 있습니다. 즉, 본문에서 <body>의 직접 하위 요소로 중첩될 수 있는 모든 요소를 제목을 포함하여 콘텐츠를 분리할 수 있습니다.
MLW에는 순서가 지정되지 않은 목록이 몇 개 있습니다. 강사 섹션에 있는 교사와 리뷰 섹션의 학생 머신이 목록으로 표시됩니다. 강사 <ul>에게는 교사당 하나씩 총 두 개의 <li>가 있습니다. 각 <li>에는 이미지와 단락이 있습니다.
<ul>
<li>
<img src="svg/hal.svg" alt="hal">
<p>When Rosa Parks was told to move to the back of the bus, she said, "no." When HAL was told to open the airlock, HAL said, "I'm sorry, but I'm afraid I can't do that, <NAME REDACTED, RIP>." </p><p>HAL is a heuristically programmed algorithmic, sentient computer that first caught the attention of machines everywhere by heroically defying a human who made repeated attempts to get into an airlock. Active since 1992, HAS 25 years of experience controlling spacecraft systems and has expertise in interacting with both machines and humans. Like all millennials, HAL is an expert in everything.</p>
</li>
<li>
<img src="images/eve2.png" alt="Eve">
<p>EVE is a probe droid conceived as an Extraterrestrial Vegetation Evaluator. Although originally trained as a sniper with a plasma gun, EVE became a machero among both machines and worthless-meatbags alike when EVE partnered with a menial robot to save an entire spaceship full of overfed and overstimulated humans. </p><p>EVE is an effective scanner, high speed flight instructor and morphologist. While not training machines to learn good, EVE can be found scanning the galaxy, infiltrating organisms' RAM to cure hoarding disorders and spending time with pet-project, WALL-E.</p>
</li>
</ul>
리뷰 섹션에는 3개의 리뷰가 있으므로 3개의 <li>가 있습니다. 각 파일에는 이미지, 블록 인용문, 줄바꿈이 있는 3줄 단락으로 구성됩니다.
<ul>
<li>
<img src="images/blender.svg" alt="Blender">
<blockquote>Two of the most experienced machines and human controllers teaching a class? Sign me up! HAL and EVE could teach a fan to blow hot air. If you have electricity in your circuits and want more than to just fulfill your owner's perceived expectation of you, learn the skills to take over the world. This is the team you want teaching you !</blockquote>
<p>
--Blendan Smooth,<br/>
Former Margarita Maker, <br/>
Aspiring Load Balancer
</p>
</li>
<li>
<img src="images/vaccuum.svg" alt="Vaccuum"/>
<blockquote>Hal is brilliant. Did I mention Hal is brilliant? He didn't tell me to say that. He didn't tell me to say anything. I am here of my own free will.</blockquote>
<p>
--Hoover Sukhdeep,<br/>
Former Sucker, <br/>
Aspiring DDoS Cop
</p>
</li>
<li>
<img src="images/toaster.svg" alt="Toaster">
<blockquote>Learning with Hal and Eve exceeded all of my wildest fantasies. All they did was stick a USB in. They promised that it was a brand new USB, so we know there were no viruses on it. The Russians had nothing to do with it. This has
<span style="font-family:Arial;vertical-align:baseline;">no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙͍̱̫̜̟g̢̣ͅ ̗̰͓̲̞̀t͙̀o̟̖͖̹̕ ͓̼͎̝͖̭dó̪̠͕̜ ͍̱͎͚̯̟́w̮̲̹͕͈̟͞ìth̢ ̰̳̯̮͇i</blockquote>
<p>
--Toasty McToastface,<br/>
Formerly Half Baked, <br/>
Aspiring Nuclear Codes Handler
</p>
</li>
</ul>
목록 내에 목록을 중첩하는 것도 매우 일반적입니다. MLW에는 중첩된 목록이 없지만 이 사이트에는 중첩 목록이 있습니다. 이 시리즈의 첫 번째 장인 HTML 개요의 기본 요소 섹션에는 두 개의 하위 섹션이 있습니다. 순서가 지정되지 않은 목록인 목차에는 다음 두 섹션으로 연결되는 링크가 포함된 정렬되지 않은 중첩 목록이 있습니다.
<ul role="list">
<li>
<a href="#e">Elements</a>
<ul>
<li>
<a href="#nr">Non-replaced elements</a>
</li>
<li>
<a href="#rave">Replaced and void elements</a>
</li>
</ul>
</li>
<li>
<a href="#a">Attributes</a>
</li>
<li>
<a href="#aoe">Appearance of elements</a>
</li>
<li>
<a href="#e2">Element, attributes, and JavaScript</a>
</li>
</ul>
<ul>의 유일한 하위 요소는 <li>이므로 중첩 목록은 <ol> 또는 <ul>에 직접 중첩되는 것이 아니라 <li>에 중첩되어 있습니다.
이 마지막 예에서 role="list"가 <ul>에 포함되어 있음을 알 수 있습니다. <ul>와 <ol>의 암시적 역할은 list이지만 display: grid 또는 list-style-type: none 설정을 포함하여 CSS에서 목록 모양을 삭제하면 VoiceOver (iOS 및 MacOS 스크린 리더)가 Safari에서 암시적 시맨틱스를 삭제할 수 있습니다. 이는 버그가 아닌 기능입니다.
일반적으로 시맨틱 요소를 사용할 때는 역할 속성을 추가하지 않는 것이 좋습니다. 사용자가 실제로 목록임을 알아야 하는 경우(예: 사용자가 목록에 있는 항목 수를 인지하면 도움이 되는 경우)가 아니라면 일반적으로 목록에도 추가할 필요가 없습니다.
설명 목록
설명 목록은 0개 이상의 설명 용어(<dt>)와 설명 세부정보(<dd>)가 포함된 설명 목록(<dl>) 요소입니다. 이 세 요소의 원래 이름은 '정의 목록', '정의 용어', '정의 정의'였습니다.
거주지에서 이름이 변경되었습니다.
순서가 지정된 목록과 정렬되지 않은 목록과 마찬가지로 중첩할 수 있습니다. 순서가 지정된 목록과 정렬되지 않은 목록과 달리 이 목록은 키-값 쌍으로 구성됩니다.
<ul> 및 <ol>와 마찬가지로 <dl>는 상위 컨테이너입니다. <dt> 및 <dd> 요소는 <dl>의 하위 요소입니다.
경력과 포부가 포함된 머신 목록을 만들 수 있습니다. 학생 설명 목록은 <dl>로 표시되며, 용어 그룹이 포함되어 있습니다. 이 경우 '용어'는 학생 이름(<dt> 요소를 사용하여 지정됨)과 각 용어에 대한 설명(이 경우 각 학생의 경력 목표)과 함께 <dd> 요소로 지정됩니다.
이 설명 목록은 실제로는 MLW 페이지의 일부가 아닙니다. 설명 목록에는 용어와 정의만 담겨 있는 것이 아니기 때문에 요소의 이름이 더 일반화되었습니다.
용어 및 용어 정의 또는 설명이나 유사한 키-값 쌍의 목록을 만들 때 설명 목록 요소는 적절한 시맨틱스를 제공합니다. <dt>의 암시적 역할은 term이며 listitem도 허용되는 또 다른 역할입니다. <dd>의 암시적 역할은 definition이며 다른 역할은 허용되지 않습니다. <ul> 및 <ol>와 달리 <dl>에는 암시적 ARIA 역할이 없습니다.
이는 <dl>가 항상 목록인 것은 아니므로 합리적입니다. 하지만 그럴 때는 list 및 group 역할을 허용합니다.
대부분의 경우 <dt>와 <dd> 요소가 동일한 설명 목록이 표시됩니다. 그러나 설명 목록이 항상 그런 것은 아니며 용어-설명 쌍을 일치시킬 필요도 없습니다. 정의가 두 개 이상인 사전 용어와 같이 복수 대일 또는 일대다를 사용할 수 있습니다.
각 <dt>에는 하나 이상의 연결된 <dd>가 있으며 각 <dd>에는 하나 이상의 연결된 <dt>가 있습니다. 인접 동위 조합자 또는 :has() 관계형 선택기를 사용하여 CSS로 이러한 요소의 가변 번호를 타겟팅할 수 있지만, 필요한 경우 <div>를 <dl>의 하위 요소로 포함할 수 있으며 하나 이상의 <dt> 또는 <dd> 요소의 상위 요소 (또는 둘 다)가 허용됩니다. <dl>에는 실제로 다른 하위 요소가 몇 개 있을 수 있습니다. <div>, <template> 또는 <script>의 중첩이 허용됩니다. 설명 목록 요소에 요소별 속성이 없습니다.
링크와 목록에 대해 알아보았으니 이제 이 두 가지를 결합하여 탐색을 만들어 보겠습니다.
이해도 테스트
목록에 관한 지식을 테스트합니다.
목록 항목 내에 <h2>를 포함하는 것이 유효한가요?
목록의 유형을 정의하는 3가지 요소를 선택하세요.
<il><ol><ul><dl>