목록은 생각보다 흔합니다. 프로그래밍 수업을 들은 적이 있다면 첫 번째 프로젝트는 쇼핑 목록이나 할 일 목록을 만드는 것이었을 수도 있습니다. 목록입니다. 객관식 시험은 일반적으로 질문의 번호가 매겨진 목록입니다. 각 질문에 대한 여러 가능한 답변은 중첩된 목록입니다.
HTML은 목록을 마크업하는 몇 가지 방법을 제공합니다. 정렬된 목록 (<ol>), 정렬되지 않은 목록 (<ul>), 설명 목록 (<dl>)이 있습니다. 목록 항목 (<li>)은 정렬된 목록과 정렬되지 않은 목록 내에 중첩됩니다.
설명 목록에는 설명 용어(<dt>)와 설명 세부정보(<dd>.)가 있습니다. 여기에서 이러한 모든 내용을 다룹니다.
HTML 양식에서 <option> 요소 목록은 <select> 내의 <datalist>, <select>, <optgroup>의 콘텐츠를 구성합니다. 이러한 내용은 HTML 양식에 설명되어 있습니다.
메뉴와 순서가 지정되지 않은 목록에서 목록 항목은 일반적으로 글머리 기호를 사용하여 표시됩니다. 순서가 지정된 목록에서는 일반적으로 숫자나 문자 같은 오름차순 카운터가 앞에 옵니다. HTML 또는 CSS, 또는 둘 다를 사용하여 글머리 기호와 번호 매기기 순서를 제어하거나 반대로 할 수 있습니다.
기본적으로 순서가 지정된 목록과 순서가 지정되지 않은 목록 항목에는 숫자나 글머리 기호가 앞에 붙습니다. 하지만 목록이 목록처럼 보이지 않더라도 탐색 메뉴, 글머리 기호 대신 체크박스가 있는 할 일 목록, 객관식 시험의 참/거짓 질문과 같이 항목 목록이 필요한 경우가 있습니다. 글머리 기호가 없는 이러한 모든 목록에는 HTML 목록 요소를 사용하는 것이 적절합니다.
순서가 지정되지 않은 목록
<ul> 요소는 순서가 지정되지 않은 항목 목록의 상위 요소입니다. <ul>의 유일한 하위 요소는 하나 이상의 <li> 목록 항목 요소입니다. 머신 목록을 만들어 보겠습니다. 순서는 중요하지 않으므로 순서가 지정되지 않은 목록을 사용합니다 (사용자에게는 알리지 마세요).
기본적으로 순서가 지정되지 않은 각 목록 항목에는 글머리 기호가 앞에 붙습니다. 순서가 지정되지 않은 목록에는 요소별 속성이 없습니다.
</ul>로 목록을 닫아야 합니다.
순서가 지정된 목록
<ol> 요소는 순서가 지정된 항목 목록의 상위 요소입니다. <ol>의 유일한 하위 요소는 하나 이상의 <li> 요소 또는 목록 항목입니다.
이 경우 '글머리 기호'는 다양한 유형의 숫자입니다. 유형은 CSS에서 list-style-type 속성 또는 type 속성을 사용하여 정의할 수 있습니다.
<ol>에는 type, reversed, start라는 세 가지 요소별 속성이 있습니다.
열거된 type 속성은 번호 매기기 유형을 설정합니다. type에는 다섯 가지 유효한 값이 있으며 기본값은 숫자의 경우 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씩 감소합니다.
이 모든 것은 ::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개 있으므로 <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.</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에서 암시적 시맨틱을 삭제할 수 있습니다. 이는 버그가 아닌 기능입니다.
일반적으로 시맨틱 요소를 사용하는 경우 역할 속성을 추가할 필요가 없으므로 추가하지 않는 것이 좋습니다. 사용자가 목록에 있는 항목 수를 아는 것이 유용한 경우와 같이 사용자가 목록임을 정말로 알아야 하는 경우가 아니라면 목록에 항목을 추가할 필요도 없습니다.
설명 목록
설명 목록은 일련의 설명 용어(<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>를 포함하는 것이 유효한가요?
목록 유형을 정의하는 세 가지 요소를 선택합니다.
<il><ul><ol><dl>