각주(footnote) 풍선말 도우미

티스토리에서 텍큐닷컴으로 옮길 때 가장 어이가 없던 것은 각주를 풍선도움말로 띄워주는 기능없다는 것이었다.
티스토리나 설치형 텍스트큐브에선 기본적으로 사용하는 기능인데, 이런 기능이 구현되어있지 않다니...

그래서 텍큐닷컴 용 각주 풍선말 도우미를 만들었다.
이 도우미를 사용하려면 아래의 절차를 따르면 된다.


1. 관련 파일 설치

언제나 그렇듯이... 아래 파일의 압축을 푼 뒤 스킨 업로드를 통해 업로드한다.



2. 스킨 수정

역시, 언제나 그렇듯이... 스킨을 수정한다.
아래의 코드를 <body> 다음에 추가한다.

<script type="text/javascript" src="(자기 블로그 이미지 주소)/j_footnote.gif"></script>
<script type="text/javascript">
  tcFootnoteHelper.all("(자기 블로그 이미지 주소, 마지막에 / 포함)");
</script>


여기서 특히 주의해야 할 점은 마지막에 /를 반드시 붙여야 한다는 것이다.
블로그 이미지의 주소는 보통 다음과 같은 형식이 된다.
(아래 예에서도 마지막에 /를 붙였다는 것에 유의하기 바람)

http://fs.textcube.com/blog/1/2345/skin/6/images/



3. 스타일 수정

일부 스킨에선 디자인을 깔끔하게 하기 위해 <li> 앞에 숫자가 아닌 불릿을 표시하는 경우가 있다.
각주에서는 무조건 숫자로 표시해야 되니, 아래와 같은 스타일을 style.css의 마지막에 지정한다.

.footnotes li
{
  list-style-type: decimal;
  list-style-position: outside;
  margin-left: 25px;
  padding-left: 0;
}


이 도우미를 적용하면 텍큐닷컴에서도 아래 그림과 같이 풍선도움말을 띄울 수 있다.


