* 링크님의 게시물을 참고하며 만든 소스입니다.
* 방법 *
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
님추..추천이없다 ㅠㅠ