저는 원래 태터툴즈 클래식 사용자입니다. 태터툴즈 1.1과 티스토리의 사용은 스킨을 만들고 싶어서 사용하게 된 것이고요; (이유가 좀 웃기군요. ^^)

티스토리용 기본 스킨

티스토리용 기본 스킨

따라서, 제가 처음에 스킨을 만들 때 참고했던 스킨이 바로 티스토리용 기본 스킨이었습니다. skin 폴더에 tistory라는 폴더에 들어있었지요.

이 티스토리용 기본 스킨과 태터툴즈 스킨 레퍼런스를 벗삼아 스킨의 구조도 익히고, 치환자도 확인해가며 익혔죠. 그런데, 오마이갓- 이제까지 제가 만들어 온 스킨에 뭔가 이상한 게 있다는 걸 이제야 알았습니다.

굳이 이야기하자면 이상하다기 보다는 뭔가가 빠진 거죠. 저도 왠지 그게 이상했던… 바로 그것입니다.

예, 이미 아시는 분들도 많으실 거라 생각합니다. 바로 제가 만든 스킨들에는 방명록에 비밀글 체크박스가 없더군요. ㅜ.ㅡ

오늘에야 알았습니다. 곰님이 얼마 전 방명록에 비밀댓글이 가능하냐고 여쭤보셨는데, 저는 안된다고 알고 그렇게 대답했거든요. -_-; 태터툴즈의 공식 스킨 레퍼런스에도 비밀글 입력 체크박스에 대한 치환자는 없었거든요.

태터툴즈 스킨 레퍼런스 중에서

보세요. 없잖아욧~!


