화면에 표시되는 페이지가 아주 길거나 필요한 버튼이 화면의 최하단에 있거나 하면 매번 스크롤 하는 게 불편할 수 있습니다. 그럴 때는 보통 키보드의 [home], [end] 버튼을 누르면 되지만 마우스 잡았다가 키보드 버튼 누르는 것 역시 불편하지요. 또한 각종 마우스 제스쳐 프로그램[각주:1]을 사용하면 되지만 그마저도 사용하지 않으면 딱히 방도가 없지요.

그럴 때는 페이지에 아래와 같은 자바스크립트를 넣는 겁니다. <head>와 </head> 사이에 아무데나 넣어주면 됩니다. 그러고 난 후 더블클릭하면 화면의 최상단으로, 다시 더블클릭하면 최하단으로 이동합니다. :)

<script language=javascript>
<!--
toggle=0;
function dblclick() {
    if (toggle==0) {
        var sc=99999; toggle=1;
    } else {
        var sc=0; toggle=0;
    }

    window.scrollTo(0,sc);
}

if (document.layers) {
    document.captureEvents(Event.ONDBLCLICK);
}
document.ondblclick=dblclick;

var IE = document.all?true:false;
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMouseXY;

var tempX = 0;
var tempY = 0;

function getMouseXY(e) {
    if (IE) { // grab the x-y pos.s if browser is IE
        tempX = event.clientX + document.body.scrollLeft;
        tempY = event.clientY + document.body.scrollTop;
    } else { // grab the x-y pos.s if browser is NS
        tempX = e.pageX;
        tempY = e.pageY;
    }

    if (tempX < 0){tempX = 0;}
    if (tempY < 0){tempY = 0;}
    return true;
}
// -->
</script>

제가 만든 스킨들에도 넣어주면 아주 좋겠죠? 다음 스킨들부터는 이 스크립트를 넣을 생각입니다. 이제까지 나온 스킨들에는 죄송하지만 각자 넣어주세요. ^^
  1. 파이어폭스 같은 경우는 All-in-One Gestures,
    인터넷 익스플로러 같은 경우는 IEToy,
    오페라의 경우에는 간단한 마우스제스쳐 기능이 내장되어 있습니다. [본문으로]
,
Docs Triple 1.1

Docs Triple 1.1은 이렇게 생겼습니다.


스킨명

Docs Triple 1.1


개요

일종의 닥스 3종세트 (^^) 입니다. 가격은 3만 9900워… 코발트 블루, 브라운, 그린 이렇게 3가지 테마의 스킨 모음입니다. 좌측에 관리자 로그인 버튼 등의 조그만 스몰바가 위치해 있지만 기본형의 느낌을 그대로 갖고 있는 스킨입니다.

(압축파일을 풀면 총 3개의 스킨이 들어있습니다. 각각 Docs Green 1.1, Docs Blue 1.1, Docs Brown 1.1 입니다.)


내용

- 총 3가지 테마의 스킨이 들어있습니다.

- 각각의 스킨은 모두 동일한 모양이며 2단형 스킨입니다.

- 사이드바는 하단에 위치하고 있지만 태터툴즈의 사이드바 기능을 지원합니다.
   (관리자 모드에서 바로 넣었다 뺐다 할 수 있어요.)

- 좌측에 있는 스몰바에는 RSS, 로그인, 글쓰기 이렇게 3가지 버튼이 들어있고,
  상단의 블로그 메뉴는 위치로그, 태그, 방명록 이렇게 3가지 버튼이 들어 있습니다.

- 하나의 포스트에서 댓글과 트랙백 영역은 색깔을 달리하여
  하나의 문서가 본문/피드백으로 구분되는 효과를 주려 하였습니다.

- 블로그 로고 이미지를 보여줍니다.
  단, 가로 220px 이상이 넘지 않게 해주세요.

- 가로폭은 기본적으로 610px이지만 원하는 폭으로 수정하기가 그리 어렵지 않습니다.
   style.css 와 index.xml 만 수정하면 됩니다.
  수정 방법은 style.css 안에 주석으로 넣어두었습니다.

- 또한 폰트 크기라든지 색깔, 사용된 이미지 등은 style.css 파일을 수정하는 것만으로 가능합니다.

