들어가기 전에
리스트는 일련된 항목들이 나열된 것들을 의미합니다.
콘텐츠가 많은 포털이나 검색 엔진같은 사이트에는 분야나 항목으로 구분할 것이 많으므로 리스트가 자주 사용됩니다.
상황에 따라 리스트를 표현하는 여러 가지 태그들에 대하여 알아보도록 하겠습니다.
핵심키워드
- ul
- ol
- dl
학습하기
6) 리스트 요소
<ul>
ul(unordered list) 태그는 순서가 없는 리스트를 표현할 때 사용합니다.
<ul>
<li> 콩나물</li>
<li> 파</li>
<li> 국 간장</li>
...
</ul>
콩나물국에 들어가는 일부 재료들을 나열한 리스트입니다.
각 재료는 나오는 순서가 바뀌어도 상관이 없으므로 이러한 것은 순서가 없는 리스트로 표현할 수 있습니다.
<ul>을 선언한 후 그 안에서 <li>를 사용해 각 항목을 나타내서 사용합니다.
<ol>
ol(ordered list) 태그는 순서가 있는 리스트를 표현할 때 사용합니다.
<ol>
<li>냄비에 국물용 멸치를 넣고 한소끔 끓여 멸치 육수를 7컵(1,400ml) 만든다.</li>
<li>콩나물을 넣고 뚜껑을 덮어 콩나물이 익을 때까지 끓인다.</li>
<li>뚜껑을 열고 대파, 마늘, 고춧가루를 넣고 끓인다.</li>
...
</ol>
콩나물국을 끓이는 순서를 나열한 리스트입니다.
이 순서는 서로 바뀌면 안 되기 때문에 순서가 있는 <ol>을 사용해야 합니다.
<ol>을 선언한 후 그 안에서 <li>를 사용해 각 항목을 나타내서 사용합니다.
<dl>태그
dl(definition/description list) 태그는 용어와 그에 대한 정의를 표현할 때 사용합니다.
<dl>은 앞서 배운 <ul>, <ol>과는 구조가 조금 다릅니다.
<ul>, <ol>은 항목을 단순히 나열하는 구조지만,
<dl>은 용어와 설명이 하나의 세트로 항목을 이루고 하나 이상의 항목으로 리스트가 이루어지는 구조입니다.
<dl>
<dt>리플리 증후군</dt>
<dd>허구의 세계를 진실이라 믿고 거짓된 말과 행동을 상습적으로 반복하는 반사회적 성격장애를 뜻하는 용어</dd>
<dt>피그말리온 효과</dt>
<dd>타인의 기대나 관심으로 인하여 능률이 오르거나 결과가 좋아지는 현상</dd>
<dt>언더독 효과</dt>
<dd>사람들이 약자라고 믿는 주체를 응원하게 되는 현상</dd>
</dl>
- <dt> : 용어를 나타내는 태그
- <dd> : 용어에 대한 정의 또는 설명을 나타내는 태그
용어 하나에 여러 정의가 들어갈 때, <dd>를 한 개 이상 쓰는 것이 가능합니다.
참고링크
- <ul>: The Unordered List element
https://developer.mozilla.org
- The HTML ul element represents an unordered list of items, typically rendered as a bulleted list.
- <ol>: The Ordered List element
https://developer.mozilla.org
- The HTML ol element represents an ordered list of items, typically rendered as a numbered list.
- <dl>: The Description List element
https://developer.mozilla.org
- The HTML dl element represents a description list. The element encloses a list of groups of terms (specified using the dt element) and descriptions (provided by dd elements). Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs).
comment
완료
ol: 순서 있는 리스트 사용하는 태그
ul: 순서 없는 리스트 사용하는 태그
-> 위 태그를 선언하고 그 안에는 <li> 태그를 사용, 그 외에의 태그는 불가하지만 <li> 태그 안에서는 사용가능
dl: 용어와 그에 대한 정의를 사용하는 태그
-> 용어를 나타나는 태그는 <dt>, 그에 대한 정의 또는 설명의 태그는 <dd>
ol: 순서가 있는 리스트
ul: 순서가 없는 리스트
dl: 사전 리스트
- ol: 순서가 있는 리스트. 번호가 있는 리스트.
- ul: 순서가 없는 리스트. * < 이런것들.
- dl: 사전처럼 만들 수 있는 리스트. 자동으로 들여쓰기가 된다.
1.4
2023년 12월 16일 토요일 학습완료!
list 일련된 항목들이 나열된 것
<ul>
unordered list
순서가 없는 리스트
하위태그 - <li>
<ol>
ordered list
순서가 있는 리스트
하위태그 - <li>
<dl>
정의 definition, 설명기술 description list - 하나의 세트로 사용
하위태그 - <dt>, <dd>
dt 용어
dd 용어에 대한 정의 또는 설명
용어 하나에 여러개의 정의 가능
***<ol>, <ul> 자식요소는 <li>만 가능
<li>는 <ol>, <ul>만을 부모로 가진다
***<li>는 중첩 가능
230201
2023.01.06
2022/11/05
<ul>, <ol>, <dl>-<dt>,<dd>
<li></li>
ul, ol, dl
<ul> : unordered list, 순서가 없는 리스트
ul-li(항목)
<ol> : ordered list, 순서가 있는 리스트
ol-li(항목)
<dl> : description list, 용어를 설명하는 리스트
<dt> : definition term, 용어 구분
<dd> : definition description, 용어 정의
<ol> : ordered list
순서가 정해져 있는 리스트, <li>태그와 함께 사용
<ul> : unordered list
순서가 상관 없는 리스트, <li>태그와 함께 사용
<dl> : definition/description list
용어와 설명이 하나의 세트인 리스트
<dt> , <dd>과 함께 쓴다.
<ol> : ordered list
<ul> : unordered list
<dl> : definition/description list
리스트(list - ul, ol, dl)
리스트 : 일련된 항목들 나열
콘텐츠가 많은 웹페이지일수록 분야, 항목 등으로 리스트를 많이 사용
UL(unordered list)
<h1>과일 보유 리스트</h1>
<ul>
<li>배</li>
<li>바나나</li>
<li>사과</li>
<li>토마토</li>
</ul>
<ul> : unordered list
순서 상관없는 항목들 나열할 때 사용
<h1>과일 품종 리스트</h1>
<ul>
<li>
배
<ul>
<li>원황</li>
<li>황금배</li>
<li>만풍배</li>
</ul>
</li>
<li>
사과
<ul>
<li>아오리</li>
<li>홍로</li>
<li>양광</li>
<li>부사</li>
</ul>
</li>
</ul>
이렇게 리스트 중첩 가능
OL(ordered list)
<h1>과일 판매 순위 리스트</h1>
<ul>
<li>배</li>
<li>바나나</li>
<li>사과</li>
<li>토마토</li>
</ul>
<ol> : ordered list
순서가 있는 항목들 나열할 때 사용
DL(description list / definition list)
<h1>과일 사전</h1>
<dl>
<dt>사과</dt>
<dd>사과는 사과나무의 열매로...</dd>
</dl>
= 용어 정의할 때 사용
<dt> 태그(definition term) 안에 용어를 쓰고,
<dd> 태그(definition description) 안에 정의를 쓰는 구조
list 관련 태그
<ol> : ordered list
<ul> : unordered list
<dl> : definition/description list
하위 태그 - <dt> , <dd>
definition term 용어 구분
definition description 용어에 대한 정의/설명
<body>
<h1>hello, html</h1>
<div>
<div>
<ol>
<li>부스트코스에 로그인한다</li>
<li>강의를 듣는다</li>
<li>복습한다</li>
</ol>
</div>
<div>
<dl>
<dt>리플리 증후군</dt>
<dd>허구의 세계를..</dd>
<dt>피그말리온효과</dt>
<dd>허구의 세계를..</dd>
<dt>언더독 효과</dt>
<dd>허구의 세계를..</dd>
<dd>허구의 세계를..</dd>
<dd>허구의 세계를..</dd>
</dl>
</div>
<div>
<h1>월드컵 조 편성</h1>
<ol>
<li>A조
<ul>
<li>대한민국</li>
</ul>
<ul>
<li>이집트</li>
</ul>
<ul>
<li>러시아</li>
</ul>
<ul>
<li>스위스</li>
</ul>
</li>
</ol>
</div>
</div>
</body>
22.4.1
<body>
<h1>월드컵 조편성</h1>
<h3>
<ol>
<li>
<dl>
<dt>A조</dt>
<dd>러시아,우루과이,이집트,사우디아라비아</dd>
</dl>
</li>
</ol>
</h3>
</body>
<ul>
<li></li>
</ul>
<ol>
<li></li>
<ol>
<dl>
<dt></dt>
<dd></dd>
</dl>