제가 이전에 만들었던 마이피용 CSS3 스타일 입니다.
딱히 베포를 고려하고 만든건 아닌데, 막상 마이피 활성화시켜 놓고 보니 쓸일이 거의 없어서 저보다 활발하게 운영하시는 분들이 쓰시는게 더 좋을것 같아 CSS 소스를 공개합니다.
상단배경에 들어오는 부분이 화면 가장 상단에 위치하며 고정되어 있습니다. 기본 루리웹 툴바나 다음 툴바는 아래 위치해서 안 보입니다.
마이피 관리에서 메인 인사말 부분은 전체글 보기시 게시글 맨위에 나타나는 부분입니다.
좌측배경은 이자리에 위치하게 됩니다. 위젯 코드를 넣으면 여기 배치가 되며, 자동으로 왼쪽 정렬이 됩니다.
관리자 뷰에서는 메뉴가 이렇게 뜹니다. 비회원 뷰에서는 메뉴가 아래로 밀리지 않으니 크게 신경안쓰셔도 될 부분입니다.
스타일 시트에서 주의 하셔야 할부분을 알려드리겠습니다.
우선 윗부분에 리셋스타일은 건드리지 않는게 좋습니다. 리셋스타일 아랫부분을 수정해주세요
/* !바디스타일 */
/* line 69, ../sass/mypi.scss */
html {
background: url(http://img2.ruliweb.daum.net/mypi/gup/a/246/4/o/3131098000.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; }
/* line 78, ../sass/mypi.scss */
body {
background: url(http://img2.ruliweb.daum.net/mypi/gup/a/246/4/o/3126039990.jpg);
font-family: 'Roboto Slab',Nanum Myeongjo, serif;
color: #5f6f81; }
html부분에 들어가는것이 1단계 배경입니다. 배경을 수정하고 싶으시면 이 부분을 수정하면 됩니다. 이미지는 항상 100% 넓이로 채워지기 때문에 가로 해상도가 1920 이상 되는 파일을 추천합니다.
body부분의 배경은 1단계 배경위에 올려지는 2단계 배경입니다. 2픽셀짜리 간단한 패턴입니다. 필요없으시면 지워버려도 됩니다.
그외에는 특별히 주의사항은 없습니다. 스타일시트를 보시면 제가 주석을 무척 많이 달아 놓아서 읽어보시면 어디가 어디인지 대충 감이 오실겁니다.
mypi.css수정은 자유입니다. 다만 재배포는 삼가해주세요.
첨부파일 받아서 메모장으로 열면 됩니다.
