Front/HTML
HTML - 목록 태그
by Hyeon_
2021. 12. 5.
목록 태그
- 기본 목록 :
<ul>, <ol>, <li>
- 정의 목록 :
<dl>, <dt>, <dd>
기본 목록 태그
list.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>목록 태그 (list)</title>
</head>
<body>
<h3>순서가 없는 목록 (Unordered List)</h3>
<ul type="disc">
<li>JavaScript / jQuery</li>
<li>웹 프로그래밍</li>
<li>인터넷프로그래밍</li>
<li>데이터베이스</li>
</ul>
<ul type="circle">
<li>포도</li>
<li>복숭아</li>
<li>수박</li>
<li>딸기</li>
</ul>
<ul type="square">
<li>강아지</li>
<li>고양이</li>
<li>이구아나</li>
<li>고슴도치</li>
</ul>
<hr>
<ol type="1">
<li>컴퓨터학과</li>
<li>경영학과</li>
<li>수학과</li>
<li>영어과</li>
</ol>
<ol type="1" reversed>
<li>컴퓨터학과</li>
<li>경영학과</li>
<li>수학과</li>
<li>영어과</li>
</ol>
<ol type="A">
<li>포도</li>
<li>복숭아</li>
<li>수박</li>
<li>딸기</li>
</ol>
<ol type="i" start="2">
<li>강아지</li>
<li>고양이</li>
<li>이구아나</li>
<li>고슴도치</li>
</ol>
</body>
</html>
<ul> 태그 속성 - 순서 없는 목록(Unordered List)
- type
- disc : 검은 원(기본값)
- circle: 흰 원
- square: 사각형
<ol> 태그 속성 - 순서 있는 목록(Ordered List)
- type
- 1 : 숫자. 기본값
- a : 영어 소문자
- A : 영어 대문자
- i : 소문자 로마 숫자
- I : 대문자 로마 숫자
- start
- 숫자 : 시작 숫자 지정
- reversed: 역순으로 표시
목록 태그 중첩 사용
<ul type="circle">
<li>웹 프로그래밍</li>
<ol type="1">
<li>JSP/Serverlet</li>
<li>HTML/JavaScript>jQuery</li>
</ol>
<li>모바일 프로그래밍</li>
<ol type="1">
<li>Java</li>
<li>안드로이드</li>
</ol>
</ul>
목록태그 연습문제
listex.html
<!-- ul 순서없음, ol 순서있음, li 항목 태그 2021.12.02 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>목록 태그 중첩 사용</title>
</head>
<body>
<h2>컴퓨터 관련 보유 기술</h2>
<ul>
<li>프로그래밍</li>
<ul type = "circle">
<li>웹 프로그래밍</li>
<ol>
<li>JSP/SERVLET</li>
<li>HTML/JavaScript/JQUERY</li>
</ol>
<li>모바일 프로그래밍</li>
<ol>
<li>JAVA</li>
<li>안드로이드</li>
</ol>
</ul>
<!-- --------주석 구분----------- -->
<li>웹 및 모바일 디자인</li>
<ol>
<li>포토샵</li>
<li>Illustrator</li>
<li>HTML5/CSS3</li>
</ol>
<!-- ----------주석 구분 --------- -->
<li>DB</li>
<ol>
<li>MYSQL</li>
<li>MY SQL Server</li>
<li>Oracle</li>
</ol>
</ul>
</body>
</html>
