HTML 02. 목록관련 태그

1.   ul : 순서가 없는 목록태그  
     - <ul> 안에 <li>로 입력  

      <h1>ul : 순서가 없는 목록 태그</h1>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
            <li>jQuery</li>
        </ul>
        <h3>중첩으로도 사용 가능</h3>
        <ul>
            <li>HTML
                <ul>
                    <li>글자관련</li>
                    <li>목록관련</li>
                </ul>
            </li>
            <li>CSS</li>
            <li>JavaScript</li>
            <li>jQuery</li>
        </ul>
        <hr>

ul : 순서가 없는 목록 태그

• HTML
• CSS
• JavaScript
• jQuery

중첩으로도 사용 가능

• HTML
  • 글자관련
  • 목록관련
• CSS
• JavaScript
• jQuery

---

---

2. ol : 순서가 있는 목록 태그 
    <ol> 안에 <li> 로 입력 <ol> 안에 타입지정 가능

     <ol type="I">
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
            <li>jQuery</li>
        </ol> 
        <br>
        <!-- start 속성을 이용해서 시작값 변경가능 -->
        <ol start = "5" type="a">
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
            <li>jQuery</li>
        </ol> 
        <br>
        <!-- reversed속성을 이용해서 역순으로 표기 가능(속성값 안써도됨)-->
        <ol reversed>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
            <li>jQuery</li>
        </ol>

 

1. HTML
2. CSS
3. JavaScript
4. jQuery

5. HTML
6. CSS
7. JavaScript
8. jQuery

1. HTML
2. CSS
3. JavaScript
4. jQuery

 

---

3. dl : 설명과 관련된 목록태그 (주로 용어에 대해 정의할때)
<dt> 제목작성 / <dd> 해당 설명 작성 

 

<h1>dl : 설명과 관련된 목록태그 (주로 용어에 대해 정의할때)</h1>
        <dl>
            <dt>* 이곳은 제목을 작성하는 곳 </dt>
            <dd>- 여기에 해당 설명을 작성하는 곳 </dd>
            <dd>- 여러줄 작성 가능  </dd>

            <dt>* 이곳은 제목을 작성하는 곳 </dt>
            <dd>- 여기에 해당 설명을 작성하는 곳 </dd>
            <dd>- 여러줄 작성 가능  </dd>
        </dl>

dl : 설명과 관련된 목록태그 (주로 용어에 대해 정의할때)

* 이곳은 제목을 작성하는 곳

- 여기에 해당 설명을 작성하는 곳

- 여러줄 작성 가능

* 이곳은 제목을 작성하는 곳

- 여기에 해당 설명을 작성하는 곳

- 여러줄 작성 가능