티스토리 뷰
반응형
HTML / 요소 - 문자 콘텐츠
목록을 만드는 태그
<ol> + <li>
<ul> + <li>
ol: ordered list 순서대로, 중요도를 의미할 수 있다.
블록 요소
ul: unordered list 순서 필요하지 않은
리스트 아이템
li: 는 단독으로 사용 안되고 <ol>이나 <ul>의 자식으로 포함되어야 한다.
ul태그 예제
<body>
<ul>
<li>
Apple
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
</ul>
</li>
<li>Banana</li>
<li>Mango</li>
</ul>
</body>
ol태그 예제 1
<body>
<ol>
<li>
Apple
<ol>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
</ol>
</li>
<li>Banana</li>
<li>Mango</li>
</ol>
</body>
ol태그 예제 2
<body>
<ol type="a">
<li>
Apple
<ol reversed>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
</ol>
</li>
<li>Banana</li>
<li>Mango</li>
</ol>
</body>
ol태그의 type속성을 통해서 a, A, 1,.. 등 을 사용할 수 있다.
reversed속성은 값의 순서를 바꾸는 것이 아닌 순서를 역순으로 바꿔준다. 우선순위를 역순으로 할 때 사용할 수 있겠다.
ol태그 예제 3
<body>
<ol start="10">
<li>
Apple
<ol>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
</ol>
</li>
<li>Banana</li>
<li>Mango</li>
</ol>
</body>
start속성을 통해서 10부터 순서를 출력할 수 있다.
li태그 예제
<body>
<ol>
<li value="7">
Apple
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
</ul>
</li>
<li value="99">Banana</li>
<li>Mango</li>
</ol>
</body>
li태그의 value속성을 통해서 이하의 항목의 순서를 다시 지정한다.
반응형
'HTML CSS JS' 카테고리의 다른 글
| HTML / 요소 - 인라인 텍스트 - A (1) | 2021.06.03 |
|---|---|
| HTML / 요소 - 문자 콘텐츠 - DL, DT, DD, P, HR, PRE, BLOCKQUOTE (0) | 2021.06.03 |
| HTML / 요소 - 콘텐츠 구분 (0) | 2021.06.03 |
| HTML - 메타 데이터 META (0) | 2021.06.02 |
| HTML - 블록 레벨(Block level)요소와 인라인(Inline) 요소 (0) | 2021.06.02 |
댓글
공지사항