Trackback 2 Comment 34
  1. Favicon of http://minimonk.tistory.com BlogIcon 구차니 2009.12.07 09:42 address edit & delete reply

    각주는 어떻게 쓰는건가요 ㅋ
    이쁘긴한데 쓸일이 많지 않아서 말이죠 ^^;

    • Favicon of http://zockr.tistory.com BlogIcon zockr 2009.12.07 12:58 address edit & delete

      글의 일부를 [footnote] ~ [/footnote]로 감싸면 자동으로 각주로 만들어줍니다. 무척 간단합니다.

  2. Favicon of http://koc2000.tistory.com/ BlogIcon koc/SALM 2009.12.07 14:22 address edit & delete reply

    티스토리에 수동으로 적용할 수도 있겠네요. ;) [emo=091]

    • Favicon of http://zockr.tistory.com BlogIcon zockr 2009.12.07 19:23 address edit & delete

      네?
      티스토리는 기본 기능입니다.

      굳이 뭣하러...?

    • Favicon of http://koc2000.tistory.com/ BlogIcon koc/SALM 2009.12.07 21:47 address edit & delete

      예. 기본 기능이지요.
      흠... 그래도 CSS를 고치면 조금 다른 풍선 도움말이 될 수도 있겠거니 생각해 봅니다.

    • Favicon of http://zockr.tistory.com BlogIcon zockr 2009.12.07 22:09 address edit & delete

      아... 티스토리의 풍선 도움말은 css에 정의되어있지 않습니다.
      여러모로 민감한 부분이 있어 자바스크립트에서 직접 호출합니다.

      참고하세요.

  3. Favicon of http://salm.textcube.com BlogIcon 류청파 2009.12.07 15:49 address edit & delete reply

    [quote].footnotes li
    {
    &nbsp; list-style-type: decimal;
    &nbsp; list-style-position: outside;
    &nbsp; margin-left: 25px;
    &nbsp; padding-left: 0;
    }[/quote]
    복사했더니 위와 같이 나타나내요.
    소스보기에서는 정상입니다.
    [quote].footnotes li
    {
    list-style-type: decimal;
    list-style-position: outside;
    margin-left: 25px;
    padding-left: 0;
    }[/quote]
    파이어폭스 3.5.5 사용합니다.

    • Favicon of http://zockr.tistory.com BlogIcon zockr 2009.12.07 19:24 address edit & delete

      Syntax Highlighter 자체 버그입니다.
      텍큐닷컴에선 아마도 패치할 생각이 없는 것 같더군요.

    • Favicon of http://koc2000.tistory.com/ BlogIcon koc/SALM 2009.12.07 21:46 address edit & delete

      어쩔 수 없이 소스 보기를 한 뒤에 복사해야겠네요. ^^a

  4. Favicon of http://science.binote.com BlogIcon goldenbug 2009.12.10 20:33 address edit & delete reply

    오우.. 이 기능 유용하겠는데요. ^^
    원래 티스토리나 태터계열에서도 없는 기능이었어요. 2년~3년쯤 전에 태터 포럼을 검색해보면 제가 건의했던 글이 나올 거예요. 생각해보면 제가 별의별 것을 다 건의했었네요. ㅎㅎㅎ

  5. Favicon of http://zasfe.com BlogIcon Zasfe 2009.12.11 10:06 address edit & delete reply

    각주글의 1,2 이런것을 주1, 주2 로 변경할수 있을까요? 정말 꼭 해보고 싶습니다. [emo=009]

    • Favicon of http://zockr.tistory.com BlogIcon zockr 2009.12.12 00:56 address edit & delete

      글쎄요... 방법이 없을 것 같은데요...

  6. Favicon of http://mahabanya.com BlogIcon mahabanya 2009.12.15 21:35 address edit & delete reply

    이건 적용시켜야 하겠군요. 텍큐로 와서 각주 바로 안 뜨는거 좀 귀찮았다능;ㅂ;

    • Favicon of http://zockr.tistory.com BlogIcon zockr 2009.12.16 19:56 address edit & delete

      그럼 바로 ㄱㄱㅆ이죠!

    • Favicon of http://mahabanya.com BlogIcon mahabanya 2009.12.17 14:17 address edit & delete

      적용해서 잘 됩니다.

      하지만 압축된 파일에는 j_footnote.gif 로 되어있는데 소스에는 footnote.js 로 되어 있어서 살짝 삽질.

      그리고 텍큐 스킨 에디터에서 &nbsp 붙어 나오는 것 때문에 살짝 삽질.

      본문에 해당 내용도 살짝 포함해 주시면 적용하는데 수월할 것 같아욤.

    • Favicon of http://zockr.tistory.com BlogIcon zockr 2009.12.17 18:12 address edit & delete

      이런, 아직까지 티스톨 때 습관이 많이 남아있군요. 수정했습니다.

      그리고, &nbsp는 무슨 말씀인지 모르겠습니다. 자세한 설명 부탁드립니다.

    • Favicon of http://mahabanya.com BlogIcon mahabanya 2009.12.17 19:11 address edit & delete

      본문에서 소스를 클립보드로 복사한 후에 텍큐 스킨 에디터에 붙여넣으면 맘대로 &nbsp가 붙어서 paste 되더라구요. 확인하고 삭제해야 한다고 알려주심 땡큐일 것 같아욤.

    • Favicon of http://zockr.tistory.com BlogIcon zockr 2009.12.17 19:14 address edit & delete

      그 문제는 이미 몇 줄 위의 댓글에도 있는데... SH의 버그입니다.
      웃긴 건 티스톨/텍큐 엔진이 아니라면 이 문제는 발생하지 않는단 겁니다.

      즉, 텍큐닷컴 쪽에서 해결해줘야 하는 문제입니다.

      이 문제는 별도로 포스팅 할 예정입니다. 다만 지금은 좀 바빠서... ㅠ.ㅠ

  7. Favicon of http://zasfe.com BlogIcon Zasfe 2009.12.18 18:12 address edit & delete reply

    IE 에서는 정상적으로 보이는데 파폭(3.0.7)에서는 에러가;;
    [quote]tcFootnoteHelper is not defined
    [Break on this error] tcFootnoteHelper.all("http://fs.textcube.com/blog/2/23241/skin/1/images/");\n[/quote]
    라고 나오네요.

    특이한거는 소스코드를 그냥 스킨에 추가 했을때에는 에러가 안난다는거..
    뭐가 문제일까요..? 일단 제 블로그에 에러난 채로 적용해 두었으니, 확인 좀 부탁드리겠습니다.

  8. Favicon of http://popeye.textcube.com BlogIcon popeye 2009.12.25 03:58 address edit & delete reply

    따라하기를 해도 왜 안 되는지 궁금했는데, 큭,, 알고 보니 개떡같은 ie6에서 제가 몇 분을 고생을 했네요.

    빨리 버려야 하는 ie6


    =================
    좋은 팁 감사합니다.

  9. Favicon of http://jnstory.net BlogIcon 조남식 2010.02.02 23:40 address edit & delete reply

    감사합니다^^
    그런데, 제 블로그에서는 살짝 이상하게 적용되네요..ㅠㅠ
    http://jnstory.net/1540 포스트에 팁을 적용했는데, _<- 아래 부분만 적용되는데 해결방법이 없을까요?

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2010.02.03 00:15 address edit & delete

      잘 되는데요...

  10. Favicon of http://hisastro.textcube.com BlogIcon 그별 2010.02.09 00:10 address edit & delete reply

    그대로 해도 안되는 이유는 무엇일까? 했었는데...
    다시 확인을 해보니, IE브라우저의 문제였습니다.
    파이어폭스에서는 잘 보이더라구요.
    그런데, 제 블로그 말고 설치된 다른 분의 블로그 각주 풍선은 잘 보입니다.
    혹, IE8.0에 어떤 설정할 것이 있는지요...
    아니면, 특별히 어떤 테그가 필요한지...
    BLUEnLIVE님의 답변을 조심 스럽게 기다려 봅니다.
    간절히~ ^^;

    고맙습니다. BLUEnLIVE님.. (_ _)

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2010.02.09 18:31 address edit & delete

      F5 연타 신공으로 다시 읽기... ㅎㅎ
      브라우저 상관 없이 다 잘 돌아갑니다.

  11. Favicon of http://mine.textcube.com BlogIcon 空の境界 2010.02.09 18:43 address edit & delete reply

    안녕하세요, 각주 기능 스킨 적용 하다가 문제가 생겨 문의드립니다. 1시간 째 이리저리 해보고 있는데 블로그 이미지 주소라는 것이 정확히 무엇인지 가르쳐 주실 수 있나요?

  12. Favicon of http://less.wo.tc BlogIcon 아네모네 2010.03.13 02:56 address edit & delete reply

    안녕하세요. 각주에 풍선말을 잘 사용하던중 질문이 있어 이렇게 찾아왔습니다.
    각주에 링크가 걸린내용이나 일반 텍스트가 아닌내용이 들어가면 말풍선에서 일반 텍스트만 나오는데 이거 수정할 방법은 없나요? 궁금합니다. 참, 하단의 각주 설명은 정상적으로 보입니다.[emo=059]

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2010.03.13 07:57 address edit & delete

      원래 그렇게만 나옵니다.
      하단의 각주 설명을 풍선 형태로 다시 띄우는 것이거든요.

    • Favicon of http://less.wo.tc BlogIcon 아네모네 2010.03.13 12:14 address edit & delete

      아, 제가 질문을 잘못했습니다.[emo=059]

      예로 [b]"링크가 적용된 글자" + "일반 글자"[/b]를 각주로 적용하면 일반글자만 보이고 [u]링크가 적용된 글자는 아예 풍선말에 나타나지를 않습니다.[/u]라는 것이 정확한 질문입니다.
      죄송합니다. 저의 질문요지는 링크가 적용된 글자가 일반글자로 라도 풍선말에 나왔으면 한다는 것입니다.

      그럼, 즐거운 하루되세요.

  13. Favicon of http://blog.hisastro.com BlogIcon 그별 2010.12.29 23:18 address edit & delete reply

    블루앤라이브님 덕분에 티스토리에서도 각주 기능을 사용하게 있게 되었네요. ^^
    고맙습니다. 블루앤라이브님.. (_ _)

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2010.12.29 23:22 address edit & delete

      어, 아닙니다.
      티스토리의 각주 기능은 원래 있던 겁니다. ㅎㅎㅎ

    • Favicon of http://blog.hisastro.com BlogIcon 그별 2010.12.29 23:27 address edit & delete

      아~ 그랬군요. ㅋㅋ

  14. 2010.12.29 23:23 address edit & delete reply

    비밀댓글입니다

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2010.12.29 23:28 address edit & delete

      http://zockr.tistory.com/971 를 참조하시면 될 것 같습니다.

    • Favicon of http://blog.hisastro.com BlogIcon 그별 2010.12.29 23:36 address edit & delete

      앗.. ^^ 시간 내어 작업?에 들어가야겠군요.
      정말 고맙습니다. 블루앤라이브님.. (_ _)