[기본] 마이피 쉽게 꾸미기 3 [배경 이미지]

* 링크님의 게시물을 참고하며 만든 소스입니다.


* 방법 *

1. 마음에 드는 이미지를 본인 마이피에 '게시물 숨김'으로 선택하여 올린다.
2. 올린 이미지를 클릭하여 링크 주소(이미지 주소)를 복사한다.
3. 밑에 소스에서 기존 링크 주소를 지우고, 붙여넣기 한다.(메모장 이용)
4. 수정된 소스를 복사 붙여넣기 한다.

- css 소스 넣는 방법 -
마이피 → 관리 → 디자인설정 → '신형 스타일' 선택 → 스타일 시트(CSS) → '편 집' 선택 → 복사, 붙여넣기



* css 소스 *




/*여기서 부터 복사 */

/*************** 정리 *******************/

/*폰트 설정*/

* { font-family:"돋음", 맑은 고딕, verdana;}

/* 상단 정리 */

#Daum_MiniDaum { display:none; }
#mypiHead {margin:0; border:none; }
#mypiTop{ border:none;text-align:center;}

/* 가운데 정리 */

.mypiList{margin-right: 20px;margin-left: 20px;}
.mypiComment{margin-right: 20px;margin-left: 20px;}

/* 하단 정리*/

.footer_ruliweb { display:none; }
body{padding-bottom:60px;}

/*좌측 정리 */

#mLeft{padding-left: 10px;}
.mypiNick{padding:0; }
.mypiEdit{margin:0; }
.subject { border:none;}
#mLeft h3{display:none;}
.mypiEtc .rss, .mypiEtc .ver { display:none; }
.mypiMenu01{margin-top:20px;}
.mypiMenu02{margin:10px 0;padding:10px 0;}



/* *********** 테두리 설정 *********** */

.mypiComment{border:none; } /* 인사말 테두리 제거*/
.mypiList{ border:none; } /* 게시물 리스트 테두리 제거*/

.mypiEdit{border:none; } /*왼쪽 설정창 테두리 제거*/
.mypiMeet{border:none; } /*다른 접속자가 보는 왼쪽 설정창 테두리 제거*/

#mypiRead{border:none; }/*게시물 내용 태두리 제거*/


/* 방명록 선 정리*/

