02_html : 목록 관련 태그<ul, li, ol, dl>

---

목록 관련 태그

 

---

 

<ul>

- 순서 없는 목록 태그

- 리스트 앞에 ● 붙어서 출력

( ● 모양은 css로 수정가능)

 

<li> 

- 리스트 요소 등록

 

<ul>
    <li>HTML5</li>
    <li>CSS3</li>
    <li>JavaScript</li>
</ul>

 

 

<ol>

- 순서 있는 목록 태그

숫자로 표기
<ol>
   <li>HTML5</li>
   <li>CSS3</li>
   <li>JavaScript</li>
 </ol>

숫자 대신 영문 대문자, 소문자, 로마문자 가능
<ol type="표기할 문자 입력">
    <li>HTML5</li>
    <li>CSS3</li>
    <li>JavaScript</li>
</ol>
 
 
시작 숫자 변경    
<ol type="1" start="5">
    <li>HTML5</li>
    <li>CSS3</li>
    <li>JavaScript</li>
</ol>


역순으로 항목 표시하기
<ol reversed="reversed">
     <li>HTML5</li>
     <li>CSS3</li>
     <li>JavaScript</li>
</ol>

 

 

<dl>

- 정의 목록 표기

- 제목과 설명이 한 쌍인 목록을 만들때 사용

- dt(제목), dd(설명)

 

<dl>
        <dt>이곳은 목록의 제목을 적는 곳입니다.</dt>
        <dd> 이곳은 목록에 대한 설명을 적는 곳입니다.</dd>
        <dd>여러 줄을 작성 할 수도 있습니다</dd>
        <dt>또 다른 목록의 제목을 적어 새로운 목록을 만들 수도 있습니다</dt>
        <dd>새로운 목록도 설명을 작성할 수 있으며</dd>
        <dd>역시 여러 줄을 작성할 수 있습니다</dd>
        <dd>목록 별로 설명에 필요한 행을 다르게 할 수도 있습니다</dd>
    
    </dl>

 

• 실행 화면