목록속성을 가진 곳에서의 bullet..

그 것을 background image로 대체하여 사용하는 이유는?
저희 부서에서는, 무언가 이슈가 생기면 그에 대한 설명을 부서 카페에 적어 놓곤 합니다.
그 곳에 올렸던 것들 중 하나 입니다.
그냥 간단하게 설명하느라 비약적으로 적었습니다.

굴비나 기사목록을 보면 글 앞에 bullet을 가진 리스트 형식을 지닌 경우가 많습니다.
(bullet이 없어도 리스트는 리스트긴 합니다)
그럼 보통

<ul>
    <li>리스트1</li>
    <li>리스트2</li>
</ul>

이런식으로 쓰는데요
스타일을 아무것도 지정하지 않은 경우에 저렇게 코딩하고 미리보기를 하면, 앞에 동그란 기본 bullet이 붙은 리스트를 볼 수 있습니다. (네모나 숫자로 바꿀 수도 있어요)
이런식 이지요

  • 리스트1
  • 리스트2

헌데 기본의 text bullet은 너무 안이쁘기 때문에 -_-
list-style이란 녀석을 이용해서 이미지로 대체시킬 수 있습니다.
(이것도 shorthand라서 정확하게 말하면 list-style-image입니다.)
그런데,
이미지로 대체 할 수 있도록 selector를 제공하고 있음에도 불구하고 background를 이용하는 이유는..
list-style 로는 bullet의 위치를 조절 할 수 없기때문입니다.
조절할 수 있는 속성자체도 없고 꼼수도 현재로서는 없습니다.
굳이 하려고 하면 bullet 이미지 자체에 여백을 원하는 만큼 넣어서, 이상하게 트리밍된 이미지를 이용하는 수 밖에 없습니다.
그래서 대부분의 디자이너들은 list-style: none;으로 두고 (bullet을 보이지 않게 하겠다는 말입니다.)
해당 줄(row)에 배경 이미지로 bullet을 넣고 텍스트를 밀어주는 방식을 쓰고 있습니다.
그럴 경우엔 background에선 위치조절 속성, 텍스트에선 padding이나 text-indent를 써서 둘다 조절을 해낼 수 있습니다.
w3c의 lists에 대한 설명 (원문)
w3c의 lists에 대한 설명 (한글)

위와 같이 사용했을 경우 li 한줄의 구조

bullets_on_list