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

그 것을 background image로 대체하여 사용하는 이유는?

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

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

그럼 보통

이런식으로 쓰는데요
스타일을 아무것도 지정하지 않은 경우에 저렇게 코딩하고 미리보기를 하면, 앞에 동그란 기본 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

# #

목록으로Web Tech