#mypiRead .mypiReply .mypiZmenu .cm01 a[href$="6"] img {
background: url("http://img2.ruliweb.daum.net/mypi/gup/a/216/10/o/9455008876.jpg");
}
#mypiRead .mypiReply .mypiZmenu .cm01 a[href$="루리웹아이디"] img {
background: url("http://img2.ruliweb.daum.net/mypi/gup/a/216/10/o/9455058270.jpg");
}
#mypiRead .mypiReply .mypiZmenu .cm01 a img {
background: url("http://img2.ruliweb.daum.net/mypi/gup/a/216/10/o/9455008872.jpg");
}
#mypiRead .mypiReply .mypiZmenu .cm01 a img {
width: 0;
height: 0;
p-osition: absolute;
padding: 240px 160px 0 0;
left: 0px;
bottom: 0;
}
아바타 관련 부분입니다. 됏거든ㅋ님 마이피 참조하시고
적용 순서는 위와 같이 해주세요.
먼저 모든 a~z 1~0까지 아바타 지정해주시고
그다음에 지정아이디 해주시면 됩니다.
이유는 이전 파트에도 설명 했다시피 CSS코드는 마지막 코드를 우선 적용합니다.
더 자세히 설명하자면 먼저 맨 위에 6으로 끝나는 속성 선택자를 먼저 읽었는데
아래 루리웹아이디 가 온전히 있는 사람이 있을 경우 루리웹아이디 그림을 우선 출력하는거에요
거꾸로 된다면...
루리웹 아이디 있는 사람이라도 마지막 선택자 6이 존재하기 때문에 아이디로 아바타 지정해도
6으로 지정한 아바타가 나오게 됩니다.
그렇기 때문에 지정 아바타 나오는 코드는 맨 뒤에 써주시는 게 좋습니다.
아이디나 지정한 문자가 없을 경우 맨 마지막 cm01 a img 의 이미지가 출력되는 거에요.
그리고 기본적으로 마이피 아이콘은 아래에
width: 0;
height: 0;
이 코드로 사라지게 하시고
padding: 240px 160px 0 0;
여백을 억지로 넓혀서 div 배경화면으로 지정된 그림을 나오게 하는 겁니다.
p-osition: absolute;
이 코드의 absolute 는 div안에 속해 있는 div를 풀어주는 겁니다. relative 일경우
아이디 아바타 info 친구신청 이렇게 정렬되는 구조를 아바타만 따로 움직
일 수 있게 하는 거죠.
물론 - 는 빼고 입력하세요.
left: 0px;
그리고 왼쪽에 붙여서 0px의 여백을 둔다는 겁니다.
bottom: 0;
이 코드도 위와 같아요 아래쪽 0의 여백 참고로 위에 left 코드 대신 float 로 쓸 경우
left 로 붙이고 margin 이라는 코드로 상단 오른쪽 하단 왼쪽 순서로 수치를
입력해 아바타 위치를 변경 할 수도 있습니다.
엘더 프레데터
.readcomment a {
p-osition: absolute;
right: 15px;
bottom: 15px;
}