HTML에서 사용할 수 있는 대표적인 리스트는 3가지가 있다
UL은 리스트 나열 시 번호 대신 특수문자를 사용하고
OL은 리스트 나열 시 번호나 로마자 등 설정이 가능하다.
li는 UL과 OL 사용 시 리스트의 항목들을 감싸는 블록
DL의 경우는 리스트 안에 또 list를 추가하여 표시할 수 있다.
또한 li를 사용하지 않고 dl, dt, dd를 통해 컨트롤 한다.
아래 예제를 통해 확인해보자
<html>
<head>
<meta charset="UTF-8">
<title>리스트</title>
</head>
<body>
<h2>UL - 정렬 넘버가 없는 리스트</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Java-Script</li>
<li>J-Query</li>
</ul>
<h2>UL - 리스트 앞의 동그라미(disk) 삭제</h2>
<ul style="list-style-type:none;">
<li>HTML</li>
<li>CSS</li>
<li>Java-Script</li>
<li>J-Query</li>
</ul>
<h2>OL - 정렬 넘버가 있는 리스트</h2>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>Java-Script</li>
<li>J-Query</li>
</ol>
<h2>OL - 정렬 넘버를 바꾼 OL</h2>
<ol type="A">
<li>HTML</li>
<li>CSS</li>
<li>Java-Script</li>
<li>J-Query</li>
</ol>
<h2>리스트 안의 리스트 형태</h2>
<dl>
<dt>HTML</dt>
<dd>a 태그</dd>
<dd>img 태그</dd>
<dd>li 태그</dd>
<dt>CSS</dt>
<dt>JAVA-SCRIPT</dt>
<dt>J-QUERY</dt>
</dl>
</body>
</html>
'HTML, CSS, JavaScript, jQuery > 02.HTML' 카테고리의 다른 글
| [HTML]02-07.link(페이지 아이콘 이미지 추가),Input(버튼, 텍스트박스 등 다양한 노드 생성), fieldset(프레임 만들기) (0) | 2018.10.15 |
|---|---|
| [HTML]02-06.iframe, 다른 사이트 참조 + 예제 (0) | 2018.10.15 |
| [HTML]02-04.이미지, 하이퍼링크 태그(img, a) (0) | 2018.10.15 |
| [HTML]02-03.테이블(표) 만들기, style, table, tr, th, td, colspan, rowspan (0) | 2018.10.15 |
| [HTML]02-02. hr 태그, 01, 02의 예제, 공백 키워드 (0) | 2018.10.15 |