그런데, 다른 블로그에 가보면 그런 게 있고 해서 참 신기했었거든요. 무슨 플러그인이 있나보다. 하지만, 배포용 스킨은 플러그인까지 신경쓸 수 없다는 게 제 생각이기 때문에 그냥 넘어갔었는데, 다른 분들이 만든 스킨을 보다가 [ ##_guest_input_is_secret_## ] 라는 치환자가 있다는 걸 알게 되었습니다. 오마이갓.

이제까지 제 스킨을 받으신 분들 중 혹시 방명록에 비밀글 기능이 필요하신 분들은 다음과 같이 조치해주시면 될 듯 합니다.

skin.html을 열어서 <s_guest_form> 과 </s_guest_form> 사이에 홈페이지 입력란 바로 아래에 다음과 같은 코드를 살짝 추가해주시고,

<p class="secret-wrap">
     <input type="checkbox" class="checkbox" id="[ ##_guest_input_is_secret_## ]" name="[ ##_guest_input_is_secret_## ]" />
     <label for="[ ##_guest_input_is_secret_## ]"> 비밀글 </label>
</p>

(실제로 추가하실 때는 [ 와 ##_ 를 붙여서 사용하시는 거 아시죠?)

style.css 에도 다음처럼 추가해주세요. 위치는 그냥 아무 곳에나 넣어주시면 되요.

.guest-write .secret-wrap    {}
.guest-write .checkbox        { width:25px; border:none; padding:0; margin:0; }



앞으로 새로 만들 스킨들에는 방명록의 비밀글 기능을 꼭 넣겠습니다. 또, 이제껏 제가 만든 스킨들도 조금씩 업그레이드를 할텐데, 그 때는 꼭 이 기능을 추가하겠습니다. 죄송합니다;;; (아아- 진짜 몰랐어요. 저는 플러그인 기능인 줄 알았어요. -_-)

우선 가장 최근에 배포한 스킨인 Formal Boxes 1.1 에는 적용을 했으니 별다른 수정을 하지 않으신 분들은 자료실에서 다시 받으시면 되겠습니다.

태터툴즈 관계자분들 중 이 글 보시면 스킨 레퍼런스에도 이 치환자를 추가해주세요.

,
스킨을 배포합니다.

Formal Boxes 1.1

Formal Boxes 1.1 입니다.


스킨명

Formal Boxes 1.1


개요

처음에는 '단순'이란 개념에서 시작한 스킨입니다…만 몇 가지 포인트를 주다보니 간단한 느낌은 처음보다는 줄어들었습니다. 그래도 레이아웃만을 보자면 매우 단순한 편입니다. 특징으로는 테마 기능을 가지고 있습니다.


내용

- 3단형 스킨입니다. 태터툴즈의 사이드바 기능을 지원합니다.
  (관리자 모드에서 바로 넣었다 뺐다 할 수 있어요.)
  3단형 스킨은 처음 만들어 봤는데, 별로 산만하지 않고 괜찮아 보이는 듯 합니다.
 
- 블로그 로고 이미지를 보여줍니다.
   단, 너무 큰 이미지는 넣지 말아주세요.
  자동으로 리사이즈하는 태그를 넣지 않았습니다.
  (가로 사이즈 160px에 맞춰져 있습니다.)

-  스킨을 다운 받아 압축을 풀면 2개의 폴더가 있습니다.
    예, 하나는 설치형 태터툴즈용이고 다른 하나는 티스토리용이죠.
    폴더명 끝에 표시가 되어 있으니 선택해서 사용하시면 됩니다.

   두 스킨의 차이는,
   티스토리용에는 media 메뉴가 있고, 댓글의 날짜 표시가 플레이트형이 아닙니다.
   설치형 태터툴즈용에는 media 메뉴가 없고, 댓글의 날짜도 플레이트형입니다.


설치형 태터툴즈용은 댓글의 날짜 표기 형태가 플레이트형입니다.


타스토리용의 댓글 날짜 표기는 플레이트형이 아닙니다.


하지만 두 스킨 모두 본문과 방명록의 날짜 표기는 플레이트형입니다.


- 컨텐츠가 들어가는 부분의 가로폭은 500px 에 맞춰져 있습니다.
  물론 제가 만든 여느 스킨들처럼 가로폭을 수정하는 게 그리 어렵지는 않습니다만
  본문폭을 넓히다 보면 제일 많이 사용하는 해상도인 가로 1024px 를 넘어가기 쉽습니다.
  주의하세요. ^^

- 역시 style.css 와 index.xml 만 수정하면 됩니다.
   본문폭은 style.css의 주석으로 표시한 contentWidth와 관련된 수식에 맞춰서 수정하면 됩니다.

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

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

- 자유롭게 수정이 가능하며, 저작권 표시하에 재배포 가능합니다.
   테마별 스타일시트에 들어있는 값들을 수정하고,
   배경만 잘 정해도 여러가지 분위기가 연출될 수 있을 듯 합니다.


간단하게 스킨 구조를 표시하면 다음과 같습니다

스킨 구조

스킨 구조

<div id="header"></div>
<table id="content-table">
  <tr>
    <td id="content-table-td"><div id="content"></div></td>
    <td id="sidebar-table-td-1"><div id="sidebar1" class="sidebar"></div></td>
    <td id="sidebar-table-td-2"><div id="sidebar2" class="sidebar"></div></td>
  </tr>
</table>
<div id="footer"></div>


이 스킨은 테마 기능을 제공합니다.

테마

테마 선택기입니다. 박스에 마우스를 대면 이름이 툴팁으로 나와요.


1. 기본적으로 blue 테마가 지정되어 있습니다.

2. 총 8개의 테마가 있습니다. blue, gray, violet, brown, greengrass, brown,
    jade, pinklove, jadebubble, greenbubble 입니다.
    테마 선택기 박스를 클릭하면 해당 테마로 바로 변신합니다.

3. 테마별로 필요한 스타일시트들은 images 폴더 안에 각각 저장되어 있으며
   각각의 파일 이름은 style.테마이름.css 입니다.
   예를 들어 brown 테마라면 style.brown.css, red 테마라면 style.red.css 겠죠.

  (따라서, 만약 기본 스타일시트인 style.css에서 원하는 정의를 찾지 못한다면
    위의 테마별 스타일시트를 찾아보시면 됩니다.)

4. 기본 테마를 변경하고 싶으시면
    skin.html의 8번째 줄, 97번째 줄의 스타일시트를 원하는 테마로 변경하세요.

    (예: 만약 greengrass 테마를 기본 테마로 하고 싶으면
          8번째 줄과 97번째 줄의 스타일시트를 style.greengrass.css 로 바꿔주세요.
          red 테마로 바꾸고 싶으면
          8번째 줄과 97번째 줄의 스타일시트를 style.red.css 로 바꿔주면 되겠지요.)

6. 만약 테마 기능을 사용하고 싶지 않다면
    38번째 줄부터 시작되는 [테마 선택기 자바스크립트] 를 모두 지워주시고,
    141번째 줄 정도부터 시작되는 [테마 선택기] 부분 역시 지워주시면 됩니다.

소개 영역에 대해 설명드립니다.

소개 영역

소개 영역의 내용은 각자 채워주세요.


0. 블로그에 접속하면 제목 아래 부분에 나오는 박스입니다.
    내용을 각자 원하는 구문으로 수정하시면 됩니다..
    skin.html 136번째 줄의 introduce 안의 details 안의 내용을 고치면 됩니다.
    테마 선택기도 다른 영역으로 옮겨도 됩니다. 아예 삭제할 수도 있지요.
    스킨을 열어보시면 바로 아실 거예요.

※ style.css 를 보시면 introduce 의 폰트가 정의되어 있습니다. (248번째 줄)

※ 소개 영역은 블로그 메인이나 http://블로그주소/포스트번호 로 들어오는 경우에 나타납니다. 개인적으로 테터툴즈의 주소 표시 방법 중 문자로 표시하기를 사용하시면 효과가 좋을 거라 생각합니다.

※ 만약 이 영역을 사용하고 싶지 않으면 skin.html에서 지우시면 됩니다. (134 ~ 142번째 줄)


- 원래 의도는 단순한 스킨을 원했는데 오히려 설정해야 할 것들이 많아져서 자칫 사용하기 어려운 스킨이 된 것도 같습니다.

- 하지만, 스킨 파일을 어느 정도 보시는 분들이나 html과 css에 대해 조금씩 아시는 분들 혹은 공부하시는 분들은 갖고 놀기 좋은 스킨이 되지 않을까 생각하기도 합니다. ^^ 또 그게 태터툴즈와 티스토리의 매력 중 하나이기도 하니까요. 무한자유!



다운로드 받으러 가기

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

,
아르님이 포스팅한 글을 재밌게 읽었습니다. 저도 마루 디자인이나 팔글의 디자인을 보면서 "어, 비슷하네?", "그런데, 스킨 제작자가 티스토리네?" 이런 생각들을 했었거든요.

그런데 사실 저도 비슷한 스킨을 만들고 있었습니다. 해외 사이트들을 둘러보다 보니 사이드바 두 개가 우측에 나란히 있는 디자인들이 재밌더라고요. 생각보다 그리 혼란스러워 보이지도 않고, 디자인에 따라 심플하기도 한 형태가 좋았습니다. 그래서 만들어봤죠.

괜히(?) 몇 가지 시도를 하는 바람에 테스트를 더 해야 하는 관계로 아직 공개는 못 하겠습니다만, 한가지 말씀드릴 수 있는 건 스킨에 사용되는 이미지가 거의 없는 심플한 디자인이라는 것입니다. 보시다시피요. :)

몇 가지 궁금한 게 있는데 어떻게 해결해야 할지 잘 모르겠습니다. 나중에 포럼 등에 질문을 해야할까 봐요. 혹시 이유를 아시는 분들은 알려주시면 감사하겠습니다.

하나. 이 스킨은 날짜 데이터를 조금 손 봐서 아래와 같이 날짜를 표현합니다. (자바스크립트를 이용해서 다른 거 필요없고 그냥 스킨만으로 가능해요.) 날짜판에 마우스를 대면 시간도 볼 수 있지요.

날짜판 모양

날짜판은 이런 식으로 보여집니다.

저런 형태의 출력을 댓글과 트랙백에도 똑같이 적용했는데 티스토리에 올려놓으니 아예 나오지가 않습니다. 설치형 태터툴즈는 아래처럼 잘 나오는데 말이죠.

설치형 태터툴즈에서의 작동 화면

설치형 태터툴즈에서는 트랙백과 댓글에서도 되거든요.

티스토리는 댓글과 트랙백 창을 여는 방식이 태터툴즈와는 다른가 봐요. 되면 좋은데;;;

=> 맞는 듯 합니다. 댓글과 트랙백을 기본으로 펼쳐놓으니 제대로 표시가 됩니다.

둘. 아래처럼 블로거들마다 자신들의 문구를 직접 적어넣을 수 있게 만들려고 합니다. 그냥 skin.html을 열어서 적으면 되는데요, 이게 언제나 표현되는 게 아니라 메인 화면에서만 나오게 하고 싶은데 그게 잘 안되는군요. (지금 이 스킨에 나오는 문구는 그냥 예로 집어넣어 본 거예요. ^^)

body-id를 사용해서 위치로그나 태그, 키로그, 방명록 등에서는 안 보이게 했는데, 글을 하나씩 볼 때는 안 보이게 못했습니다. 리스트가 주룩 나오는 화면에서만 보이고, 개별 포스트에서는 안 보이면 좋을텐데 말이죠.
 
커스텀 영역 지원

커스텀 영역을 지원합니다.


어? 이건 티스토리에서 되는군요. 신기해라. 알고 보니 /entry/ 가 들어간 주소는 먹는데, 주소 뒤에 그냥 숫자로 붙는 주소에서는 제대로 작동하지 않는 것이었군요.

아, 그리고 원래는 이렇게 배경색이 있는 형태가 아니라 깨끗한 흰 바탕 버전이었는데 아르님의 글을 보고 색깔이 있어도 괜찮겠다 싶어서 배경색을 넣어 본 것입니다. 그냥 흰바탕의 스킨도 공개할려고요. (레이아웃이 색깔 있을 때와는 살짝 달라서 각각 따로 공개할 생각입니다.)

호응이 좋으면 아르님 이야기처럼 선착순 배포…? ^^
,
태터툴즈의 스킨을 제작하는데 아주 유용한 도움을 주는 레퍼런스가 있습니다. 바로  태터툴즈 스킨제작 레퍼런스 입니다. 총 5단계로 잘 설명이 되어 있죠. 이 레퍼런스를 보면서 제가 생각했던 걸 천천히 적어 볼 생각입니다. 초보자의 마음으로. :)

태터툴즈 뿐만 아니라 여러 블로그툴에서 가장 쉽게 볼 수 있는 구조는 바로 중앙의 본문과 그 옆에 각종 정보가 표현되는 형태가 아닐까 합니다. 메인 컨텐츠도 읽을 수 있고 사이트의 현황도 바로 파악할 수 있는 구조라서 그러겠지요. 그리고 위에는 블로그 정보, 아래에는 저작권 등의 정보가 포함되겠죠.
태터툴즈 기본형 스킨의 구조

출처는 태터툴즈 스킨제작 레퍼런스 step02

레퍼런스에서도 바로 이런 구조를 기본으로 삼고 있습니다.

자, 그럼 skin.html에 들어갈 코드를 간단하게 적어보겠습니다.

skin.html

<div id="container">
    <div id="header">
        <!--
            각종 헤더에 들어갈 내용들. 예를 들면 블로그 제목, 메뉴 등이 있겠지요.
        -->
    </div>
    <div id="content">
        <!--
            실제 내용이 들어갑니다. 기본 포스트들 이외에도 위치로그, 태그, 방명록 등
            본문 영역에 표현 될 여러 내용이 모두 이 안에 포함되지요.
        -->
   </div>
   <div id="sidebar">
       <!--
           사이드바 내용이 들어갑니다. 블로그 설명, 최근글, 댓글, 트랙백, 카운터 등
            각종 추가 정보들이 들어갑니다. 위 그림에서는 sideinfo 라는 영역이겠죠.
       -->
   </div>
   <div id="footer">
       <!--
           저작권 표시라든지 사이트 정보 등을 위한 영역이겠죠.
           기본 스킨에는 이곳에 블로그 메뉴가 한 번 더 반복되고 있습니다.
       -->
   </div>
</div>

대부분의 스킨이 저 구조를 따르고 있습니다. 제 스킨들도 대부분 그렇죠. 그럼 이렇게 적어주면 위의 그림처럼, 기본형의 형태로 표현이 될까요? 아닙니다. 이런 식으로 표현이 되지요.

영역별 색깔 구분

아니, 위와 다르잖아-!

(실제로는 각 영역을 구분하는 선도 없고, div 끼리 저렇게 공간도 없고 딱 붙어있지요. 이 그림들은 이해를 돕는 방법으로 표현된 것입니다.) div 태그에 스타일 정의가 하나도 되어 있지 않기 때문입니다. div란 division marker 즉, 영역을 구별하는 태그인데, 쉽게 설명하자면 div는 기본적으로 영역을 위, 아래로만 구분하거든요.div의 가로 영역은 화면의 왼쪽 끝에서 오른쪽 끝까지 입니다.

그럼 우리가 원하는 레퍼런스에 나오는 스타일을 만들어주기 위해 스타일시트를 만들어야 합니다. 기본 스킨이 style.css 를 이용하니 거기에 정의를 해주면 되겠지요. 꼭 필요한 것만 적어보도록 하겠습니다.

style.css

#container {
       margin:0px auto;
       width:800px;
}
#header {
       height:200px;
}
#content {
       float:left;
       width:500px;
}
#sidebar {
       float:left;
       width:300px;
}
#footer {
       clear:both;
       height:200px;
}

