리스트 블릿 이미지 넣기

list-style (type, image, position)을 이용한 리스트의 블릿 꾸미기 또한, 여러가지 옵션을 제공합니다.그러나, list-style-image를 이용해 외부 이미지를 사용할 경우, 박스의 레이아웃 및 아이콘 이미지의 상하 조절에 꽤나 까다로운 점이 있습니다.다음은, background 속성이 박스의 패딩 영역에도 표기된다는 점을 이용한 블릿 이미지 꾸미기 입니다. background, padding을 이용한 블릿 이미지 꾸미기 ul{
margin: 0;
padding: 0;
list-style: none; width: 200px; font-family: '돋움', sans-serif; color: #666666; font-size:11px;
} li{ background: url(ico_note.gif) no-repeat 0 50%; padding: 4px 0 0 15px; }
<ul>
<li>일상다반사</li>
<li>끄작끄작</li>
<li>스크레핑</li>
</ul> * 기본적으로 외곽 박스(ul)의 여백과 패딩값은 0으로 해주어야 브라우저간의 어긋남이 없습니다. 1. 리스트의 스타일(type, image)을 일단 제거합니다. list-style: none;2. 블릿 이미지로 쓸 이미지를 리스트 항목태그의 배경으로 넣어둡니다. background: url(ico_note.gif) no-repeat 0 50%; 여기서 background의 position 옵션(0 50%)을 이용해 좌우, 상하의 위치지정이 가능합니다.3. 리스트 항목태그의 패딩값을 조절해 줍니다. padding: 4px 0 0 15px; 블릿 이미지의 크기만큼 좌측 패딩값은 반드시 띄워줍니다(15px). 그리고, 텍스트의 크기에 따라 상단 패딩값을 적절히 조절해 줍니다. 위 CSS를 사용한 결과는 아래와 같습니다.일상다반사 끄작끄작 스크레핑