CSS : list 스타일과 list-style-image 설정

Front-end/Client

CSS : list 스타일과 list-style-image 설정

sunnnkim 2020. 1. 9. 20:50

List의 CSS 설정 중 아이콘에 이미지를 넣는 기능

list-style-image: url ('이미지주소');

< 기타 >

list-style-type: 리스트의 마커를 지정할수 있다 ( ul-동그라미, 네모 ... / ol : 숫자, 로만자..등)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
ul.cls{
	/* list-style-type 리스트 아이콘 스타일을 정할수 있다. */
	list-style-type: circle;
	list-style-type: square;
	
	/* list-style-image 리스트 아이콘 스타일을 이미지로 설정 */
	list-style-image: url('icon.jpg');	/* 가지고 있는 파일 */
	list-style-image: url('https://image.flaticon.com/icons/png/512/2452/2452933.png');width: 5	px;	
	/* 인터넷이미지 */
	list-style-image: url("");
}
.ocls{
	list-style-type: upper-roman;	/* 대문자 로만자 들어감 */
	list-style-type: lower-alpha;	/* 소문자 알파벳 들어감 */
}

</style>
</head>
<body>


<ul class="cls">
	<li>Coffee</li>
	<li>Tea</li>
	<li>Cocoa</li>
</ul>
<ol class="ocls">
	<li>Apple</li>
	<li>Pear</li>
	<li>Banana</li>
</ol>
<img alt="" src="">


</body>
</html>