이렇게 적어주면 대충 제일 위의 이미지처럼, container 안에 header가 시작되고, 그 아래 content와 sidebar가 사이좋게 영역을 차지하고, 그 아래 footer가 깔리게 됩니다.

여기서, width, height는 말 그대로 넓이와 높이를 선언해주는 것이죠. 쉽습니다. 쉬운 건 넘어가고 핑크색으로 되어 있는 것만 설명해보죠.

#container의 margin:0px auto;

사실 margin도 여백이라는 뜻이니 쉬운데, 뒤에 붙은 auto가 특이합니다. 결론만 말하면 margin에 auto를 붙이면 가운데 정렬이 됩니다. 화면의 가로폭이 1024px인데 container가 의 가로폭이 800px이고, 좌우 여백을 auto로 맞추려면 가운데 정렬되는 수 밖에 없겠죠.

container가 다른 div를 모두 감싸고 있기 때문에 전체 레이아웃이 가운데 정렬이 됩니다. 만약 좌측 정렬하고 싶으면? auto를 지워주면 됩니다. margin:0px; 이렇게 적어주면 좌측 정렬되겠지요. 모든 html 요소들은 좌측부터 시작하니까요.

#content의 float:left

이건 div를 띄워서 좌측에 위치시키라는 뜻입니다. 결과에 입각해 말하자면, 가로폭은 500px이면서 띄워서 왼쪽에 붙이니 여기까지만 적는다면 이런 모양이 되겠지요.

