list style
">
07-01_list-style
list style
">
07-01_list-style
list style
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>07-01_list-style</title>
<!--
# list-style-type
- 목록 앞에 붙는 마커(도형, 문자)를 지정.
# list-style-position
- ul, ol 목록의 마커 위치를 지정.
# list-style-image
- 목록의 마커 이미지를 지정.
-->
<style type="text/css">
.inside { list-style-position: inside; }
.none { list-style-type: none; }
.disc { list-style-type: disc; }
.circle { list-style-type: circle; }
.square { list-style-type: square; }
.outside { list-style-position: outside; }
.lower_A { list-style-type: lower-alpha; }
.upper_R { list-style-type: upper-roman; }
.lower_R { list-style-type: lower-roman; }
.upper_L { list-style-type: upper-latin; }
.leading_zero { list-style-type: decimal-leading-zero; }
.marker_1 { list-style-image: url('../../image/list_image/marker.gif'); }
.marker_2 { list-style-image: url('../../image/list_image/list_dot.gif'); }
.marker_3 { list-style-image: url('../../image/list_image/li.gif'); }
</style>
</head>
<body>
<h1>list style</h1>
<ul class="inside">
<li class="none"> 로그인 </li>
<li class="disc"> 로그인 </li>
<li class="circle"> 로그인 </li>
<li class="square"> 로그인 </li>
</ul>
<br/>
<ol class="outside">
<li class="lower_A"> lower_A </li>
<li class="upper_R"> upper_R </li>
<li class="lower_R"> lower_R </li>
<li class="upper_L"> upper_L </li>
<li class="leading_zero"> decimal-leading_zero </li>
</ol>
<br/>
<ul class="marker_1">
<li> 로그인 </li>
<li> 회원가입 </li>
<li> 마이페이지 </li>
<li> 사이트 맵 </li>
</ul>
<br>
<ul class="marker_2">
<li> 로그인 </li>
<li> 회원가입 </li>
<li> 마이페이지 </li>
<li> 사이트 맵 </li>
</ul>
<br>
<ul class="marker_3">
<li> 로그인 </li>
<li> 회원가입 </li>
<li> 마이페이지 </li>
<li> 사이트 맵 </li>
</ul>
<br>
</body>
</html>