비전공자를 위한 HTML/CSS-리스트 요소

<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).