content가 떴습니다.

자, content가 떴습니다.

예, 공중에 떴습니다. 즉 화면에 붙는 공간을 잡아먹지 않고 떴기 때문에 sidebar와 footer가 header 바로 아래에 달라 붙었군요. 그리고, 분명히 content 영역은 sidebar와 footer가 있든 말든 그 위에 떠있습니다.

#sidebar의 float:left

자, 이젠 sidebar 영역도 띄우라고 했군요. float 속성은 서로 같은 속성이 반복될 경우 차근차근 순서대로 달라붙습니다. (float:left가 반복되면 왼쪽에서 오른쪽으로 순서대로 달라붙고, float:right가 반복되면 오른쪽에서 왼쪽으로 달라붙겠죠.) content 영역도 띄웠고, sidebar 영역도 띄운다면… 상상이 되십니까? 맞습니다. 이렇게 되지요.

sidebar도 떴습니다.

sidebar도 떴습니다.

두 개의 div가 떴기 때문에 footer 영역이 header 영역 바로 아래로 달라붙었습니다.

그렇다면 sidebar를 float:right 시키면 어떻게 될까요? 맞습니다. 이렇게 됩니다. 오른쪽에 가서 달라붙게 되지요.

sidebar도 떴습니다. #2

뜨긴 뜨는데, 오른쪽에 달라붙겠지요.


