Daily coding

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>

'Front-end > Client' 카테고리의 다른 글

CSS : 화면분할과 정렬(float)  (0) 2020.01.10
CSS : 테이블 스타일  (0) 2020.01.10
CSS : Anchor 태그와 속성들  (0) 2020.01.09
CSS : Java Script에서 CSS적용하기  (0) 2020.01.09
CSS : text 정렬 및 다양한 attribute 들  (0) 2020.01.09
'Front-end/Client' Related Articles more