- 최대한 웹표준을 준수하려고 노력했습니다.

- 테스트 환경은 윈도우XP + 파이어폭스 2.0.0.1, 인터넷 익스플로러 6.0, 오페라 9.10 입니다.
  태터툴즈 1.1과 티스토리 1.1에서 잘 작동합니다.

- 자유롭게 수정이 가능하며, 저작권 표시하에 재배포 가능합니다.


다운로드 받으러 가기

▶ (클릭) 태터툴즈 스킨 자료실 [TT 1.1 & 티스토리 1.1] Docs Triple 1.1


그리고

▶ 본문폭 500px 블로그를 위한 스타일시트 다운받기 (3가지 색상 모두 있습니다.)

주의 : 만약 이 스타일시트를 받으면 index.xml 마지막 부분에 있는 contentWidth 값도 변경시켜주세요.
    <contentWidth>610</contentWidth> 이 부분을
    <contentWidth>500</contentWidth> 이렇게 변경시켜야 블로그를 사용하기 편합니다.


그리고 2

▶ 혹시 사이드바의 크기를 300px 이상으로 하시고 싶은 분들은 아래 파일 받으셔서
    자신이 선택한 색깔을 골라  이미지 디렉토리에 덮어 쓰세요.
    그렇게 크게 하실 분이 있을까 싶었는데 있었군요;;;
     (사이드바를 600px까지 사용할 수 있게 됩니다.)


그리고 3

- 참고로 이 스킨에 사용한 폰트는 윈도우에 기본으로 들어있는 Tahoma 입니다. 각각의 버튼이나 타이틀들이 심플한 편이니 비교적 쉽게 다른 버튼이나 타이틀을 추가하거나 수정하실 수 있을 듯 합니다.
,
이전 글에서 FootNote 플러그인을 포함한 ol (ordered list)로 선언된 리스트의 번호들이 나오지 않는지에 대해 적었는데, 문제를 해결한 듯 합니다. 저는 분명히 ol 이나 li 에 대해 따로 선언한 적은 없는데, 어디선가 꼬인 것 같아요. 아직도 정확한 이유는 모르겠습니다. 어쨌든 해결 과정을 보면,


제 스킨들의 경우에는 본문이 article 이라는 클래스 안에 들어있습니다. 물론 태터툴즈에서 제공하는 기본 스킨의 형태를 그대로 유지한 것입니다. skin.html 을 보면 다음과 같은 부분이 있죠.

