List (목록) - ul , ol 활용법

728x90

un - > 순서없는 목록

ol - > 순서있는 목록(숫자)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<!-- 

	list : 목록
	
	1.
	2.
	3.
	
<ul></ul> unordered list (순서없는 목록)

 -->
 
 <ul>
 <li>coffee</li>
 <li>tea</li>
 <li>milk</li>
 </ul>
 
 <ul style="list-style-type : disc;">  <!-- 아무것도 안넣었을때 -->
 <li>coffee</li>
 <li>tea</li>
 <li>milk</li>
 </ul>
 
 <ul style="list-style-type : circle;">
 <li>coffee</li>
 <li>tea</li>
 <li>milk</li>
 </ul>
 
 <ul style="list-style-type : none;">
 <li>coffee</li>
 <li>tea</li>
 <li>milk</li>
 </ul>
 
 <!-- <ol></ol> ordered list 순서(숫자)있는 리스트 -->
 <ol> 
 <li>coffee</li>
 <li>tea</li>
 <li>milk</li>
 </ol>
 
 <ol type="1"> <!-- 기본형 -->
 <li>coffee</li>
 <li>tea</li>
 <li>milk</li>
 </ol>
 
 <ol start="3"> <!-- 시작번호 설정 -->
 <li>coffee</li>
 <li>tea</li>
 <li>milk</li>
 </ol>
 
 <ol type="A"> <!-- 알파벳 시작 --> 
 <li>coffee</li>
 <li>tea</li>
 <li>milk</li>
 </ol>
 
 <ol type="i"> <!-- 로마자 시작 --> 
 <li>coffee</li>
 <li>tea</li>
 <li>milk</li>
 </ol>
 
 <ol type="가"> <!-- 한글은 안됨 --> 
 <li>coffee</li>
 <li>tea</li>
 <li>milk</li>
 </ol>
 
 
 <!-- 리스트안에 리스트넣기 -->
 
 <ul>
 <li>coffee
 	<ol>
 	<li>black</li>
 	<li>milk</li>
 	</ol>
 </li>
 <li>tea</li>
 <li>milk</li>
 </ul>
 


</body>
</html>

결과 ->

저작자표시

'🌍 HTML\CSS' 카테고리의 다른 글

설문조사 예제 - form이용, jsp (0)	2021.02.24
html의 Action과 JSP를 활용해 입력받은값 넘겨주는법 (0)	2021.02.24
iframe (web 안의 web) (0)	2021.02.24
Table(테이블)과 colspan, rowspan (0)	2021.02.24
🚀 테슬라 홈페이지 만들기 1️⃣ (0)	2021.02.23

👨‍💻 코딩 도서관

List (목록) - ul , ol 활용법

'🌍 HTML\CSS' 카테고리의 다른 글

댓글

티스토리툴바

List (목록) - ul , ol 활용법

'🌍 HTML\CSS' 카테고리의 다른 글

관련글

댓글

티스토리툴바