![[HTML] 리스트(list)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FJKtgx%2FbtriDllZaIs%2FUlkl4S7FW57tacZBUZHEO1%2Fimg.jpg)
728x90
1. 리스트(list)
기본 목록 구성
- 주로 메뉴 작성시 사용
<ul> : 비 순차적 목록 나열
<ol> : 순차적 목록 나열
<li> : 목록의 내용
<dl>, <dt>, <dd>는 주로 이미지를 입력하고 그에 대한 설명을 입력하는 것 등에 사용됨
<dl> : 목록을 시작하고 end 태그로 끝냄 (목록의 범위, 영역)
<dt> : 타이틀 목록 작성
<dd> : 목록에 대한 설명
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>list</title>
</head>
<body>
<h1>목록</h1>
<h2>순차적 목록</h2>
<b>학원 가는 순서</b>
<ol>
<li>기상</li>
<li>씻기</li>
<ol>
<li>양치하기</li>
<li>머리감기</li>
<li>세수하기</li>
<li>머리말리기</li>
</ol>
<li>옷갈아입기</li>
<li>출발</li>
<ol>
<li>버스정류장가기</li>
<li>버스타고 지하철역 가기</li>
<li>지하철타고 역삼역까지 가기</li>
<li>역삼역에서 학원까지 걸어가기</li>
</ol>
<li>학원도착</li>
</ol>
<hr>
<b>집 가는 순서</b>
<ul>
<li>학원에서 역삼역까지 간다</li>
<li>역삼역에서 답십리역까지 간다</li>
<li>답십리역에서 집까지 가는법
<ul>
<li>버스타기</li>
<li>자전거타기</li>
<li>킥보드타기</li>
<li>걸어가기</li>
<li>택시타기</li>
</ul>
</li>
</ul>
<hr>
<h2>정의형 목록</h2>
<dl>
<dt>제목</dt>
<dd>내용</dd>
</dl>
<dl>
<dt>QClass 강의시간</dt>
<dd>오전시간</dd>
<dd>점심시간
<dl>
<dt>식사메뉴</dt>
<dd>샐러드</dd>
<dd>순두부찌개</dd>
<dd>중화요리 1인세트</dd>
<dd>감자탕</dd>
</dl>
</dd>
<dd>오후시간</dd>
</dl>
</body>
</html>
728x90
'Web > HTML' 카테고리의 다른 글
| [HTML] 테이블(table) (0) | 2021.12.03 |
|---|---|
| [HTML] 링크(link <a>) (0) | 2021.12.01 |
| [HTML] 텍스트(text), 이미지(img) (0) | 2021.11.30 |
| [HTML] 구분선(hr), 인용문(quotation) (0) | 2021.11.29 |
| [HTML] 제목, 단락, 주소 (0) | 2021.11.28 |