설치형 태터툴즈와 티스토리는 사실 굉장히 다른 소스로 이루어져 있다는 글을 어디선가 본 기억이 납니다. 그래서, 비슷한 로직으로 돌지만, 시스템의 성격상 처리하는 루틴들이 서로 다른가 보구나- 하고 이해했었죠.

그래서인지 스킨을 제작할 때에도 알아두면 좋은 몇 가지 차이점들이 있습니다. 제가 아는 것들을 적어보죠.

1. 미디어로그 기능은 티스토리에만 있습니다.

http://블로그주소/media 가 주소인 미디어로그 기능은 티스토리에서만 됩니다.
skin.html 에 표현할 때는 미디어로그의 주소는 [ ##_blog_link_## ]media 로,
출력은 <s_media>[ ##_media_content_## ]</s_media> 를 기본으로 해주시면 됩니다.

다만 이는 후에 바뀔지도 모르는 치환자라고 합니다.

2. 키로그의 치환자 사용법이 서로 다릅니다.

일반적으로 설치형 태터툴즈의 경우는 다음과 같고,
<s_keyword>
<ul>
<s_keyword_date_rep><s_keyword_rep>
<li onclick=""></li>
</s_keyword_rep></s_keyword_date_rep>
</ul>
 </s_keyword>

티스토리의 경우는 다음과 같습니다.
<s_keyword>
<ul>
<s_keyword_rep>
<li onclick=""></li>
</s_keyword_rep>
</ul>
</s_keyword>

만약 티스토리에 <s_keyword_date_rep>를 사용하면 키워드가 제대로 표현되지 않습니다. (아무 것도 출력되지 않습니다.)

3. 티스토리는 관리자의 코멘트를 구분하지 못합니다.

설치형 태터툴즈의 경우에는 포스트의 관리자 코멘트는 .rp_admin, 방명록의 관리자 코멘트는 .guest_admin 이라는 클래스가 찍혀 나옵니다. 일반적인 코멘트는 .rp_general과 .guest_general 이고요.

예를 들면 이 클래스를 style.css 에서 다음과 사용하면 관리자의 댓글을 부각시키는 등의 효과를 볼 수 있습니다.

.rp_general      { color:#666;} /* 손님들의 코멘트는 회색으로 */
.rp_admin        { color:#000;} /* 관리자의 코멘트는 검정색으로 표시 */
.guest_general { color:#666;} /* 손님들의 방명록 글은 회색으로 */
.guest_admin   { color:#000;} /* 관리자의 방명록 글은 검정색으로 표시 */

하지만 티스토리의 경우에는 관리자 로그인 상태든 손님이든지 간에 모두 .rp_geneal과 .guest_general로 찍혀 나옵니다. 즉, 포스트의 댓글이든 방명록이든 간에 관리자를 구분하지 못하지요.

이것들 외에도 또 신경써야 하는 게 있으면 알려주세요. ^^
,
얼마 전에 [질문] div에서 float 시켰을 때 IE에서 문제가 생깁니다. 라는 글을 쓴 적이 있습니다. 요약하자면 float:left; 로 붙여놓은 div들 중 가장 마지막 div이 이상하게 표현된다는 것이었죠.

이상하게 표시되는 div

IE에서만 이런 일이 생깁니다. 어제 : 3 이라는 부분이 영역을 벗어나 반복되고 있습니다.


왜 이런 일이 생기는지는 아직 잘 모르겠지만 언제 발생하는지는 실험을 통해 알 수 있었습니다. 예를 들면 이런 소스가 있다고 하지요.

<div id="container">
   <div id="content"></div>
   <div id="sidebar1"></div>
   <div id="sidebar2"></div>
</div>

<style>
#container { width:1000px; margin:0px auto;}
#content    { width:600px; float:left;}
#sidebar1  { width:200px; float:left;}
#sidebar2  { width:200px; float:left;}
</style>

보시면 알겠지만 태터툴즈 스킨에서 기본적으로 사용하는 형태의 구조입니다. (사이드바가 1개있든 2개 있든 그건 관계없습니다.) 위와 같은 구조로 되어 있는 경우에 각각의 div에 내용으로 width를 꽉꽉 채워 넣으면 위와 같은 일이 발생합니다.

보통 제가 제작하는 태터툴즈 스킨의 컨텐츠 영역과 사이드바 영역은 빈 공간이 없이 촘촘하게 붙여두고 채워넣는 편인데요, 그럴 때마다 저런 일이 발생하더군요. 즉, #content와 #sidebar1, #sidebar2 등의 넓이의 합과 #container의 넓이가 같으면서 여타의 빈공간이 확보되지 않는 태터툴즈 스킨을 만들다 보면 발생했습니다.

실제로 그래서 Letter To You 1.1 때도 그렇고 Formal Boxes 1.1 때도 그렇고 여러 번 본의 아니게 table 태그를 사용했었습니다[각주:1].

해결책은? #container 영역을 조금 더 크게 잡으니 해결되더군요. 전체를 감싸는 #container의 width를 3px만 크게 잡아도 문제는 사라지더군요. 위의 예라면 #container { width:1003px; margin:0px auto;} 식으로 하면 되겠지요.

정확한 이유는 저도 잘 모릅니다. 무슨무슨 IE 버그라고 이미 유명한 버그인지도 모르겠어요. [각주:2] 태터툴즈의 스킨 시스템에서만 작동하는 건지도 모르죠. (물론 그럴 일은 희박하다고 보지만요.)

혹시 비슷한 문제 때문에 고민하는 분들은 이와 같은 방법을 시도해보세요. :)


추가

만박님께서 알려주셨습니다. ^^
만박 2007/02/13 20:28

E6의 Three-pixel text job bug하고 duplicate character bug라고 부른답니다. CSS 마스터전략 9장에 나와요 ^^
구글링 해보니 나옵니다. three-pixel text jogduplicate character bug.


추가 #2

PIE의 설명에 따르면 이 버그를 피하는 두 가지 방법이 있다고 합니다.

1. 제일 마지막에 float:left; 된 div에 margin-right:-3px; 을 하라.
2. 제가 위에서 이야기한 것과 같이 container 영역을 3px 크게 줘라.

  1. 물론 table 태그를 사용한다고 크게 잘못되었다는 건 아닙니다. 하지만, 보다 자유로운 디자인을 위해 그리고 디자인과 컨텐츠를 구분하는 코딩을 하려고 할 때 되도록이면 table 태그로 레이아웃을 잡는 일은 하지 않으려 한다는 것 뿐입니다. [본문으로]
  2. 비슷한 현상을 찾아 보려고 구글링 해봤는데 찾지는 못했습니다. 아시는 분들은 알려주세요. [본문으로]
,
설치형 태터툴즈와 티스토리는 단축키를 지원합니다. 이 단축키는 여러 모로 편리한 기능이지요. 이를테면, 관리자 로그인 버튼이 없어도 q 를 누르면 바로 로그인이 되고, 글을 계속 읽고 싶으면 s 를 누르면 이전에 쓴 글 목록으로 가고, a 를 누르면 최근에 쓴 글 목록으로 이동하니까요.

이 편리한 단축키를 사용하고 있으면서도 혹시 로그인 때문에 귀찮음을 느끼시는 분들이 있다면 지금 설명드릴 방법을 추천합니다. ^^

단, 여러 사람이 사용하는 컴퓨터에서는 절대 이 방법을 사용하지 마세요!

(다음의 캡쳐 화면은 브라우저마다 화면이 조금 다를 수 있으나 어떤 내용인지 충분히 아실 수 있을 거예요.)

1. 우선 자신의 블로그를 북마크 (즐겨찾기) 하세요.
사용자 삽입 이미지


2. 입력된 북마크를 마우스 우클릭해서 등록정보를 열어보세요.
사용자 삽입 이미지


3. 그럼 다음과 같은 화면이 나오면
사용자 삽입 이미지


4. 입력된 주소를 다음과 같이 바꾸세요.
    http://본인의티스토리주소.tistory.com/login?loginid=아이디&password=비밀번호
사용자 삽입 이미지

   예를 들어 만약 이 블로그 http://bones.tistory.com 의 로그인 아이디가 abcd@abcd.com 이고, 비밀번호가 vwxyz 라면 http://bones.tistory.com/login?loginid=abcd@abcd.com&password=vwxyz 라고 입력하시고 저장하면 됩니다.

5. 끝.



그러면 앞으로 북마크를 클릭하면 자신의 블로그에 로그인된 상태로 들어가게 됩니다. 쉽죠? :) 설치형 태터툴즈와 티스토리 모두에서 잘 작동합니다.



다만 다시 한번 말씀드리지만 이 방법은 북마크에 아이디와 비밀번호가 그대로 유출되는 방법이므로 피씨방 등과 같이 여러 사람이 사용하는 컴퓨터에는 절대 사용하지 마세요. 그건 피씨방에서 메신저 로그인 해서 친구와 잡담한 뒤 로그아웃 하지 않은 채 계산하고 피씨방을 뜨는 행위와 같습니다;;;

컴퓨터를 혼자서 사용하시는 분들 혹은 귀차니스트들에게 권하는 방법입니다. :)

,
Letter To You 1.1 스킨을 만들면서 수신인 부분 (저 위에 보면 그대에게. 라고 써있는 부분 말이죠.) 이 원하는 대로 표시되지 않아서 고심을 한 적이 있습니다.

수신인 부분은 div 태그로 영역을 정하고 float:left; 로 띄운 다음 margin-left: 로 적당한 거리만큼 우측으로 보냈는데 파이어폭스와 오페라에서는 원하는 거리 만큼 적당히 떨어졌는데 유독 인터넷 익스플로러 (이하 IE)에서만 엄청나게 멀리 떨어지는 거예요. ㅠ.ㅠ

블로그 제목은 margin-left 값이 얼마 되지 않아 차이가 나도 그리 크지 않아서 내버려뒀는데, 수신인 부분은 영역을 벗어나서 아예 화면에 나타나지 않기 때문에 어쩔 수 없이 !ie를 이용한 IE hack을 썼습니다.

#header1 .blog-receiver {margin-left:330px;}
#header1 .blog-receiver {margin-left:170px !ie;}

예를 들어 이런 식으로 적어주면 IE를 제외한 다른 브라우저는 위의 정의를 따르고, IE만 아래의 정의를 따릅니다. 즉 !ie 를 적어주면 IE만 알아듣는다는 뜻이죠.

그러다가 IE에 이와 관련된 버그가 있다는 걸 알게 되었습니다. 파이닷넷 (positioniseverything.net)에 의하면 float:left 한 것에 margin-left 값을 주게 되면 IE에서는 margin-left 값의 두 배가 설정된다는 것이죠.

.floatbox {
  float: left;
  width: 150px;
  height: 150px;
  margin: 5px 0 5px 100px;
  /*This last value applies the 100px left margin */
}

위와 같이 설정되었을 때의 경우를 그림으로 나타내면 다음과 같습니다. 그림 출처는 역시 파이닷넷.

일반적인 경우

보통의 브라우저에서 margin-left:100px; 인 경우

IE의

IE는 두 배가 떨어. 오마이갓!


이런 !@##$@$#@!!# 같은 IE 같으니라고. 그것도 모르고 열심히 삽질했던 거죠. ㅠ.ㅠ

여기서 또 한가지 알아둬야 할 사실은 첫번째로 float된 객체만 이처럼 두 배로 떨어지게 되며, 그 이후에 float된 객체들에는 문제가 없다고 합니다.

해결책은? 다행이 있습니다. float으로 띄우는 객체 (대부분은 div겠죠)가 대부분 display:block;으로 정의되어 있을텐데 이를 display:inline; 으로 정의하면 된다고 합니다. 직접 해보니 아주 잘 됩니다. :)

정리하면 다음과 같습니다.

float:left; 로 띄운 객체에 margin-left 값을 주게 되면 IE에서는 그 값의 두 배만큼 떨어진다.
그럴 때는 해당 객체를 display:inline; 으로 정의해주면 해결된다.

IE 7 에서는 이 버그가 고쳐졌을까요? 배포한 Letter To You 1.1 스킨에는 아직 반영하지 않았지만, 제 블로그 위의 수신인 부분 (To. 그대에게.)을 우선 고쳐놨습니다. 어떻게 보이나요? 적당한 위치에 보이나요? (예전엔 안보였거든요.) IE 7으로 접속하시는 분들이 알려주시면 고맙겠습니다. ^^
,
Letter To You 1.1 스킨을 배포하고, 문제가 없는지 다시 테스트를 해보는데 티스토리에서 키로그 표시가 잘 안되더라고요. 이 주소 말이죠. http://bones.tistory.com/keylog

티스토리와 태터툴즈의 치환자를 적는 방법이 다른 것도 알고 있어서 그것도 처리했고, 배포하기 전에도 테스트를 여러 번이나 했는데 왠 날벼락.

알고 보니 제가 배포하기 직전에 skin.html의 키로그 표시 부분에 태터툴즈용 표시를 그냥 주석으로 남겨뒀는데 그것 때문에 문제가 되었습니다. 제 딴에는 친절하게 차이를 보여주겠다고 생각하고 남겨둔 건데, 오히려 그것 때문에 작동이 안되었군요.

keylog 부분 소스 캡쳐 화면

keylog 부분에 이런 식으로 주석을 남겼거든요.


생각해 본 즉 skin.html에서 html 태그들은 주석처리가 되는 반면 치환자들은 주석의 영향을 받지 않나봐요. 위에서 태터툴즈용으로 한번 뺑뺑이를 돌고 나오니 그 아래에서는 처리가 안되었나 봅니다(하고 추측할 따름이예요). 태터툴즈용으로 해놨던 주석을 지우니 잘 작동됩니다.

혹시 스킨을 만드시는 분들 중에서 치환자가 제대로 작동하지 않으면 저런 식의 코딩이 있었는지 한번 생각해보세요. ^^

어쨌든 지금은 수정이 된 상태이니 Letter To You 1.1 스킨을 이전에 받으신 분들 중 티스토리에 설치하신 분들은 다시 다운 받아주세요. 죄송합니다. :|




,