지금으로 부터 무려 3년여전. 첫 마이피 테마를 만들었다. 이름은 Burarikun. (이름은 특정인물의 그것과 아무런 관련이 없음) 이후 군머도 다녀오고 많은 시간이 흐른 지금 다시 테마 제작에 도전했다.
괴랄한 테이블 레이아웃은 flex-box를 사용해서 전부 박살냈다. Burari²는 1단형 레이아웃 이지만 원한다면 언제든지 2단, 3단으로 개조할 수도 있으며 사용자의 취향에 따라 사이드 바의 위치도 마음대로 바꿀 수 있다. (이것이 바로 flexbox의 힘!!)
CSS3 표준 준수
기본적으로 마이피에서 제공되는 모든 요소에는 스타일이 적용되어 있으며, 불가능할 것 같았던 input image 버튼도 마개조를 시켰다.
방명록도 별도의 스타일이 적용 되어있다.
다만 친구 목록은 스타일 적용이 불가능해서 냅뒀다. (심하게 깨진다 ㅡㅡ) 아무런 클래스가 없어서 wrapper 요소를 css로 불러올 수가 없었다. div[style*='gulim']같은거 써도 안되더라. (실력부족...)
웹 폰트
웹폰트가 적용 되어있다. 노토 산스(본고딕)과 나눔스퀘어가 사용되었다. 두가지 폰트 모두 jsdelivr에서 호스팅하고 있다. 동방개념지국님이 나눔스퀘어를 jsdelivr에 등록하여 주셨다. - 나눔스퀘어 github 페이지
CSS슬라이더
스크립트 적용이 불가능한 마이피 특성상 슬라이더를 넣는 것이 최대 난관이었다. codrops의 CSS3 슬라이더 소스를 참고 했다.
반응형 웹
아~~무 의미 없지만 반응형 웹을 지원한다. 모바일에서 접속해도 똑바로 안뜨는 이유는 viewport지원을 하지 않기 때문. (스크롤 바는 상단 네비게이션 때문에 생긴다)
테마 다운로드
style.css
첨부파일의 CSS파일은 메모장과 같은 텍스트 에디터로 열어서 마이피 디자인 설정 > 스타일 시트 편집 칸에 붙여넣고
슬라이더 소스는 아래의 것을 그대로 복사하여 상단 배경 > 텍스트 칸에 넣어주면 된다.
<ul class="cb-slideshow">
<li><span>Image 01</span></li>
<li><span>Image 02</span></li>
<li><span>Image 03</span></li>
<li><span>Image 04</span></li>
<li><span>Image 05</span></li>
<li><span>Image 06</span></li>
</ul>
<div class="mouse">
<div class="scroll"></div>
</div>
CSS슬라이더 이미지 추가하기
.cb-slideshow li:nth-child(1) span {
background-image: url('http://i2.ruliweb.com/ori/16/08/19/1569e702c2946c91a.jpg')
}
.cb-slideshow li:nth-child(2) span {
background-image: url('http://i2.ruliweb.com/ori/16/08/19/1569e706cf446c91a.jpg');
}
.cb-slideshow li:nth-child(3) span {
background-image: url('http://i3.ruliweb.com/ori/16/08/19/1569e6dafac46c91a.jpg');
}
.cb-slideshow li:nth-child(4) span {
background-image: url('http://i2.ruliweb.com/ori/16/08/19/1569e6e1d9146c91a.jpg');
}
.cb-slideshow li:nth-child(5) span {
background-image: url('http://i3.ruliweb.com/ori/16/08/19/1569e6eb2c446c91a.jpg');
}
.cb-slideshow li:nth-child(6) span {
background-image: url('http://i3.ruliweb.com/ori/16/08/19/1569e6f145446c91a.jpg');
}
위의 소스에서 background-url 부분을 수정하여 스타일시트 편집 맨 아래쪽에 붙여 넣으면 된다.
제목 추가하기
<div class="layer">
<div class="inner">
<h1 class="title">제목</h1>
<p class="by">소제목</p>
</div>
</div>
이 소스를 슬라이더 소스 위쪽에 추가하면 제목과 소제목을 넣을 수 있다. 제목은 항상 가로 세로 정중앙에 위치하게 된다.
하이라이트(링크 색상 바꾸기)
CSS를 텍스트 에디터로 열어서 #3E62E0를 원하는 색상 HEX로 일괄변환 하면 된다. SCSS의 경우 $accent 수정 바람.
전문가를 위한 SCSS 파일도 제공한다.(Github 페이지 참고 바람) 이곳에서는 색상정보가 변수값으로 설정되어 있기 때문에 개인설정 하기가 더 쉽다. 다만 SCSS를 컴파일 할 줄 모른다면 안 쓰는게 낫다.
주의 사항 - IE11이하는 페이지가 제대로 뜨지 않을 수도 있다. 왜냐면 테스트 해보지 않았기 때문. 개념없이 짠 코드라 구버전 브라우저에서는 작동 보장을 못한다. 하위 지원 계획은 없다.
하단의 'Designed by Estoque'만 삭제하지 않는 다면 테마에 무슨 짓을 하던간에 별 상관하지 않는다.
사용된 소스
Noto Sans - 구글 OFL
나눔스퀘어 - 네이버 OFL
Meyerweb 리셋 스타일
Normalize.css - MIT 라이센스
MIT license
Github repo - https://github.com/Estoque/Burari-
Special Thanks to - 동방개념지국
16.08.24
에디션 2 공개와 함께 소소한 패치 단행
- 폰트로드 오류 수정
- 글의 양이 적을 경우 게시글이 한쪽으로 쏠리는 문제 수정
시간나면 커피한잔 이라도 사주는 센스