.visit{border:none; }
.visitxt4{border:none;border-bottom:1px solid #ccc;}
.visitxt3{border:none;border-bottom:1px solid #ccc;}


/*************** 투명도 설정*************/

/*상단 */

#mypiHead{ background-color:rgba(255, 255, 255, 0.8);} /* 상단 루리웹 링크 배경을 투명하게*/

/* 좌측 색*/

.mypiEdit{background-color:rgba(255, 255, 255, 0.6);}/*설정창 배경을 투명하게*/
.mypiMeet{background-color:rgba(255, 255, 255, 0.6); } /* 방문자가 보는 설정창 배경을 투명하게*/

/* 가운데 */

.mypiComment{background-color:rgba(255, 255, 255, 0.6);}/*인사말 배경 투명하게*/
.mypiList{background-color:rgba(255, 255, 255, 0.6);}/*게시물 리스트 배경 투명하게*/

/*게시물 내용*/

#mypiRead{background-color:rgba(255, 255, 255, 0.9);} /*게시물 내용 부분 투명하게*/


/* 댓글*/

#mypiRead .mypiReply{ background-color:rgba(255, 255, 255, 0.0);} /* 작성된 댓글 뒷 배경*/
.mypiZmenu, .readcomment{background-color:rgba(255, 255, 255, 0.7);} /*작성된 댓글 영역*/
.mypiZmenu2, .readcomment2 {background-color:rgba(255, 255, 255, 0.7);} /*작성된 댓글의 댓글 영역*/

.mypiComm{background-color:rgba(255, 255, 255, 0.7);} /*댓글 작성 영역*/
.mypiComm .box_txt_area textarea{background-color:rgba(255, 255, 255, 0.7);}/* 댓글 입력 창*/


/* 방명록 */

.visit{background-color:rgba(255, 255, 255, 0.7);}/*방명록 입력하는 부분 */
.visitxt4{background-color:rgba(255, 255, 255, 0.7);} /* 작성된 방명록 내용, 댓글의 댓글 작성 부분*/
.visitxt3{background-color:rgba(255, 255, 255, 0.7);} /*작성된 게시물 상단, 방명록 댓글 부분*/
.visitxt{background-color:rgba(255, 255, 255, 0.7);} /*방명록 글자 입력 부분*/


/**************좌측과 가운데를 포함하는 넓은 박스 생성*************/

#mypiWrap {background-color: rgba(255, 255, 255, 0.8); /* 흰색 바탕, 투명도 0.8 */
width: 1150px;/*가로 넓이 1150px만큼 늘림*/
padding: 10px;/*내부 박스와의 간격 10px만큼 벌림*/
border-radius: 0px;}/* 가운데 박스의 모서리를 0px만큼 둥글게 만듬*/


/********************마이피 애니메이션 효과********************/

.mypiList li:hover{background: rgba(130,130,130,0.2);} /* 애니메이션 효과 색 선택*/
.mypiList a:hover {text-decoration: none;}


/**************** 배경 이미지 설정 ****************************/

body{
background-attachment: fixed; /* 이미지 화면 고정 명령어*/
background-size: cover ;/* 이미지를 가로축 화면에 맞게 크기 조절*/

background-image:url(http://img2.ruliweb.daum.net/mypi/gup/a/270/14/o/13712047193.jpg); /*이미지 주소 넣는곳*/

}


/* 여기까지 복사 */





* 추가 내용 *

1. 이미지 선택

이미지는 가로 세로의 비율이 16 : 9 이미지로, 사이즈는 1280 x 720 이상의 이미지가 좋습니다.
만약 세로로 긴 이미지를 사용하시게 되면 상단부분만 나오고 하단 부분은 잘릴 수 있습니다.


2. 투명도 설정

투명도는 개인의 취향에 맞게 설정해주실 수 있습니다.
rgba(255, 255, 255, 0.6); <--- 가장 끝에 '0.6' 이 투병도 입니다.
투명도를 높이시려면 숫자를 낮추시면 됩니다.


(투명도 앞에 색 코드를 원하시는 색의 코드로 바꿔 주셔도 됩니다.)


3. 애니메이션 효과 색상 바꾸기

.mypiList li:hover{background: rgba(130,130,130,0.2);} /* 애니메이션 효과 색 선택*/
이 부분을 수정해 주시면 됩니다.
원하시는 색상의 코드로 수정해주시고 투명도를 설정해 주시면 됩니다.


4, 가장 큰 박스의 모서리 둥들게 만들기

border-radius: 0px;}/* 가운데 박스의 모서리를 0px만큼 둥글게 만듬*/
이 부분을 수정해 주시면 됩니다. 숫자를 늘려주시면 그만큼 둥근면이 넓어 집니다.


5. 필요 없는 기능 빼기

만약 필요없는 기능이 있으시다면 그냥 그 부분을 빼고 복사, 붙여넣기 해주시면 됩니다.


6. 링크님의 게시물

- 링크님 게시물 이동 -

링크님께서 작성해주신 게시물을 보시면 소스를 이해하시는데 도움이 될것 같습니다.

배경 이미지 설정, 애니메이션 설정 등 다양한 정보들을 링크님께서 잘 정리하여 올려주셨습니다.

[스타오션3]

Full Frontal

님추..추천이없다 ㅠㅠ

[스타오션3]

게시물이 오류가 나서 댓글 옮겨왔습니다 :ㅇ

추천 감사합니다!

[유찡찡]

음 감사합니다. 스크랩하고싶어요!

[스타오션3]

스크랩해 가셔도 됩니다 :D

[에뮤군]

좋은 정보 감사합니다 스크랩해가요

[스타오션3]

에뮤군님 감사합니다 :>

[karuki]

오우! 좋은 정보 감사해요!

[스타오션3]

karuki님 감사합니다 //_//

[미숫가루]

엌!!스크랩할 마이피가 생겼닼!!

[스타오션3]

미숫가루님 마이피 이쁘게 꾸미세요 :D

[호프마니]

마이피꾸미기 저한텐 정말 어렵던데 대단하네요

[호프마니]

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

[스타오션3]

호프마니님 감사합니다. 마이피 꾸미시면서 궁금한게 있으시다면 언제든지 물어봐 주세요 :D

[호프마니]

감사합니다 사실 요즘에는 무서워서 건들지도 못하고 있지만요 ㅋㅋㅋ

[스타오션3]

제가 도와드리겠습니다! ㅋㅋㅋ

[스타오션3]

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

[­크리스탈]

ㅋㅋㅋ마약피 배경꾸미는거 재미들면 정말 마약이죠 ㅋㅋ

[스타오션3]

진짜 마약이에요 ㅋㅋㅋ
마이피 꾸밀때마다 스샷 찍어서 모으고 있어요 ㅋㅋㅋㅋㅋ

[핫싼ㅎ]

오우 핵잼 ㅋㅋㅋ 해봤는데 실패해서 걍 기본쓸려구요 일단 많이 해봐야겠음 ㅎ

[스타오션3]

핫싼ㅎ님 스타일 시트(CSS)에서 '편집'을 선택해주셨는지 확인해보시면 좋을것 같아요.

궁금한게 있으시다면 쪽지로 남겨주세요 :D

[파포카렝]

와 ~~~^^

[스타오션3]

파포카렝님 안녕하세요 :D

[술먹고개된놈]

.mypiZmenu, .readcomment{background-color:rgba(255, 255, 255, 0.7);} /*작성된 댓글 영역*/
.mypiZmenu2, .readcomment2 {background-color:rgba(255, 255, 255, 0.7);} /*작성된 댓글의 댓글 영역*/

저는 요게 안먹히네요 ㅜ.ㅜ 다른것들은 잘 투명하게 되는데 댓글하고 대댓글 창은 투명하게가 안됩니다...

[스타오션3]

위의 소스는 잘 먹히고 있는데, 보니까 그 뒤에 영역이 하나가 더 있었어요.

#mypiRead .mypiReply{ background-color:rgba(255, 255, 255, 0.2);} /* 작성된 댓글 전체 영역*/

[쵸비.]

헉 감사합니다~! 강좌 참고하고 덕분에 마이피 이쁘게 꾸몄습니다ㅠㅠ!!! 어떻게쓰는질 몰라서 고민하구있었는데 잘쓰겠습니다ㅠㅠ!!
그리고 질문을 드려도 괜찮으실지 모르겠지만 혹시 마이피 타이틀.. 글씨를 다른 이미지로 대체하거나 그런 방법이 있을까요..??ㅠㅠㅠ 어쨌든 잘쓰겠습니당..!!

[스타오션3]

쵸비.님 감사합니다 //_//
질문에 대한 답변은 쪽지로 드렸습니다.

[Renoir.]

와.. 감사합니다. 이 글 참고해서 조금만 바꾸어 주었는데도 마이피가 근사해진것 같아요ㅎㅎ css는 뭐가뭔지 하나도 몰랐는데 님의 글들을 읽고나서 조금은 이해가 된것 같기도 하고요. 좋은 글 정말 감사합니다.^^

[스타오션3]

Renoir.님 감사합니다.

[코카콜라 베르나베우]

스타오션 님 감사합니다 스크랩 해갈게요 ^ ^

[스타오션3]

코카콜라 베르나베우님 감사합니다.

[라이온하트]

스타오션3님 또 한가지 배우고 갑니다 감사합니다

[스타오션3]

라이온하트님 감사합니다.

[레나💓]

좋은 정보 감사합니다 !
덕분에 마이피를 꾸밀 수 있게 되었습니다^^

[홍철오니]

이게 언제쩍거야 ㅋㅋ 잘보고갑니다!