순서가 없는 목록
<ul></ul> 태그 사이에 <li> 태그로 목록 작성
✍입력
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>목록 태그</h1>
<hr>
<h3>순서가 없는 목록</h3>
<!-- 순서가 없는 목록은 <ul> 태그 사이에 <li> 태그로 목록 작성 -->
<ul>
<li>JAVA</li>
<li>JSP</li>
<li>Android</li>
</ul>
</body>
</html>💻출력
<ul>태그 type 속성을 사용하여 목록 표시 기호 변경이 가능하다. 기본값은 "disc"이다.
✍입력
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>목록 태그</h1>
<hr>
<h3>순서가 없는 목록</h3>
<ul>
<li>JAVA</li>
<li>JSP</li>
<li>Android</li>
</ul>
<ul type="disc">
<li>JAVA</li>
<li>JSP</li>
<li>Android</li>
</ul>
<ul type="square">
<li>JAVA</li>
<li>JSP</li>
<li>Android</li>
</ul>
</body>
</html>💻출력
순서가 있는 목록
순서가 있는 목록은 <ol></ol> 태그 사이에 <li> 태그로 목록을 작성한다. 순서가 있는 목록도 type속성을 사용하여 문자를 변경할 수 있다.
✍입력
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>목록 태그</h1>
<hr>
<h3>순서가 있는 목록</h3>
<ol type="I">
<li>JAVA</li>
<li>JSP</li>
<li>Android</li>
</ol>
<ol type="a">
<li>JAVA</li>
<li>JSP</li>
<li>Android</li>
</ol>
</body>
</html>💻출력
중첩 목록
중첩 목록은 간단하다. 위에서 설명한 <ul> 또는 <ol> 태그 내의 <li> 안에 다시 <ul> 또는 <ol> 태그를 사용해주면 된다
✍입력
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<hr>
<h3>중첩 목록</h3>
<li>
<b>JSP</b>
<ol>
<li>HTML 기초</li>
<li>CSS 기초</li>
<li>자바스크립트 기초</li>
<li>JSP 기초</li>
</ol>
</li>
</body>
</html>💻출력
'개발 > HTML' 카테고리의 다른 글
| [HTML] 이미지 태그 <img> (0) | 2022.12.28 |
|---|---|
| [HTML] table 태그 (0) | 2022.12.28 |
| [HTML] <b></b>, <i></i>, <small></small>, <sub></sub>, <sup></sup> (0) | 2022.12.28 |
| [HTML] 하이퍼링크(Hyper Link) (0) | 2022.12.25 |
| [HTML] 수평선 표시 <hr> (0) | 2022.12.25 |
