순서가 있는 list
<!-- ol 태그 : 순서있는 list(order list의 약자) : default로 1,2,3,4,..... 넘버링이 들어간다. -->
<ol>
<h2>순서있는 리스트(OrderList)</h2>
<li>자바</li>
<li>오라클</li>
<li>html</li>
<li>JavaScript</li>
<li>Ajax</li>
</ol>
<ol type="A"> <!-- A,B,C,D... 넘버링 -->
<h2>순서있는 리스트(OrderList)</h2>
<li>자바</li>
<li>오라클</li>
<li>html</li>
<li>JavaScript</li>
<li>Ajax</li>
</ol>
<ol type="a"> <!-- a,b,c,d... 넘버링 -->
<h2>순서있는 리스트(OrderList)</h2>
<li>자바</li>
<li>오라클</li>
<li>html</li>
<li>JavaScript</li>
<li>Ajax</li>
</ol>
<ol type="i"> <!-- i,ii,iii,iv... 넘버링 -->
<h2>순서있는 리스트(OrderList)</h2>
<li>자바</li>
<li>오라클</li>
<li>html</li>
<li>JavaScript</li>
<li>Ajax</li>
</ol>
<ol type="I"> <!-- I,II,III,IV,V... 넘버링 -->
<h2>순서있는 리스트(OrderList)</h2>
<li>자바</li>
<li>오라클</li>
<li>html</li>
<li>JavaScript</li>
<li>Ajax</li>
</ol>
<ol start="30"> <!-- 30부터 시작하는 넘버링 -->
<h2>순서있는 리스트(OrderList)</h2>
<li>자바</li>
<li>오라클</li>
<li>html</li>
<li>JavaScript</li>
<li>Ajax</li>
</ol>
<ol start="30" reversed="reversed"> <!-- 30부터 거꾸로 내려오는 넘버링 -->
<h2>순서있는 리스트(OrderList)</h2>
<li>자바</li>
<li>오라클</li>
<li>html</li>
<li>JavaScript</li>
<li>Ajax</li>
</ol>
순서 없는 list
<!-- ul (순서없는 list) -->
<ul>
<h2>순서 없는 리스트(UnorderList)</h2>
<li>미국</li>
<li>베트남</li>
<li>대만</li>
<li>호주</li>
<li>한국</li>
</ul>
<ul type="circle">
<h2>순서 없는 리스트(UnorderList)</h2>
<li>미국</li>
<li>베트남</li>
<li>대만</li>
<li>호주</li>
<li>한국</li>
</ul>
<ul type="square">
<h2>순서 없는 리스트(UnorderList)</h2>
<li>미국</li>
<li>베트남</li>
<li>대만</li>
<li>호주</li>
<li>한국</li>
</ul>
<ul style="list-style: none;"> <!-- 제일 많이 쓴다 -->
<h2>순서 없는 리스트(UnorderList)</h2>
<li>미국</li>
<li>베트남</li>
<li>대만</li>
<li>호주</li>
<li>한국</li>
</ul>
list에 list 주기 (#)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a{
text-decoration: none;
}
li{
list-style: none;
}
.main{
float: left;
margin-right: 50px;
}
/* 제목 3개 */
.main>a{
color: blue;
font-weight: bold;
font-size: 1.2em;
display: block;
width: 180px;
height: 30px;
}
.submenu{
font-size: 12pt;
margin-top: 10px;
}
.submenu>li>a{
display: block;
width: 100px;
height: 10px;
color: orange;
}
</style>
</head>
<body>
<div>
<ul>
<li class="main">
<a href="#">7월 12일</a> <!-- #은 경로가 없다. 경로가 없다는 의미로 #을 기입해준다. -->
<ul class="submenu">
<li>
<a href="../day0712/ex1_htmlTag.html">1번 예제</a>
</li>
<li>
<a href="../day0712/ex2_htmlTage.html">2번 예제</a>
</li>
<li>
<a href="../day0712/quiz.html">퀴즈</a>
</li>
</ul>
</li>
</ul>
<ul>
<li class="main">
<a href="#">7월 13일</a> <!-- #은 경로가 없다. 경로가 없다는 의미로 #을 기입해준다. -->
<ul class="submenu">
<li>
<a href="../day0713/ex01_htmlTag.html">1번 예제</a>
</li>
<li>
<a href="../day0713/ex04_listCheese.html">4번 예제</a>
</li>
<li>
<a href="../day0713/ex06_cssClass.html">6번 예제</a>
</li>
<li>
<a href="../day0713/ex09_lottoball.html">9번 예제</a>
</li>
</ul>
</li>
</ul>
<ul>
<li class="main">
<a href="#">7월 14일</a> <!-- #은 경로가 없다. 경로가 없다는 의미로 #을 기입해준다. -->
<ul class="submenu">
<li>
<a href="../day0714/ex03_table.html">3번 예제</a>
</li>
<li>
<a href="../day0714/ex04_table.html">4번 예제</a>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
limchard