<div class="article">[ ##_article_rep_desc_## ]</div>

아시다시피 [ ##_article_rep_desc_## ] 는 태터툴즈의 본문 치환자입니다.

그래서, 스타일시트 (style.css)에 다음과 같은 정의를 추가시켰습니다.

.article li { display:list-item; list-style-type:decimal;}

제가 이것저것 다 해본다고 했는데 저건 해보지 않았던 거죠. 어디서도 li 나 ol 전체에 대해 정의한 적이 없으니 이상이 없을 것이다고 생각한 거죠.

IE, 파이어폭스, 오페라에서 모두 제대로 나오는 걸 확인했으니 다른 스킨들에도 추가시켜야겠습니다. => 추가 완료 했습니다.

*

참고로 FootNote를 사용해 주석을 적은 다음 추가되는 코드를 보면 div도 footnotes, ol도 footnotes로 정의되어 있습니다. 이렇게 이름이 같을 경우에는 문제가 있지 않을까 생각해 봅니다.

위의 정의를 스타일시트에 추가한 다음 번호가 제대로 나오는 게 확인이 되면 FootNote의 스타일도 변경할 수 있겠습니다. 예를 들면 이런 식으로 정의가 가능하겠죠.

.footnotes .footnotes li { display:list-item; list-style-type:upper-roman;}

fotenotes라는 클래스가 중복으로 정의되어 있기 때문에 이렇게 해도 작동하더군요.

.footnotes li { display:list-item; list-style-type:upper-roman;}

,
Colorful Waves 1.1 스킨을 공개하고 나서 ataiger님이 이런 요청을 해주셨습니다[각주:1].
Footnote를 사용할 때 번호가 안보이는 걸 보면 본문의 ul CSS 수정이 필요할 듯 합니다.
보통 플러그인을 사용하지 않은 상태에서 스킨을 테스트하기 때문에 뭔가 설정을 해주면 되나보다 싶어서 설치형에서 FootNote 플러그인을 켜니 글입력창에서 FootNote 입력 버튼(링크)이 있더군요.

그런데, 티스토리에서는 아무리 플러그인을 켜도 입력 버튼(링크)가 안나오더라고요. 왜 안나오지? 하며 한참을 고민했는데, 본문에 직접 [ footnote ], [ / footnote ]를 입력하니 표현이 되는군요.

그런데, FootNote를 포함하여 <ol>로 표시된 내용의 번호가 안보이는 문제는 해결하지 못했습니다.

.article ol {list-style:decimal;} 혹은
.article ol {list-style-type:decimal;}

왜  이런 식으로 선언해줘도 안나올까요? ;;;

.
.
.

그런데, 재밌는(?) 건 인터넷 익스플로러에서는 번호가 잘 나온다는 것입니다. -_-* 이유를 잘 모르겠네요. @.@


위의 내용은 처리되었습니다. 다음 글을 봐주세요.
  1. 테스트 한번 해봅니다. [본문으로]
,
스킨을 배포합니다.

Colorful Waves 1.1 스크린샷

Colorful Waves 1.1의 모양은 이렇습니다.


스킨명

Colorful Waves 1.1


개요

컨텐츠 영역이 중앙 정렬되는 가변폭 스킨입니다. 좌우측에 각각 상반되는 색감의 파도 혹은 구름 모양의 배경들이 레이어로 쌓여있는 느낌이 나도록 했습니다. 사이드바는 통째로 하단으로 내려가 있습니다. 좌우측 파도 배경에 쓰인 붉은색과 파란색 계열의 색상은 컨텐츠 영역에서도 어느 정도 역할을 분담하고 있습니다.


내용

- 1단형 스킨입니다.
   사이드바는 하단에 위치하고 있지만 태터툴즈의 사이드바 기능을 지원합니다.
  (관리자 모드에서 바로 넣었다 뺐다 할 수 있어요.)

- 블로그 로고 이미지를 보여줍니다.
  단, 가로 250px 에 최적화되어 있습니다. 주의해주세요.

- 컨텐츠가 들어가는 영역의 폭이 브라우저의 크기에 따라 변하는 변동폭 스킨입니다.
  하지만, 브라우저가 작아진다고 해서 무한정 줄어들 수는 없겠지요.
  컨텐츠 영역의 최소폭은 500px 입니다. 브라우저가 커지면 자연스럽게 늘어나지요.

- 여러 브라우저에서 중앙정렬 및 레이아웃 유지 등을 구현하기 위해
   불가피하게 table 태그라든지 투명 이미지 등을 skin.html에 넣었습니다만,
   대부분의 경우 - 폰트 크기라든지 색깔, 사용된 이미지 등은
   style.css 파일을 수정하는 것만으로 가능합니다.

예를 들어 제목이 표시되는 폰트는 Trebuchet MS 입니다.
영문에는 잘 어울리는데, 한글 제목일 경우에는 좀 어색한 감도 있습니다.
이럴 때 style.css 를 열여서
h1 { font-size:1.8em; font-family:"Trebuchet MS" Georgia Verdana Tahoma Gulim; font-weight:bold;}
부분을 찾아서 변경해주면 됩니다.

- 테스트 환경은 윈도우XP + 파이어폭스 2.0.0.1, 인터넷 익스플로러 6.0, 오페라 9.10 입니다.
  태터툴즈 1.1과 티스토리 1.1에서 잘 작동합니다.

- 자유롭게 수정이 가능하며, 저작권 표시하에 재배포 가능합니다.


다운로드 받으러 가기

▶ (클릭) 태터툴즈 스킨 자료실 [TT 1.1 & 티스토리 1.1] Colorful Waves 1.1


그밖에.

- FootNote 플러그인으로 작성한 후 각주의 번호가 표시되지 않는다고 합니다. 물론 각주의 내용은 잘 표시되고요. 참고로 이 현상은 파이어폭스와 오페라에서 생기는 걸 확인했습니다. 인터넷 익스플로러에서는 잘 표시되네요. @.@ 처리 완료했습니다.

,