#footer의 clear:both

그런데, 이래선 곤란합니다. content와 sidebar는 사이좋게 옆으로 붙어서 좋은데, footer가 그 아래로 겹쳐서 표현되면 안되겠지요. (물론 어떤 레이아웃들은 의도적으로 겹쳐 놓지만 이 경우는 각자 보이는 게 목표니까요.) 그래서, footer 영역이 자리잡을 위치를 초기화시켜줍니다.

clear:left; 는 위에 float:left 한 게 있다면 그 영역을 존중(^^)해주고 겹치지 않게 그 아래에 표시하라는 뜻입니다. clear:right; 는 float:right 한 것의 영역을 존중(^^)해주라는 뜻이겠지요.

clear:both는 float:left 든 float:right든지 상관없이 모두 존중하라는 뜻입니다. 따라서, 이렇게 표현이 됩니다.

footer가 겹치지 않습니다

footer가 겹치지 않고 착하게 아래로 내려옵니다.



사실 이 글을 읽는 분들은 대체로 table 태그 정도는 알고 계실 겁니다. 그리고, 그 태그가 얼마나 막강한지도 말이죠. rowspan과 colspan까지 사용하면 세상의 모든 바둑판 모양의 레이아웃은 전부 표현할 수 있습니다. 로직 또한 아주 직관적이죠.

