Front-End/HTML
[HTML] 목록 태그(ul, ol, li 태그)
찐코딩
2021. 10. 25. 21:40
목록태그
* ul 태그 : 순서가 없는(정렬이 되지 않은) 목록 태그
* ol(ordered list) 태그 : 순서가 있는(정렬이 된) 목록 태그.
* li 태그 : 리스트 목록
<ul>태그는, type : disc / circle / square 으로 각 항목의 모양을 선택
<ol>태그는, type : 1 / a / A / i / I 으로 순서의 종류를 선택
https://jinnnkcoding.tistory.com/134
[CSS] list-style-type 속성
CSS에서 사용할 수 있는 list-style 속성은 다음과 같음 . 1. list-style-type 2. list-style-image 3. list-style-position list-style 속성 항목 모양의 종류, 위치, 항목에 넣을 이미지를 한꺼번에 지정할 수..
jinnnkcoding.tistory.com
css 태그와 함께 목록 태그의 스타일을 변경할 수 있다.
목록 태그 예시
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> 목록 태그 </title>
</head>
<body>
<!--
목록태그
* ul 태그 : 순서가 없는(정렬이 되지 않은) 목록 태그
* ol(ordered list) 태그 : 순서가 있는(정렬이 된) 목록 태그.
* li 태그 : 리스트 목록
-->
<h3>음료 메뉴</h3>
<ul> <!-- 순서가 없는 목록 -->
<li>콜라</li>
<li>사이다</li>
<li>환타</li>
<li>생과일쥬스</li>
</ul>
<hr>
<h3>커피 종류</h3>
<ol> <!-- 순서가 있는 목록 -->
<li>아메리카노</li>
<li>카페라떼</li>
<li>카라멜 마끼아또</li>
<li>아포가토</li>
</ol>
<hr>
<h3>음료 메뉴</h3>
<ul type="square"> <!-- type="disc"(기본값), "circle", "square" -->
<li>콜라</li>
<li>사이다</li>
<li>환타</li>
<li>생과일쥬스</li>
</ul>
<hr>
<h3>커피 종류</h3>
<ol type="I"> <!-- type="1"(기본값), "a", "A", "i", "I" -->
<li>아메리카노</li>
<li>카페라떼</li>
<li>카라멜 마끼아또</li>
<li>아포가토</li>
</ol>
<hr>
<h3>음료 메뉴</h3>
<ul>
<li>콜라</li>
<li>사이다</li>
<li>생과일쥬스</li>
<li>커피
<ol>
<!--목록 안에 목록도 생성 가능하다-->
<li>아메리카노</li>
<li>카페라떼</li>
<li>카라멜 마끼아또</li>
<li>아포가토</li>
</ol>
</li>
<li>환타</li>
</ul>
</body>
</html>