Background 속성 사용하기

by kukie

공지사항 형태 만들기 : 예제

쿠키넷 공지사항

HTML

<div id="notice">
	<h3>쿠키넷 공지사항</h3>
	<ul>
		<li><a href="#">설날입니다. 다들 잘 다녀오세요.</a></li>
		<li><a href="#">내일이 설날이래요.</a></li>
		<li><a href="#">공지사항 창을 달아봤어요.</a></li>
	</ul>
</div>

CSS

#notice{
	border:2px solid #CCC;
	font-family:dotum,돋움,sans-serif;
	padding:20px;
	width:300px;
}
#notice h3 {
	background: url(images/icon_01.gif) no-repeat 0 1px; 
	color:#000;
	font-size:9pt;
	margin:0 0 5px 0;
	padding:0 0 0 18px;
}
#notice ul {
	list-style: none;
	margin:0;
	padding:0;
}
#notice li {
	background: url(images/icon_02.gif) no-repeat 0 0px;
	padding-left: 14px;
}
#notice li a {color:#369;text-decoration:none;}
#notice li a:hover{text-decoration:underline;}