그러나, 우리가 이 막강한 table 태그를 사용하지 않고 어렵고 복잡한 것 같아 보이는 div 태그 (span 태그도 비슷해요.)와 css를 사용하는 이유는 위처럼 어떤 면에서는 이게 더 편하고 강력하기 때문이지요.

이런 식으로 하나씩 알게 되면 skin.html를 열어봤을 때 table 태그로 이루어져 있지 않더라도, style.css에 여러가지 선언들이 되어 있더라도 헉- 하는 소리는 나오지 않을 것 같아요. :)

,
스킨을 배포합니다.

Letter To You 1.1

Letter To You 1.1 스킨입니다.


스킨명

Letter To You 1.1


개요

예, 편지입니다. 제가 예전에 좀 멀리서(^^) 블로깅을 한 적이 있었는데, 블로그에 접속해서 글을 적고 답글을 달고 하다보니 마치 편지를 적는 듯한 느낌이 들더군요. 안부를 묻고 전하고 그런 느낌 말이죠. 그 때 생각했던 컨셉을 완성했습니다. 편지봉투와 편지지 그리고 연필로 분위기를 잡아주고 있습니다.


내용

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

- 블로그 로고 이미지를 보여줍니다.
  단, 너무 큰 이미지는 넣지 말아주세요.
  자동으로 리사이즈하는 태그를 넣지 않았습니다.

- 컨텐츠가 들어가는 부분의 가로폭은 500px 에 맞춰져 있습니다.
  물론 제가 만든 여느 스킨들처럼 가로폭을 수정하는 게 그리 어렵지는 않으나
  위의 편지봉투와 메뉴들 간의 레이아웃을 고려하면서 수정하는 게 쉽지는 않을 듯 합니다.

- 하지만 당근 직접 수정을 하실 수도 있지요.
  역시 style.css 와 index.xml 만 수정하면 됩니다.
  대부분의 경우 style.css의 주석에 적어둔
  contentWidth과 관련된 수식에 맞춰서 수정하면 큰 문제는 없을 것입니다.

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

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

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

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



