프론트엔드/CSS
CSS 17 list-style-type 과 list-style-image 속성으로 글머리 형태 설정하기
스펀지연구소
2021. 3. 21. 13:58
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>배경 이미지</title>
<style>
#a{
list-style-type: square;
}
#b{
list-style-type: disc;
}
#c{
list-style-type: circle;
}
#d{
list-style-type: none;
}
#e{
list-style-image:url("http://freeppt.co.kr/wp-content/uploads/2018/09/man.png");
}
</style>
</head>
<body>
<h1>초보개발자의 성장블로그</h1>
<ul id="a">
<li> list-style-type: square;</li>
<li> list-style-type: square;</li>
</ul>
<ul id="b">
<li> list-style-type: disc;</li>
<li> list-style-type: disc;</li>
</ul>
<ul id="c" >
<li> list-style-type: circle;</li>
<li> list-style-type: circle;</li>
</ul >
<ul id="d">
<li> list-style-type: none;</li>
<li> list-style-type: none;</li>
</ul>
<ul id="e">
<li> list-style-image:url("~")</li>
<li> list-style-image:url("~")</li>
</ul>
</body>
</html>