리스트 태그, 종류, 특징, 서브메뉴 구현하기

*리스트 태그

※ li는 동일한 중요도의 목록들이 여러개 나올때 사용

   ul에 li하나만 있는것은 사용하지 않는다.

 

 

- ul 밑에는 반드시 li만 와야함

  제목쓰려면 ul위나 li안에만

- unordered list : 비순차 목록 (가장 많이 쓰임)

<ul>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
</ul>

ul쓰임

 

- ordered list : 순차 목록

<ol>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
</ol>

ol쓰임

 

- Definition list 정의 목록

용어1 설명 다수
<dl>
    <dt>definition term</dt>
    <dd>definition description</dd>
    <dd>definition description</dd>
    <dd>definition description</dd>
    <dd>definition description</dd>
</dl>

용어1 설명1
<dl>
    <dt>definition term</dt>
    <dd>definition description</dd>
    <dt>definition term</dt>
    <dd>definition description</dd>
    <dt>definition term</dt>
    <dd>definition description</dd>
</dl>

*바람직하지 않은 쓰임
용어 다수 설명1
<dl>
    <dt>definition term</dt>
    <dt>definition term</dt>
    <dt>definition term</dt>
    <dd>definition description</dd>
</dl>

 

dt : 용어

dd : 용어에 대한 설명

*리스트 안에서 제목 성격 넣고 싶을때 적합

 

ex) daum에서 더보기 눌렀을때 커뮤니케이션 미디어 등에 아래쪽에 나오는 내용들

dt와 dd 쓰임의 예