[HTML] 10_목록 (ul / ol / 정의목록 : dl, dt, dd)

[순서]

⊙ 웹문서를 구조화할 때 주로 사용 (노출 시킬 의도X)

⊙ 종류

  - <ul> : 순서가 없는 목록

  - <ol> : 순서가 있는 목록

  - <il>  : 목록 안에 적힐 리스트 태그

 

 

[순서가 없는 목록 - ul]

 ⊙ 표시 방법 (type)

  - dics       : 색칠한 동그라미

  - circle     : 비어있는 동그라미

  - square  : 사각형

  - none     : 아무것도 없음

<ul type="square">
 <li>국어</li>
 <li>영어</li>
 <li>수학</li>
</ul>

 

[순서가 있는 목록 - ol]

 ⊙ 표시 방법 (type)

  - 1 |  A | a | Ⅰ | i

<ol type="a">
 <li>체육</li>
 <li>음악</li>
 <li>미술</li>
</ol>

 

[ul 태그의 중복]

<ul type="dics">
  <li>Coffee</li>
  <li>Tea</li>
    <ul type="circle">
      <li> Black tea</li>
      <li>Green tea</li>
    </ul>
  <li>Milk</li>  
</ul>

 

[정의 목록]

 ⊙ dl : 용어의 목록

 ⊙ dt : 용어의 제목

 ⊙ dd : 용어의 설명

<dl>
 <dt>Coffee</dt>
 <dd>- black hot drink</dd>
</dl>
<dl>
 <dt>Milk</dt>
 <dd>- whie cold drink</dd>
</dl>

 

 

[대, 중, 소 세분류]

 

<h1 style="dispaly : none">스포츠</h1>
  <h2>축구</h2>
    <ul type="dics">
      <li>영상</li>
      <li>일정</li>
      <li>순위</li>      
    </ul>
  <h2>야구</h2>
  <h2>농구</h2>
<h1>뉴스</h1>
<h1>연예</h1>
<h1>자동차</h1>

⊙ style="dispaly : none" 

  → 실제 문서에는 존재하지만 화면상에서는 보이지 않음