각 항목(li)의 정렬된 목록(ol)이나 정렬되지 않는 목록(ul)을 설정.
- ol과 ul은 자식으로 li만 포함 가능
- li는 단독으로 사용할 수 없으며, ol이나 ul에 자식으로 파함되어야 함.
- 정렬된 목록 ol의 항목 순서는 중요도를 의미할 수 있다.
ol, ul {display : block;}
li {display : list-item;}
1. li 목록 안에 또다시 ul 태그를 넣어서 목록을 추가 할 수 있다.
<body>
<ul>
<li>
apple
<ul>
<li>apple</li>
<li>banana</li>
<li>orange</li>
</ul>
</li>
<li>banana</li>
<li>orange</li>
</ul>
</body>
그럼 다음과 같이 소제목으로 나온다.
또한 ol도 가능하다.
2. type으로 정렬 방식을 정할 수 있다.
<body>
<ol type = 'a'>
<li>
apple
<ol>
<li>apple</li>
<li>banana</li>
<li>orange</li>
</ol>
</li>
<li>banana</li>
<li>orange</li>
</ol>
</body>
| 속성 | 의미 | 값 |
| start | 항목에 매겨지는 번호의 시작 값 | 숫자(number) |
| type | 항목에 매겨지는 번호의 유형 | a, A, i, I, 1 |
3. 역순 출력도 가능하다.
<body>
<ol type = 'a' reversed = "reversed">
<li>
apple
<ol>
<li>apple</li>
<li>banana</li>
<li>orange</li>
</ol>
</li>
<li>banana</li>
<li>orange</li>
</ol>
</body>
4. 시작 번호를 무엇으로 할지 정할 수 있다.
<body>
<ol start = "4">
<li>
apple
<ol>
<li>apple</li>
<li>banana</li>
<li>orange</li>
</ol>
</li>
<li>banana</li>
<li>orange</li>
</ol>
</body>
5. li 태그의 value값을 넣어서 출력된 값을 변경할 수 있다. 또한 ul과 ol태그는 같이 사용할 수 있다.
<body>
<ol>
<li value = "8">
apple
<ul>
<li>apple</li>
<li>banana</li>
<li>orange</li>
</ul>
</li>
<li>banana</li>
<li>orange</li>
</ol>
</body>
6. li 태그의 value값을 여러번 넣어서 출력된 값을 변경할 수 있다.
<body>
<ol>
<li value = "8">
apple
<ul>
<li>apple</li>
<li>banana</li>
<li>orange</li>
</ul>
</li>
<li value = "99">banana</li>
<li>orange</li>
</ol>
</body>
일반적으로 ol 태그보다 ul 태그를 더 많이 사용한다. ol태그는 순서의 중요성을 의미하는것도 있기 때문이다. 보통은 순서가 중요하지 않는 경우가 많기 때문에 ul 태그를 더 많이 사용한다.
'HTML > 요소' 카테고리의 다른 글
| BODY 내 구조 개념 --> 문자 콘텐츠 (P, HR) (0) | 2020.12.28 |
|---|---|
| BODY 내 구조 개념 --> 문자 콘텐츠 (DL, DT, DD) (0) | 2020.12.28 |
| BODY 내 구조 개념 --> 콘텐츠 구분 예제 (0) | 2020.12.24 |
| BODY 내 구조 개념 --> 콘텐츠 구분 DIV (0) | 2020.12.24 |
| BODY 내 구조 개념 --> 콘텐츠 구분 ADDRESS (0) | 2020.12.24 |