[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.07.18 10:50 주요 단어: , , , , ,
  • BlogIcon 마쑤 2011.07.19 11:56 신고 주소 수정/삭제 답글

    새스킨 배포를 축하드립니다^^
    무더위가 한창인데 고생하셨습니다~

    • BlogIcon 금메달.아빠 2011.07.19 22:18 신고 주소 수정/삭제

      예. 성원해 주시는 분이 있어서 무더위를 이기고 공개했습니다.
      공개는 하더라도 블로그 자체에 지명도가 낮아서 연구한 것을 공개한다는 것에 의미를 둔다고 하겠습니다.

  • BlogIcon 서녘서西 2011.07.27 23:11 신고 주소 수정/삭제 답글

    안녕하세요?
    귀한 스킨 다운 받아 놓고도 이런저런 이유로 블로그에 오지 못하다 보니
    감사하다는 인사도 못드렸네요.
    블로그를 이제 새로운 마음으로 시작하는 입장이라 제 블로그에서는 오직
    금메달 아빠 님의 스킨만 번쩍번쩍 빛나네요.^^
    포스팅 열심히 하여 스킨에 부끄럽지 않은 블로그가 되도록 하겠습니다.
    다시 한 번 스킨 감사드립니다.

    • BlogIcon 금메달.아빠 2011.07.27 23:44 신고 주소 수정/삭제

      안녕하세요? 배색을 멋지게 잘 가꾸셨습니다.
      제게도 이런 미술적 감각이 있었다면 얼마나 좋겠습니까!

      앞으로도 좋은 글 기대합니다. 행복한 하루하루 되세요.

  • BlogIcon 도바토 2011.09.25 17:14 신고 주소 수정/삭제 답글

    멋진 스킨이군요~ ^^ CSS3를 적극적으로 활용하셔서 정말 마음에 드네요 빨리 한국에서 IE6이 없어져야 될텐데 ()

    • BlogIcon 금메달.아빠 2011.09.26 22:27 신고 주소 수정/삭제

      만든지 1년이 넘어서 슬슬 질릴 때가 되었는데, 요새는 정이 들어 버렸습니다. 새로 멋진 스킨을 만들어보아야 겠습니다. 도바토님은 독특한 디자인의 흥미로운 스킨에 감각이 있으신가 봅니다.
      행복한 하루하루 되세요.

  • BlogIcon 핫슈 2012.07.15 19:30 신고 주소 수정/삭제 답글

    스킨 너무 깔끔하네요~

    스킨을 받으려면 어떻게 해야하죠?

    메일 주소를 남겨야 하나요?

    너무 깔끔해서 꼭 사용하고 싶습니다.

    nalyweb@nate.com

  • BlogIcon 생컴 2016.11.22 23:35 신고 주소 수정/삭제 답글

    스킨이 너무 맘에듭니다~!! 혹시 아직 배포하신다면^^;;

    bacaptain@naver.com

    여기로 저도 부탁드려도 될까요?

체크하면 비공개 댓글이 됩니다

티스토리 툴바