[마이피 꾸미기] 마이피에 아바타를 달아봅시다.

알고 보면 별거 아닙니다

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픽셀 크기의 이미지 *

[Dallop T.]

우와 어글러 마킹 기능은 효율적이네요.

[됐거든?]

좋은 기능입니다 한번 해보시면 만족할만한 수준입니다

[칼쑤마졍이]

오...좋은 강좌

[됐거든?]

고맙슴다

[Hawaiian]

오... 근데, 저렇게 하면 특정인만 노출되고 다른 사람들은 어떻게 되는 건가요?

[됐거든?]

그러면 당연히 이미지가 안보이죠 해당하는 사람만 보이니까요 그게 싫으시면
일단 기본적인 이미지를 박아주시면 됩니다

예를 들어 #mypiRead .mypiReply .mypiZmenu .cm01 a img 여기에 기본적인 background를 먹이면 해당하지 않은

유저는 전부 기본 이미지로 처리되지요

[엘더 프레데터]

다른 사람은 다른 그림만 나와요. 속성 선택자로 특정 아이디만 저 이미지 노출하게 하는거에요.

[ㅤㅅㅣㅋ]

ㅋㅋ 결국 공개하시네요. 빨때꼽아서 쏙쏙빼잡수시니 부들부들

[됐거든?]

공개할것도 없죠 뭐
아니 그게 더 이상한듯-_-;
귀찮아서 안하다가 많이들 해보고 싶다길래 대략 속성으로만 했슴다

[NISS]

와 케릭터가 마이피 버튼을 이용한 거였군요. 눌러볼 생각조차 안해봐서 몰랐네요. 신기하다.

[됐거든?]

알고보면 별거 아니죠

[비타777]

빨대에 빨때뽑아먹어서 죄송합니다 ㅠ

어글러 구분은 생각 못해봣네요 하나만들어야겟어요

[됐거든?]

별 기능도 아닙니다-_-;

오히려 다들 응용 하시는걸 보니 저야 좋죠

저는 응용을 무척 좋아합니다

[문화충격]

오늘은 누구?

[됐거든?]

칸지입니다

[I2U]

마이피 디자인은 이분이 선도를 다하시고 누구는 따라하면서 강좌하려들고 재밌더군요.
노력하는 모습이 항상 보기좋습니다.

[됐거든?]

고맙슴다

[엘더 프레데터]

오... 원조 아바타 마이피 님의 강좌!!!

[됐거든?]

별거아님다

[Lovefoxxx]

오늘도 치에?

[됐거든?]

대문자는 처리를 안해서요 고정임

[와다다닷]

오늘은 무엇이냐!!

[와다다닷]

오오오!!!
치에~~찡~~

[됐거든?]

노멀치에

[메다카박스]

좋은 강좌입니다. 공유정신이 빛을 발하는군요.

[됐거든?]

고맙슴다

[부탁해요!]

이런 귀한 소스를 공개하시다니 감사합니다

[됐거든?]

고맙슴다 별거아니에요

[月요일 소년]

좋은 정보 감사합니다! : )

[됐거든?]

넵

[긔엽지영]

오오오 멋지네요!! 굳

[됐거든?]

고맙슴다

[아스키코드]

왠지 더 지니어스 멤버들로 해보면 재밌을 것 같은 느낌이 ㅋ

[됐거든?]

네 여러가지로 해보는게 좋죠

[AO shin]

올ㅋ 좋네요 하지만 저는 하지않을껍니다!...복잡해요 ...

[Night_Watch]

멋지심다 ㅎㅎ

[노이즈맨]

스크랩했어요!!

[술잔에담긴별]

췍

[침묵의네아]

늘 잘 보고 있습니다~좋은 정보 감사합니다~

[metoba]

ㄲㄲ

[UMC/UW]

어글러ㅋㅋㅋㅋ

[호걸]

다른나라 언어같다... ㅋㅋㅋㅋㅋ 정말 멋지쉼다!

[링크공주]

우와.. 어글러 표시 생각도 못했는데 대단하네요 추천이 있으면 추천드렸을텐데 ㅎㅎ

[사쿠라여?]

글설명을봐도 어렵네요;;;그래도 대단하심!!

[더리들러]

어렵네요...여하튼 스크랩 하겠습니다 감사합니다

[Saliaceae]

스크랩 하고 두고두고 봐야겠네요.

[은밀한오렌지]

dfs

[왜그러셈]

와 진짜 마이피를 매번 새롭게 바꾸는거 보고 신기했는데
대단합니다.

[ｈａｎｋｏ＊]

감사합니다.

[아스카쨔응]

우왕 감사합니다

[New☆Always^^]

감사합니다. 스크랩하고 두고두고 시도해보겠습니다. ~_~

[야자와 니코]

어렵다 어려워....

[나도만질래]

오늘은 미소녀 나와라 얍!

[나도만질래]

안돼!!!! 12시 넘기고 달았는데 ㅜㅜ

[466]

헐 이게머야

[스타오션3]

좋은 정보 정말 감사합니다!