코<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
div{
width : 20%;
height : 200px;
margin : 5px;
padding : 5px;
border : 1px dotted orange;
float : left;
overflow : auto; /*hidden scroll*/;
}
#u2{
list-style-type : circle;
}
#u3{
list-style-type : square;
}
#u4{
list-style-image : url(../images/check.png);
}
hr{
color : blue;
clear : both;/*clear가 없으면 옆으로 감*/
}
#o2{
list-style-type : lower-alpha;
}
#o3{
list-style-position : outside;
list-style-type : upper-roman;
}
#o4{
list-style-position : inside;
list-style-type : hangul;
}
ol li{
border : 2px solid green;
}
</style>
</head>
<body>
<pre>
리스트
번호 없는 리스트<ul></ul>
번호 있는 리스트<ol></ol>
</pre>
<div>
<h4>lidt-style-type : disk</h4>
<ul id = "u1">
<li>에스프레소</li>
<li>아메리카노</li>
<li>카페라떼</li>
<li>카푸치노</li>
<li>뱅쇼</li>
</ul>
</div>
<div>
<h4>lidt-style-type : circle</h4>
<ul id = "u2">
<li>에스프레소</li>
<li>아메리카노</li>
<li>카페라떼</li>
<li>카푸치노</li>
<li>뱅쇼</li>
</ul>
</div>
<div>
<h4>lidt-style-type : square</h4>
<ul id = "u3">
<li>에스프레소</li>
<li>아메리카노</li>
<li>카페라떼</li>
<li>카푸치노</li>
<li>뱅쇼</li>
</ul>
</div>
<div>
<h4>list-style-image : url(../images/check.png)</h4>
<ul id = "u4">
<li>에스프레소</li>
<li>아메리카노</li>
<li>카페라떼</li>
<li>카푸치노</li>
<li>뱅쇼</li>
</ul>
</div>
<br>
<hr>
<div>
<h4>list-style-type : lower-alpha</h4>
<ol id = "o2">
<li>에스프레소</li>
<li>아메리카노</li>
<li>카페라떼</li>
<li>카푸치노</li>
<li>뱅쇼</li>
</0l>
</div>
<div>
<h4>list-style-type : upper-roman</h4>
<ol id = "o3">
<li>에스프레소</li>
<li>아메리카노</li>
<li>카페라떼</li>
<li>카푸치노</li>
<li>뱅쇼</li>
</0l>
</div>
<div>
<h4>list-style-type : hangul;</h4>
<ol id = "o4">
<li>에스프레소</li>
<li>아메리카노</li>
<li>카페라떼</li>
<li>카푸치노</li>
<li>뱅쇼</li>
</0l>
</div>
<div>
<h4></h4>
<ol id = "o5">
<li>에스프레소</li>
<li>아메리카노</li>
<li>카페라떼</li>
<li>카푸치노</li>
<li>뱅쇼</li>
</0l>
</div>
</body>
</html>드를 입력하세요
신입 개발자 입니다!!!