[HTML] 목록(List)

목록, List

1. 순서가 있는 목록
   • <ol></ol> + <li></li>
   • Ordered List
   • List Item
2. 순서가 없는 목록
   • <ul></ul> + <li></li>
   • Unordered List
   • List Item
3. 용어 정의 목록
   • <dl></dl> + <dt></dt> + <dd></dd>
   • Definition List
   • Definition Term
   • Definition Description

<!-- ol 사용 -->
<h1>오늘의 할일</h1>

<!-- 숫자 5종류(숫자, 대/소문자, ??? ??? ???) -->
<ol type="A">
	<li>수업 복습하기</li>
	<ol type="a"> <!--FM(정석) 방법은 아님! -->
		<li>자바 정리</li>
		<li>오라클 정리</li>
	</ol>
	<li>책상 정리하기</li>
	<li>우산 말리기</li>
	<li> <!-- li를 그대로 두고 그 안에 ol을 만드는게 정석 -->
		운동하기
		<ol type="a">
			<li>근력 운동</li>
			<li>유산소 운동</li>
			<li>스트레칭</li>
		</ol>
	</li>
	
	
	<li>강아지 산책하기</li>
</ol>

<!-- ul 사용 -->
<h1>오늘의 할일</h1>

<!-- 불릿(Bullet) 3종류-->
<ul type="square">
	<li>수업 복습하기</li>
	<li>
		책상 정리하기
		<ol>
			<li>책장 정리하기</li>
			<li>필통 정리하기</li>
		</ol>
	</li>
	<li>우산 말리기</li>
</ul>

<!-- 내림차순, 시작 번호 지정하기 -->
<h1>오늘의 할일</h1>

<!-- <ol reversed> -->
<ol start="6">
	<li>수업 복습</li>
	<li>운동</li>
	<li>도시락 만들기</li>
	<li>방청소</li>
	<li>강아지 목욕</li>
</ol>


<!-- dl 사용(설명) -->
<h1>자바</h1>

<d1>
	<dt>클래스</dt>
	<dd>클래스는 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구</dd>
	<dt>클래스</dt>
	<dd>클래스는 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구</dd>
	<dt>클래스</dt>
	<dd>클래스는 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구</dd>
</d1>

 

See the Pen Untitled by 박나래 (@kdzhfgez-the-selector) on CodePen.

 

 *글 작성에 참고한 내용: 학원 쌤의 열정적인 수업