css 밖에 사용을 못 하니 꼼수로 한 거죠
소스 뜯어 보시분은 알겠지만,핵심만 말하면 선택자 중에서 '속성 선택자'를 이용한 것입니다
ex ) 태그[속성="값"]
예를 들어
〈a src="123"〉〈a/〉
〈a src="321"〉〈a/〉
태그에 css를 a[src="123"]이라고 하면
a 태그 안에 src 속성을 가진 놈들 중에 값이 "123"과 완전히 똑같은 놈을 선택하는 것입니다
완전히 똑같아야 합니다
src="12"도 안되고 src="23"도 안됩니다.
스크립트를 자주 사용하는 분들은 익숙한 선택자 일 겁니다.
그리고 이 선택자는 익스7부터 지원을 하니 css 밖에 지원을 안 하는 마이피에서는 유용(?)하게 쓰일 수 있습니다
그러해서 마이피 버튼을 이용했습니다
이것을 이용하면 아바타를 클릭시 해당 유저의 마이피로 이동할 수 있기 때문에 선택했습니다
태그를 보시면
〈a href="http://mypi.ruliweb.daum.net/mypi.htm?id=219536"〉
〈img src="http://i1.daumcdn.net/img.ruliweb/img/mpsg.gif" border="0"〉
〈/a〉
이런 식으로 구성이 돼 있습니다. 이제 감이 오시죠?
해당 유저의 마이피로 이동할 때 맨 뒤에 form 값으로 id를 붙여주기 때문에 각각 개별적으로 선택할 수 있죠
a[href="http://mypi.ruliweb.daum.net/mypi.htm?id=219536"] 이런식으로 하면 219536아이디를 가진 리플을 선택할 수 있죠
그런데 이렇게 하면 너무 길어서 보기가 지저분해지고 컴퓨터도 읽기 힘들어집니다 그래서 아이디만 읽을 수 없을까 하는 사람을 위해
$=도 있습니다
ex) a[href$="ddd"]
이것은 맨 뒤에서 부터 차례대로 읽어서 해당하는 문자가 '포함'되어 있으면 선택이 되는 선택자입니다 아까 =는 무조건 똑같아야 하지만
이건 제일 뒤에서 부터 앞으로 읽으면서 해당하는 값이 같으면 선택해주는 것입니다
그리고 더 한가지 알아야할 것은 일치하는 문자가 많은 선택자를 선택합니다
그러니까 "ddd"는
a[href$="352729"] 얘 보다는
a[href$="ddd"] 이놈이 더 매칭이 되기 때문에 이 녀석을 선택하게 됩니다.
그리고 이거 말고도
태그[속성]
태그[속성~="값"]
태그[속성|="값"]
태그[속성^="값"]
태그[속성*="값"]
도 있으니 한번 응용해 보시길 바랍니다 응용이야말로 꿀잼이죠^오^
그래서 a태그 안에 있는 img 태그의 width값과 height값을 0으로 맞추고
padding으로 아바타 크기를 원하는 값으로 맞추고 background-image를 입혀서 마치 아바타를 지원하는 블로그처럼 보일 수가 있습니다
대략
.cm01 a img { width: 0; height: 0; padding: 100px 100px 0 0; }
이렇게 해서 마이피 버튼 이미지를 안 보이게 감추고
.cm01 a[href$="ddd"] img { background-image: url("아바타 이미지주소"); }
이런 식으로 아바타 이미지를 먹여주시면 됩니다
이런 느낌으로요
이걸 응용하면 여러 가지로 재미있는 걸 만들 수 있습니다
예를 들어서 자기 마이피에 해당 어글러 유저가 와서 짜증이 난다면
해당 유저의 아이디만 선택해서
이렇게 이미지를 박아서 남들도 이 사람이 어글러라는걸 알 수 있게 됩니다.
한번 여러가지로 응용해보세요
마지막으로 이런 거 다 귀찮다 싶으면 제가 만든 css를 이용하시면 됩니다
이건 신형마이피에 적용이 가능하게 만들었는데
원하시는대로 수정하시면서 사용하면 됩니다
p-osition에서 반드시 '-'를 빼주세요
.readcomment, .mypiZmenu { padding-left: 90px; }
#mypiRead .mypiReply .mypiZmenu .cm01 a img {
width: 0;
height: 0;
p-osition: absolute;
padding: 50px 50px 0 0;
left: 16px;
bottom: -20px;
}
#mypiRead .mypiReply .mypiZmenu .cm01 a[href$="해당아이디1"] img { background-image : url("이미지주소1"); }
#mypiRead .mypiReply .mypiZmenu .cm01 a[href$="해당아이디2"] img { background-image : url("이미지주소2"); }
#mypiRead .mypiReply .mypiZmenu .cm01 a[href$="해당아이디3"] img { background-image : url("이미지주소3"); }
.
.
.
* 이미지는 padding 사이즈와 같이 넓이 50픽셀, 높이 50픽셀 크기의 이미지 *
됐거든?