05. 목록태그

목록태그의 레벨 : 블록레벨

대표적인 태그

1. ul : 부모로만 사용 가능
   순서가 필요 없는 목록
   

2. ol : 부모로만 사용 가능
   순서가 필요한 목록

3. li : 자식으로만 사용 가능
   
   

ul 또는 ol 에서만 사용 가능한 속성

1. type : 리스트의 모양 (점, 숫자) 을 처리
   -- ul-disc : 기본값, 검은 점
   -- ul-circle : 흰 점
   -- ul-square : 검은 사각형
   -- ul-none : 아무것도 표시 안 함
   
   
   -- ol-1 : 기본값, 정수
   -- ol-a : 영문 소문자
   -- ol-A : 영문 대문자
   -- ol-i : 로마 소문자
   -- ol-I : 로마 대문자
   
   
2. start : (ol용) 시작점을 바꿔준다.
3. reversed : (ol용) 시작점부터 거꾸로 표시
   start 속성값을 li 개수보다 많이
   
   

활용

<<ul type="none">
        <li>목록1</li>
        <li>목록2</li>
        <li>목록3</li> 
</ul> 

▼

• 목록1
• 목록2
• 목록3

---

<ol type="a" start="6" reversed>
        <li>목록1</li>
        <li>목록2</li>
        <li>목록3</li>
        <li>목록4</li>
        <li>목록5</li>
</ol>

▼

6. 목록1
7. 목록2
8. 목록3
9. 목록4
10. 목록5

---

4. dl : ul, ol 같이 부모로 사용 가능한 것 (?)
   dl 의 자식으로 dt, dd 사용 가능
   용어 설명할 때 주로 사용
   dt : 왼쪽 정렬, 제목
   dd : 들여쓰기, 내용

 <dl>
        <dt>제목</dt>
        <dd>내용</dd>
 </dl>

▼

제목 내용

---

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<!-- 목록태그
    레벨: 블록레벨
        *ul: 부모로만 사용 가능, 
            순서가 필요없는 목록
        ol: 부모로만 사용 가능, 
            순서가 필요한 목록
        li: 자식으로만 사용 가능, 

    - 속성(ul 또는 ol 에서만 사용 가능한 속성)
        1) type: 리스트의 모양(점, 숫자)을 처리
            ul-disc(기본값,검은점)
                circle(흰점)
                square(검은 사각형)
                **none(아무것도 표시 안함)

            ol-1(기본값, 정수)
               a(영문 소문자)
               A(영문 대문자)
               i(로마 소문자)
               I(로마 대문자)
        2) start: (ol용)시작점을 바꿔준다
        3) reversed: (ol용)시작점부터 거꾸로 표시
                     start 속성값을 li 개수보다 많이
-->
    <ul type="none">
        <li>목록1</li>
        <li>목록2</li>
        <li>목록3</li>
    </ul>
    <ol type="a" start="6" reversed>
        <li>목록1</li>
        <li>목록2</li>
        <li>목록3</li>
        <li>목록4</li>
        <li>목록5</li>
    </ol>

    <!-- 
        dl 안에 dt, dd 사용가능
        용어 설명할때 주로 사용
        dt: 왼쪽 정렬, 제목
        dd: 들여쓰기, 내용
     -->
    <dl>
        <dt>제목</dt>
        <dd>내용</dd>
    </dl>
</body>
</html>입력하세요