[Html] 리스트 요소 - 비순서, 순서, 정의 목록

목록(List)

• 목록 태그는 주로 내비게이션 메뉴를 만들 때 자주 사용되며, 중첩도 가능하다.

 

순서가 없는 리스트(Unordered List)

• 리스트 앞에 검정색 작은 원이 위치하는데, CSS의 list-style-type 속성을 사용하면 마커를 다른 모양으로 변경할 수 있다.
  • disc : 검정색 작은 원 모양 (기본설정)
  • circle : 흰색 작은 원 모양
  • square : 사각형 모양

<ul style="list-style-type: square">
    <li>수박</li>
    <li>참외</li>
    <li>옥수수</li>
</ul>

 

순서가 있는 리스트(Ordered List)

• start 속성으로 리스트 시작값을 정할 수 있으며, value 속성으로 해당 리스트 순번을 정하고, reversed로 리스트 역순을 표현할 수 있다.
• type 속성값으로, “1” : 숫자 (기본값), “A” : 대문자 알파벳, “a” : 소문자 알파벳, “I” : 대문자 로마숫자, “i” : 소문자 로마숫자을 변경할 수 있다.

<ol start="3">
  <li value="2">Coffee</li>
  <li value="4">Tea</li>
  <li>Milk</li>
</ol>

<ol type="I" reversed>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

 

정의 리스트(description list)

• 정의 리스트는 용어와 그에 대한 정의를 모아놓은 리스트로, <dt>에는 용어 이름이 들어가고 <dd>에는 해당 용어에 대한 정의가 들어간다.

<dl>
    <dt>호박</dt>
    <dd>- 박과의 한해살이 덩굴성 채소</dd>
    <dt>상추</dt>
    <dd>- 국화과의 한해살이 또는 두해살이풀</dd>
</dl>

 

Reference

• http://www.tcpschool.com/
• https://poiemaweb.com/