목록은 생각보다 더 일반적입니다. 프로그래밍 수업을 들어본 적이 있다면 가장 먼저 해야 할 일은 프로그래밍 수업을 듣는 것이 쇼핑 목록이나 할 일 목록을 생성할 수 있습니다 목록입니다. 객관식 시험은 보통 번호가 매겨진 질문 목록으로, 가능한 복수의 정답을 맞혀야 합니다. 중첩 목록입니다.
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 속성을 사용하여 CSS에서 정의할 수 있습니다.
또는 type 속성을 통해 이 속성을 사용할 수 있습니다.
<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 속성도 설정되어 있지 않아야 합니다. 값이 순서대로 될 필요는 없습니다. 하지만 올바른 순서로 되어 있지 않다면
타당한 이유가 있어야 합니다.
<ol>의 reversed를 목록 항목의 value 속성과 결합하면 브라우저에서 <li>를
그 뒤에 오는 <li>는 카운트다운하고 그 뒤에 오는 <li>는 카운트다운합니다. 두 번째 목록 항목에 값 속성이 있으면
카운터가 두 번째 목록 항목에서 재설정되고 후속 값은 1씩 감소합니다.
이 모든 것은 CSS 카운터로도 제어할 수 있습니다.
::marker 의사 요소의 생성된 콘텐츠 제공
숫자가 순전히 프레젠테이션용인 경우 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개 있으므로 <li>도 3개 있습니다. 각 텍스트에는 이미지, 블록 인용, 두 줄바꿈이 있는 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>이므로 중첩 목록은 <li>에 중첩되어 있고 <ol>나 <ul>에는 직접 중첩되지 않습니다.
이 마지막 예에서 role="list"가 <ul>에 포함된 것을 확인할 수 있습니다. 둘 다 암시적 역할이지만
<ul> 및 <ol>가 list이며 display: grid 또는 list-style-type: none 설정을 포함하여 CSS로 목록 모양을 삭제합니다.
을 사용하면 VoiceOver (iOS 및 MacOS 스크린 리더)가 Safari에서 암시적 의미 체계를 삭제하도록 할 수 있습니다. 이 기능은 버그가 아닌 기능입니다.
일반적으로 시맨틱 요소를 사용할 때는 역할 속성이 필요하지 않으므로 추가하지 않아야 합니다. 일반적으로
목록에 추가할 수도 있습니다.
설명 목록
설명 목록은 다음을 포함하는 설명 목록 (<dl>) 요소입니다.
일련의 (0개 이상) 설명 용어 (<dt>) 및
설명 세부정보 (<dd>) 이 세 요소의 원래 이름은
'정의 목록'이었고 '정의 용어'를 '정의 정의'입니다.
현재 표준 환경에서 이름이 변경되었습니다.
순서가 지정된 목록과 정렬되지 않은 목록과 마찬가지로 중첩될 수 있습니다. 순서가 지정된 목록과 정렬되지 않은 목록과 달리 키-값 쌍으로 구성됩니다.
<ul> 및 <ol>와 마찬가지로 <dl>는 상위 컨테이너입니다. <dt> 및 <dd> 요소는 <dl>의 하위 요소입니다.
경력과 포부가 담긴 머신 목록을 만들 수 있습니다. 학생 설명 목록(<dl>로 표시)
용어 그룹을 포괄하는 용어(이 경우 "약관" <dt> 요소를 사용하여 지정되는 학생 이름(설명과 함께)
학기마다(이 경우 각 학생의 커리어 목표) <dd> 요소로 지정됩니다.
이 설명 목록은 실제로는 MLW 페이지의 일부가 아닙니다. 설명 목록은 용어와 정의뿐 아니라 요소의 이름이 더 일반적으로 된 이유를 알아봤습니다.
용어와 그 정의 또는 설명 또는 유사한 키-값 쌍 목록을 작성할 때 설명란에
적절한 시맨틱스를 제공합니다 <dt>의 암시적 역할은 term이며 listitem는 또 다른 허용되는 역할입니다. 포드의 암시적 역할은
<dd>은 다른 역할이 허용되지 않는 definition입니다. <ul> 및 <ol>와 달리 <dl>에는 암시적 ARIA 역할이 없습니다.
이는 <dl>가 항상 목록이 아니기 때문입니다. 그러나 그럴 때는 list 및 group 역할을 허용합니다.
대부분의 경우 동일한 수의 <dt> 및 <dd> 요소가 있는 설명 목록을 볼 수 있습니다. 하지만 설명 목록이 항상
검색어-설명 쌍을 일치시키지 않아도 됩니다. 1대 1로 또는 1대2로 표현할 수 있습니다(예: 사전 용어).
정의할 수 있습니다
각 <dt>에는 연결된 <dd>가 하나 이상 있으며 각 <dd>에는 연결된 <dt>가 하나 이상 있습니다. Cloud Shell에서
인접 형제 결합자 또는 :has() 관계형 결합자 사용
선택 도구를 사용하여 CSS로 이러한 요소의 변수 번호를 타겟팅할 수 있으며, 필요한 경우
<dl>의 하위 요소로서 <div>, 하나 이상의 <dt> 또는 <dd> 요소 (또는 둘 다)의 상위 요소가 허용됩니다. <dl>는 실제로
다른 하위 요소가 몇 개 있는 경우 <div>, <template> 또는 <script>를 중첩할 수 있습니다. 요소 관련 속성을 갖는 설명 목록 요소가 없습니다.
지금까지 링크와 목록을 이해했으니 이제 두 링크를 합쳐 탐색을 만들어 보겠습니다.
이해도 확인
목록에 관한 지식을 테스트합니다.
목록 항목 내에 <h2>를 포함하는 것이 유효한가요?
목록의 유형을 정의하는 세 가지 요소를 선택합니다.
<il><ol><ul><dl>