그 것을 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 한줄의 구조
"목록속성을 가진 곳에서의 bullet.."에 대한 응답 : 9개
안녕하세요. 종훈님 WP에 갔다가 우연히 들렸어요.
WP에 설치한 페이지드코멘트로 인한 의 불렛이 맘에 안들었는데,
리스트1
리스트2
이런 구조때문이라니…드디어 없애는 방법을 찾았네요. ^^
감사합니다.
알고 나면 별거 아닌데 알기 전엔 정말 이상한 것들이 많지요
으~~~
흣… 이제보니 코멘트에도 태그가 먹는군요;;; 아깐 올린 글이 이상해져버렸어요;;;
크크 ^^
근데 저만 그런건가요? 지금 제 블로그..
index나 info, archives..다 article이 표시가 안되고 permanent link로 들어와야 보이네요 -_-; 파이어폭스가 이상해졌나.. 윈도 파폭에서만 그르넹.. @_@Vanilla와 cookie가 겹쳐서 그렇다는 것을 알아냈답니다. 일몰님 땡큐 ㅎㅎ잘보이는데…
그리고 또 하나…브라우저 호환성과도 관련이 있습니다.
marker 영역부분을 margin으로 할 것인지 padding 으로 할 것인지 스펙에 명시되어 있지 않기 때문에 브라우져마다 다른 양상을 보이고 있어서 속편하게 마진 패딩 다 빵으로 설정해 놓고 padding-left 만 사용을 하고 있던 것이지요. display: marker와 content: 만지원이 됐었어도 스펙에서 명시 해준 대로 사용이 가능 할텐데…아쉽!
태영: 몰라 나 집의 파폭이 이상한가봐~
신현석: ie7과 css3에 희망을.. T_T
어영부영 알고 있다고 착각하는 것을 이렇게 잘 정리해주시는 글 매번 잘 보고 갑니다. ^^ 이런 이유였군요.
p.s
워프가 여전히 마음에 안드는 점은… 사용자를 좀 더 고려하면 좋을텐데 버전 업이 되어도 변하지 않더군요. 가령 예전에 제가 종종 당했던, URL 이 필수인 워프에서 안적고 그냥 글 적었을 경우, URL 이 필요하다는 메시지는 나오는데 화면은 넘어가버려서 썼던 답글이 없다는 점. 이게 캐시와 연계되지 않으면 뒤로 돌아가기 했을 때 쓴 답글이 다 날아가 있어서 좌절했었죠.. 이런 걸 왜 안고치는지 이해가 안되더라구요.
그리고 점(.) 세 개를 쓰면 지멋대로 말 줄임표(…)로 바꿔버리는 것도 그렇고, 태그의 경우도 그대로 썼다면 html entity 로 변환해서 보여주면 될텐데 그냥 다 날려버리더군요. 이것 때문에 초반에 워프에 글 쓰다가 당황한 적이 꽤나.. -_-; 오픈 소스 답지 않은 모습 같습니다. 분명 이런 불편을 보고한 사람들이 많았을 거 같은데.. 저만 이렇게 생각하는건지 ^^;
으크크; 메일 주소는 필수라고 적혀 있어서..^^; 안써본 적이 없다보니깐 잘 모르겠어요
오히려 저는 이모티콘을 쓰다가 잘못해서 “<” 나 “>”를 쓰게 되면 그 뒤에 적힌 글 내용이 사라져 버려서 당황한적이 많답니다
이상한 점은 조금씩 고쳐 지겠죠 뭐^^