[Skin II] 티스토리 스킨 배포 Rainbow

[목차(도우미)]
2011년 정월부터 만들어 사용하면서 다양한 브라우저에서의 사용에도 이상이 없는 것으로 판단되어 이번 기회에 스킨을 공개하기로 했습니다. 처음 스킨에 대해서는 대중성이 없었던 것으로 나름 평가했는데, 이번 스킨을 만들면서는 대중성에 관한 고려를 해보려고 했는데 어떨지 궁금하군요.

주요 특징

  • 다단 메뉴로 구성
  • 최근 글목록/댓글목록/트랙백목록을 메뉴화
  • 메뉴 설정 기능을 사용(티스토리 공지사항 참조)
  • 자동목차를 생성: TOC.js 자바스크립트를 사용하였다.(Skin I 과 동일)
  • 고속으로 페이지 로딩이 가능하도록 경량화(Skin I 과 동일)
  • CSS3의 둥근 사각형, 그림자 효과를 사용
  • 티스토리용 스킨위자드 기능을 사용 (티스토리 공지사항 참조)
  • 메뉴와 사이드바, 바닥글을 사이드바 설정으 로 이동 가능 (티스토리 공지사항 참조)
티스토리 공지사항에 관하여는 티스토리의 페이지를 연결하였으므로 참조하세요.

화면 미리보기


상세 설명

  • 다단 메뉴는 주메뉴, 서브메뉴로 구성되어 주메뉴위에 마우스를 놓았을 때 자동으로 서브메뉴를 표시하도록 하였다. 이것은 스크립트를 사용하지 않고 CSS의 기능만으로 구현된 것이므로 별도의 스크립트가 필요없고 페이지가 가볍게 구현된다. 스크립트로 구현하는 것과 CSS 스타일시트로 구현하는 것의 차이는 크게 없으나 표시 제어에 관하여는 스타일시트로 구현하는 것이 일관적인 제어를 유지할 수 있다.
  • 최근 글목록을 메뉴로 표시한 것은 사이드바가 길어지고 개행되어 읽기 어려운 것을 회피하기 위한 방법이다. 또한 매번 스크롤해서 댓글을 확인하지 않고 마우스를 움직이는 것으로 확인할 수 있다는 장점이 있다.
  • 메뉴 설정 기능에 의한 메뉴는 처음 항목인 "메뉴"의 서브메뉴로 표시된다.
  • 자동 목차에 관하여는 규칙에 맞게 본문을 기입하면 목차를 만드는 기능이다.
  • 경량화하였다는 것은 이미지 파일을 사용을 자제하고 가급적이면 글자로 표시했다는 것을 의미한다.
  • 그대신 CSS3를 사용하여 그림자 효과(box-shadow)와 둥근 사각형(border-radius)을 사용하여 디자인성을 살리기로 했다. CSS3가 발표된지 얼마되지 않아 IE를 쓰는 경우에는 최신 판인 IE9정도에만 구현된다. Opera 10.5 이후 버전, 사파리, 파이어폭스등에도 CSS3는 대응되어 있지만 파이어폭스는 -moz를 접두어로 붙여야 하는 번거로움이 있어서 이번 스킨에서는 열외로 하였다. 사파리의 경우 -webkit을 붙여야 한다고 되어 있으나 없어도 표준을 지원하는 오페라와 동등하게 표시된다. 그러므로 향후 IE9를 비롯하여 표준을 지원한다는 기대하에 파이어폭스에 대한 제조사 고유 표시(-moz) 접두어는 대응하지 않았다. 무엇보다 내가 파이어폭스를 쓰지 않는다는 점에서 굳이 대응하지 않은 것이다. 크롬, RockMelt에 대해서는 사파리를 따라 했으므로 사정은 비슷하리라 본다.
  • 스킨 위자드를 사용하여 화면의 배경색을 고르면 무지개 색을 고를 수 있다. 기본은 bg-gold.png를 사용하지만 bg-red.png, bg-orange.png, bg-yellow.png, bg-green.png, bg-blue.png, bg-violet.png 의 파일이 있어서 각각 색으로 배경색을 고를 수 있다. 이러한 연유에서 스킨 이름을  무지개(Rainbow)로 붙인 것이다. 
  • 사이드바의 이동을 이용하면 사이드바3(바닥글)에 있던 항목을 사이드바2(오른쪽 영역)로 옮길 수 있다. 다만 폭이 맞지 않아서 최적화되어 있지는 않다.

저작권 표기

무료입니다. 자유롭게 사용하세요. 단 원저작자 표시를 지켜 주세요. 스킨을 수정하다가 생기는 문제에 대해서는 일체 책임을 지지 않습니다. 사용중인 스크립트, 광고등은 수정하기 전에 보관해 두고 수정하세요.

다운로드

이전에는 스킨을 공개해서 배포했지만 2012년2월1일부로 더이상 배포하지 않습니다. 사용하기를 원하시는 분은 댓글을 남겨 주시기 바랍니다.
by 금메달.아빠 on 2011. 7. 18. 10:50