그리고 몇 가지 설명할 게 있습니다.

0. 스킨을 다운 받아 압축을 풀면 2개의 폴더가 있습니다.
    예, 하나는 설치형 태터툴즈용이고 다른 하나는 티스토리용이죠.
    폴더명 끝에 표시가 되어 있으니 선택해서 사용하시면 됩니다.

1. 관리자 로그인을 하려면 우측 상단의 연필심 부분을 클릭해주세요.
   따로 버튼이 보이지는 않습니다.

사용자 삽입 이미지

2. 좌측 상단에 From 부분의 이름은 블로그의 주인장 이름입니다.
    이름에는 rss 링크가 걸려있어요.
    (물론 사이드바 하단에 rss 버튼이 따로 존재합니다.)
    skin.html 을 열어서 조사 (~가, ~이)를 수정할 수 있습니다.
    <div id="blog-author"><a href="[ ##_rss_url_## ]" onclick="window.open(this.href); return false;" onfocus="this.blur();">[ ##_blogger_## ]</a>가.</div>
    18번째 줄이죠.

사용자 삽입 이미지

3. 물론 편지봉투 좌측 하단에 나타나는 어두운 갈색 바탕의 글자는 블로그 제목입니다.

4. To 즉, 받는 사람의 경우에는 skin.html 을 열어서 직접 수정할 수 있습니다.
   <div class="blog-receiver">그대에게.</div>
   22번째 줄이죠.

사용자 삽입 이미지

5. From 과 To 의 이름을 css의 float으로 맞춰놨는데, 이상하게도
    파이어폭스와 인터넷 익스플로러, 오페라에서 모두 제각각 나타나더군요.
    브라우저마다 조금씩 위치가 다릅니다. 이점 이해해주시고,
    혹시 완전히 이상하게 나오는 (혹은 아예 안나오는) 브라우저가 있으면 알려주세요.



다운로드 받으러 가기

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



그리고

익스플로러 7에서 제목 부분에 문제가 있다고 하는군요. ㅜ.ㅜ 이 스킨으로 보자면 [To. 그대에게] 부분과 [Skins And Bones] 부분이 겹친다고 합니다. 브라우저마다 표시가 다 다르게 되니 참 어렵군요. 이 부분은 아무래도 다른 방안을 생각해 봐야겠어요. (예를 들자면 psd 파일을 제공해서 각자 직접 이름을 적게 한다든지 하는 방안 말이죠.) 하지만, 그 밖의 브라우저에서는 별 다른 이상 없을 거예요. ==> 인터넷 익스플로러의 float-margin 버그 를 알아서 일단 제 블로그에만 조처를 해두었습니다. 만약 이게 여러 브라우저에서 잘 보이면 이 방법으로 패치를 할 생각입니다.

또한 코멘트 폼에서 탭키를 누르면 순차적으로 이동해서 '댓글달기'버튼으로 가게 되어있는데, 익스플로러 7에서는 역시 사파리에서 잘 안된다고 합니다. 으윽; (그래도 이건 치명적인 건 아니니까;;; )



그리고

2007년 2월 3일 6시 30분 이전에 받으신 분들 중 키로그 출력이 잘 안되시는 분들은 다시 받아서 skin.html을 재설치 해주세요. (특히 티스토리를 쓰시는 분들) 키로그 쪽에 주석을 달아뒀는데, 그게 출력에 영향을 끼친다는 걸 발견했습니다. 설치용 태터툴즈용 주석을 지우니 잘 작동되는군요. 죄송합니다. :|



그리고

설치형 사용자들 중에서 빨간테두리가 나오시는 분들은 style.css에 가서 136번째 줄의 border:1px solid #f33; 으로 되어 있는 걸 지워주세요. 디버깅용으로 남겨두었던 것인데 제가 위의 주석 지우다가 다시 활성화시켰더군요. 죄송합니다. 물론 지금 다운로드 버전은 괜찮습니다. 스킨 배포 하면서 실수가 정말 많군요.
,