noimage

목록속성을 가진 곳에서의 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

  • 안녕하세요. 종훈님 WP에 갔다가 우연히 들렸어요.
    WP에 설치한 페이지드코멘트로 인한 의 불렛이 맘에 안들었는데,

    리스트1
    리스트2

    이런 구조때문이라니…드디어 없애는 방법을 찾았네요. ^^
    감사합니다.

  • 알고 나면 별거 아닌데 알기 전엔 정말 이상한 것들이 많지요
    으~~~

  • 흣… 이제보니 코멘트에도 태그가 먹는군요;;; 아깐 올린 글이 이상해져버렸어요;;;

  • 크크 ^^
    근데 저만 그런건가요? 지금 제 블로그..
    index나 info, archives..다 article이 표시가 안되고 permanent link로 들어와야 보이네요 -_-; 파이어폭스가 이상해졌나.. 윈도 파폭에서만 그르넹.. @_@ Vanilla와 cookie가 겹쳐서 그렇다는 것을 알아냈답니다. 일몰님 땡큐 ㅎㅎ

  • 잘보이는데…

  • 그리고 또 하나…브라우저 호환성과도 관련이 있습니다.
    marker 영역부분을 margin으로 할 것인지 padding 으로 할 것인지 스펙에 명시되어 있지 않기 때문에 브라우져마다 다른 양상을 보이고 있어서 속편하게 마진 패딩 다 빵으로 설정해 놓고 padding-left 만 사용을 하고 있던 것이지요. display: marker와 content: 만지원이 됐었어도 스펙에서 명시 해준 대로 사용이 가능 할텐데…아쉽!

  • 태영: 몰라 나 집의 파폭이 이상한가봐~
    신현석: ie7과 css3에 희망을.. T_T

  • yser

    어영부영 알고 있다고 착각하는 것을 이렇게 잘 정리해주시는 글 매번 잘 보고 갑니다. ^^ 이런 이유였군요.

    p.s
    워프가 여전히 마음에 안드는 점은… 사용자를 좀 더 고려하면 좋을텐데 버전 업이 되어도 변하지 않더군요. 가령 예전에 제가 종종 당했던, URL 이 필수인 워프에서 안적고 그냥 글 적었을 경우, URL 이 필요하다는 메시지는 나오는데 화면은 넘어가버려서 썼던 답글이 없다는 점. 이게 캐시와 연계되지 않으면 뒤로 돌아가기 했을 때 쓴 답글이 다 날아가 있어서 좌절했었죠.. 이런 걸 왜 안고치는지 이해가 안되더라구요.

    그리고 점(.) 세 개를 쓰면 지멋대로 말 줄임표(…)로 바꿔버리는 것도 그렇고, 태그의 경우도 그대로 썼다면 html entity 로 변환해서 보여주면 될텐데 그냥 다 날려버리더군요. 이것 때문에 초반에 워프에 글 쓰다가 당황한 적이 꽤나.. -_-; 오픈 소스 답지 않은 모습 같습니다. 분명 이런 불편을 보고한 사람들이 많았을 거 같은데.. 저만 이렇게 생각하는건지 ^^;

  • 으크크; 메일 주소는 필수라고 적혀 있어서..^^; 안써본 적이 없다보니깐 잘 모르겠어요
    오히려 저는 이모티콘을 쓰다가 잘못해서 “<” 나 “>”를 쓰게 되면 그 뒤에 적힌 글 내용이 사라져 버려서 당황한적이 많답니다
    이상한 점은 조금씩 고쳐 지겠죠 뭐^^