다연이네

[days02] HTML 목록 본문

Web/HTML

[days02] HTML 목록

　다연　 2020. 12. 1. 18:15
반응형

목록을 만드는 태그

1. <ol>  숫자나 알파벳 등 순서가 있는 목록을 만드는 데 사용 (ordered list)

             type = [1], A, a, I, i 

2. <ul>  순서가 필요 없는 목록을 만드는 데 사용  (unordered list)

              type = [disc], circle, square 

3. <li>   <ol>과 <ul>의 각 항목들을 나열할 때 사용 (list)

 

4. <dl> 용어를 설명하는 목록을 만드는 데 사용 (definition list)

5. <dt> 제목을 나타낼 때 사용

6. <dd> 내용을 나타낼 때 사용 (들여쓰기)

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex05.html</title>
</head>
<body>
	<h3>html 목록</h3>
	
	<ol start="11">
		<li>안녕</li>
		<li>동준아</li>
		<li>뭐하니</li>
		<li>자고있니?</li>
		<li>일어나라</li>
	</ol>
	
	
	<hr>
	<ol>
		<li>순서가 있는 목록
			<ol type="I">
				<!-- An [o]rdered [l]ist 순서 존재-->
				<!-- type = [1], A, a, I, i  -->
				<li>Item 1</li>
				<!-- [l]ist [i]tem  -->
				<li>Item 2</li>
				<li>Item 3</li>
				<li>Item 4</li>
				<li>Item 5</li>

			</ol>
		</li>
		<li>순서가 없는 목록

			<ul type="circle">
				<!-- An [u]nordered [l]ist  순서 없음-->
				<!-- list type = [disc], circle, square  -->
				<li>item 1</li>
				<!-- [l]ist [i]tem  -->
				<li>item 2</li>
				<li>item 3</li>
				<li>item 4</li>
				<li>item 5</li>
			</ul>
		</li>
	</ol>
    
	<hr>
	
	<h3>html 설명 목록 : dl/dt/dd 태그</h3>

	<dl><!-- dl : 정의를 나타내는  -->
		<dt>Coffee<!-- dt : 제목을 나타내는 --></dt>
		
		<dd>- black hot drink</dd>
		<dt>Milk</dt>
		<dd>- white cold drink</dd>
	
	</dl>


</body>
</html>
반응형
저작자표시 비영리

'Web > HTML' 카테고리의 다른 글

[days02] 블럭 요소와 인라인 요소  (0) 2020.12.01
[days02] 간단한 페이지 만들기+반응형 웹  (0) 2020.12.01
[days02] picture 태그  (0) 2020.12.01
[days02] 이미지 플로팅(Image Floating)  (0) 2020.12.01
[days02] a 태그를 사용해 네모 박스 클릭 / 이미지 올리기  (0) 2020.12.01
'Web/HTML' Related Articles more
Comments