'태터툴즈'에 해당되는 글 5건

  1. 2010.04.02 텍스트큐브 주석 달기 (1)
  2. 2010.03.25 태터툴즈의 스킨 이미지 주소 (5)
  3. 2010.02.16 미완성 떠다니는 메뉴 - 버그 때문에 (1)
  4. 2010.02.05 ᄒᆞᆫ글에서 블로그로 올리기와 주석 표기 문제
  5. 2010.01.11 블로그 - 주석 사이의 간격

텍스트큐브 주석 달기

텍스트큐브 알림판박쥐의 변신이라는 글이 나타났기에 단지 제목이 재미있어서 클릭했습니다.

왕미친놈이 본 추천 포스트

왕미친놈이 본 추천 포스트

그런데 주석(각주)을 달 수 없다는 푸념(?)이 있습니다.

얼마나 답답하셨을까?

얼마나 답답하셨을까?

태터툴즈 주석 달기

제 기억이 맞다면 태터툴즈의 형제들은 주석 다는 방법이 모두 같습니다. 바로 [footnote]내용[/footnote]과 같은 꼴로 나타내면 주석으로 바꾸어 줍니다.

텍스트큐브 편집 화면 1 - 주석이 달려 있습니다.

텍스트큐브 편집 화면 1 - 주석이 달려 있습니다.

참고로 예제로 보인 문서는 제 블로그의 GotD - Wondershare Photo Collage Studio 4.2.12 문서입니다.

텍스트큐브 편집 화면 2 - 위지위그 편집 모드

텍스트큐브 편집 화면 2 - 위지위그 편집 모드

역시 주석을 달린 부분만 잘라내어 빨간색으로 표시했습니다.

텍스트큐브 편집 화면 3 - HTML 편집 모드

텍스트큐브 편집 화면 3 - HTML 편집 모드

앞의 텍스트큐브 편집 화면 2 그림과 마찬가지로 주석이 달린 부분만 잘라내어 자주색으로 표시했습니다. 굳이 설명이 필요 없어 보입니다.

실제 적용

위와 같이 작업을 한 뒤에 저장을 하고 블로그 문서를 웹브라우저로 열면 됩니다.

웹브라우저에서 본 본문의 주석 위치

웹브라우저에서 본 본문의 주석 위치

위첨자로 처리된 숫자 2(2)에 주석이 링크되어 있다. 그 숫자를 클릭하면 주석 위치로 이동한다.

웹브라우저에서 본 문서 끝의 주석 내용

웹브라우저에서 본 문서 끝의 주석 내용

원래는 위의 그림과는 조금 다릅니다. 스크롤 바를 움직여서 위치를 약간 조절하였습니다.

좀 더 세련되게

BLUEnLIVE님이 블로그에 아주 좋은 방법을 제시해 놓으셨습니다. 각주(footnote) 풍선말 도우미라는 글입니다. 직접 가서 보시기 바랍니다. 참고로 보이는 모습은 아래와 같습니다.

풍선 도움말 예시

풍선 도움말 예시

관련 문서

내부 문서

외부 문서

이 글은 스프링노트에서 작성되었습니다.

Trackback 0 Comment 1

태터툴즈의 스킨 이미지 주소

  • 참고 : 소스 복사 버그가 고쳐졌다고 생각해서 글을 올렸는데, 오늘(3월 30일) 보니 다시 나타났습니다. 아마도 제가 무엇인가를 착각했나 봅니다. 죄송합니다.

최근 텍스트큐브닷컴(http://www.textcube.com/)에서 소리소문 없이 패치된 기능이 있다. 문법 강조 기능의 버튼 중에 "copy to clipboard"가 있는데, 처음에는  가 잔뜩 달라붙는 문제(텍큐닷컴은 Syntax Highlighter을 개선하라! by BLUEnLIVE)가 있었으나 최근 고쳐졌다. 그 버그가 고쳐졌음을 확인하는 과정에서 스킨의 images 디렉터리를 나타내는 주소에 대해 생각해 볼 기회를 갖게 되었습니다.

[code html]<p>예제</p> <p>오른쪽에는 공백이 있습니다.→               .</p> <p>.                  ←왼쪽에는 공백이 있습니다.</p>[/code]
더 이상 &nbsp;를 볼 수 없다.

더 이상 &nbsp;를 볼 수 없다.

그런데 버전은 v2.0.320 그대로입니다. 그래서 공지를 안 했나?

BLUEnLIVE 님의 패치

물론 느려터진 텍스트큐브닷컴 개발자 분들이 패치하기 전에 BLUEnLIVE 님이 패치를 멋지게 해주셨다(텍큐닷컴 용 Syntax Highlighter 2.0 버그 패치 by BLUEnLIVE 참조). 사실 이번에 티스토리에서 옮겨온 뒤로 문법강조가 적용된 부분이 있어서 BLUEnLIVE 님의 패치를 적용하려고 했는데, 벌써 패치가 되었더라고요.

태터툴즈의 스킨 이미지 주소

한편 BLUEnLIVE 님의 패치에 대한 글과 다른 글을 보았습니다.

그런데 텍스트큐브닷컴스킨 이미지 주소를 아주 정확하게 나타내려고 노력하셨습니다. 그러나 그것은 결론만 말하자면, 엄청난 삽질임을 깨닫게 되었습니다. 왜? 스킨이기 때문입니다. 무슨 뜻인지 이해가 안 된다고요?

스킨(skin)은 컴퓨팅에서 저마다 다른 사용자의 취향에 맞추기 위해 어떠한 소프트웨어웹사이트에 적용할 수 있는 사용자 그래픽 배색 (GUI)으로서의 테마와 연결된다. from 위키백과 :: 스킨 (컴퓨터)

스킨이란 기본적으로 테마 기능을 갖게 됩니다. 다시 말해 태터툴즈 시스템을 사용한 블로그에서 사용하는 스킨은 다른 블로그에 그대로 적용 가능하다는 점입니다. 물론 텍스트큐브닷컴에서 사용하는 스킨은 티스토리에서 그대로 사용할 수 없는 경우도 있지만, 적어도 스킨 이미지 주소 또는 스킨 이미지 디렉터리 주소는 동일하게 적용된다는 뜻입니다.

티스토리 스킨 이미지 주소 표현

티스토리 스킨에서 이미지 주소를 어떻게 표현했는지를 알아보겠습니다. 이것은 제 테스트 블로그를 이용했습니다. 태터툴즈 시스템에 거의 대부분 공통으로 존재하는 rss.gif 파일의 경로를 찾겠습니다.

티스토리 테스트 블로그 스킨 편집 화면

티스토리 테스트 블로그 스킨 편집 화면

티스토리 테스트 블로그 스킨 rss.gif 파일 나타내기

티스토리 테스트 블로그 스킨 rss.gif 파일 나타내기

위에서 보면 스킨 이미지 주소는 "./images/rss.gif"라고 표현했습니다. 이때 중요한 부분은 맨 앞에 보이는 ( . )과 images 라는 디렉터리 이름입니다. 이때 ( . )은 현재 디렉터리를 가리키는 축약 표현입니다. 도스/윈도/유닉스 공통입니다. 매킨토시의 OS X 에서도 적용 가능합니다.

티스토리 테스트 블로그의 rss.gif 파일의 실제 위치

티스토리 테스트 블로그의 rss.gif 파일의 실제 위치

위의 티스토리 테스트 블로그의 rss.gif 파일의 실제 위치 그림에서 보듯이 스킨에서 "./images/rss.gif"라고 나타난 부분이 "http://cfs.tistory.com/custom/blog/48/488983/skin/images/rss.gif"라고 바뀌어 있습니다.

이 파일은 제 티스토리 블로그인 왕미친놈의 왕미친세상에도 있습니다. 거기에서는 "http://cfs.tistory.com/custom/blog/35/354861/skin/images/rss.gif"라고 나타나 있네요.

맨 끝에 나타나는 /images/rss.gif 부분이 공통으로 보입니다.

텍스트큐브닷컴 스킨 이미지 주소 표현

한편 rss.gif 파일텍스트큐브닷컴의 스킨에도 존재합니다.

텍스트큐브닷컴 블로그 스킨 편집 화면

텍스트큐브닷컴 블로그 스킨 편집 화면 (아랫부분 생략)

텍스트큐브닷컴 블로그 스킨 rss.gif 파일 나타내기

텍스트큐브닷컴 블로그 스킨 rss.gif 파일 나타내기

위에서 보면 스킨 이미지 주소는 "./images/rss.gif"라고 티스토리의 경우와 똑같이 표현했습니다.

텍스트큐브닷컴 블로그의 rss.gif 파일의 실제 위치

텍스트큐브닷컴 블로그의 rss.gif 파일의 실제 위치

위의 텍스트큐브닷컴 블로그의 rss.gif 파일의 실제 위치 그림에서 보듯이 스킨에서 "./images/rss.gif"라고 나타난 부분이 "http://fs.textcube.com/blog/0/6512/skin/1/images/rss.gif"라고 바뀌어 있습니다.

이 파일은 아무리 스킨을 바꾸더라도 항상 "./images/rss.gif"라는 꼴을 유지하게 됩니다. 결국 BLUEnLIVE 님이 찾아내신 다음과 같은 표현은 모두 삽질이 되어 버립니다. 정말 애써 작성하셨을 텐데 뭐라 위로의 말을 드려야 할지... T,T

[code html]<script type="text/javascript" src="http://(블로그 이미지 주소)/j_shCore.gif"></script> <script type="text/javascript" src="http://(블로그 이미지 주소)/j_shBrushMsx.gif"></script> </body>[/code]

위의 코드에서 굳이 "http://(블로그 이미지 주소)/j_shCore.gif"라고 표현할 필요가 없습니다. (텍큐닷컴 용 Syntax Highlighter 2.0 버그 패치 by BLUEnLIVE 참조) 앞서 밝힌 코드를 응용하여 "./images/j_shCore.gif"라고 바꾸면 됩니다.

BBCode for 텍큐닷컴 3.2 대공개 문서와 BBCode for 텍큐닷컴 3.3 업데이트 문서에 보이는 그림도 별로 쓸모는 없습니다. 오히려 스킨이 가진 장점, 곧 어디에도 그대로 적용할 수 있다는 점을 없애 버리는 삽질이 됩니다.

BBCode for 텍큐닷컴 3.2 대공개 문서의 그림 일부

BBCode for 텍큐닷컴 3.2 대공개 문서의 그림 일부

BBCode for 텍큐닷컴 3.3 업데이트문서의 그림 일부

BBCode for 텍큐닷컴 3.3 업데이트문서의 그림 일부

관련 문서

내부 문서

외부 문서

이 글은 스프링노트에서 작성되었습니다.

Trackback 0 Comment 5

미완성 떠다니는 메뉴 - 버그 때문에

며칠 전부터 블로그에 떠다니는 메뉴를 달려고 지랄발광을 했음에도 성공하지 못했습니다. 될듯 될듯 하면서도 끝끝내 실패했는데, 왠걸 소스 하나를 보자 맥이 탁 풀리더군요. 간단하면서도 잘 동작하는 메뉴를 만들 수 있게 되었습니다. 다만 티스토리의 버그 때문에 추천 배너에 대한 사항은 정확하게 잘 작동하지는 않습니다.

  • 참고 1 : 이 글은 어디까지나 티스토리를 기준으로 설명하였습니다. 태터툴즈의 다른 형제들(텍스트큐브 및 태터툴즈)에서는 정상 동작을 보장하지 못합니다. 그러나 몇몇 설정만 바꾸면 적용할 수 있으리라 생각합니다.
  • 참고 2 : 이 글에서 추가한 CSS 코드 및 (X)HTML 코드의 저작권도아 님께 있습니다. 또한 자바스크립트 추가 부분강팀장 님께 저작권이 있습니다. 따라서 그 두 부분은 GFDL 및 CCL의 적용을 받지 않으므로 주의하기 바랍니다.

이동 위치 및 메뉴 항목 정하기#

가장 먼저 할 일은 이동 위치메뉴 항목을 정하는 일입니다.

스킨의 구조와 이동 위치#

티스토리 스킨 제작 가이드에서 스킨의 구조를 살펴보면 스킨의 구조, 곧 태터툴즈로 만들어진 블로그의 구조는 다음과 같습니다.


티스토리 스킨의 구조 by 태터툴즈 스킨커뮤니티

대부분의 경우 header부터 footer까지 화면에 나타납니다. 이때 특별한 일이 없다면 sideinfo 영역(사이드바)은 이동 위치로 잡지 않도록 합니다. 왜냐고요? 위 그림에서 보듯이 본문에 해당하는 content 부분과 화면의 상하 위치가 겹치기 때문입니다. 대부분의 경우 화면의 좌우 이동을 고려하여 떠다니는 메뉴를 만들지는 않으므로 굳이 sideinfo 영역에 이동 위치를 잡을 필요가 없다는 말입니다.

대충 잡을 수 있는 이동 위치는 문서의 처음 또는 끝, 본문의 처음 또는 끝, 댓글의 처음 또는 끝(또는 댓글 보기 또는 댓글 쓰기) 등입니다. 거기에 더하여 블로그 홈이나 블로그 관리용 문서로 이동하게 만들 수도 있습니다.

이동 위치와 이동 메뉴#

이 부분은 제 블로그를 기준으로 설명합니다. 각자 자신의 블로그에 넣는다고 상상하면서 글을 읽어 주십시오.

왕미친 세상 블로그 구조

왕미친 세상 블로그 구조

위 그림에서 빨간색으로 표시한 부분이 화면에 나타나는 부분이며, 자주색 줄이동 위치입니다. 맨 위에서부터 차례대로 글로 나타내면, 문서 처음(top), 글 관련 태그(tag) 또는 추천 배너(recommend)[각주:1], 트랙백 / 댓글(comment1), 댓글 쓰기(comment2), 페이징(paging), 글끝(end) 등입니다.

그리고 위 그림에서 블로그 메뉴가 헤더와 꼬리에 모두 나타납니다. 그러나 여기에서는 원래 있던 블로그 메뉴는 그대로 두고 메뉴를 하나 더 추가하였습니다.

떠다니는 메뉴 구현 방법#

이 글에서는 떠다니는 메뉴를 스타일(CSS)을 이용하여 구현해 보았습니다. 소스코드는 Fixed Layer Hack for IE6에 나오는 코드를 참고하였습니다. 또한 자바스크립트를 최소로 하는 것이 호환성에 더 좋고, 코드도 더 간단하다고 생각하여 그렇게 결정했습니다. 실제로 그와 비슷하게 적용된 블로그는 도아의 세상사는 이야기입니다. 특히 도아의 세상사는 이야기 블로그에서는 표(테이블)이 아닌 리스트를 활용하고 있으므로 따라해 보았습니다.

스킨에 넣을 이동 메뉴(X)HTML 코드는 다음과 같습니다.

[code html] <div id="floatdiv">     <ul>         <li class="menu">공간이동</li>         <li><a href="/">첫페이지</a></li>         <li><a href="#top">처음으로</a></li>         <li><a href="#item1">항목1</a></li>         <li><a href="#item2">항목2</a></li>         <li><a href="#item3">항목3</a></li>         <li><a href="#item4">항목4</a></li>         <li class="last"><a href="#end">맨끝으로</a></li>     </ul> </div> [/code]

이동 메뉴만으로는 아무런 동작도 하지 못합니다.

[code html] <a name="top"></a> <a name="item1"></a> <a name="item2"></a> <a name="item3"></a> <a name="item4"></a> <a name="end"></a> [/code]

위의 코드를 스킨의 (X)HTML 코드에 추가해야 합니다.

item항목 대신 a 태그의 name(또는 id)이동 위치의 이름이 와야 합니다.

스킨에 넣을 CSS 코드는 다음과 같습니다. 이것을 CSS 부분(style.css)의 맨 끝에 넣으면 됩니다.

[code css] /* 떠다니는 메뉴 (Floating Menu) */ #floatdiv {     position:fixed; _position:absolute; _z-index:-1;     width:65px;     overflow:hidden;     right:0px;     top:30%;     border: #5D5D5D 1px solid;     background-color: transparent;     font-size: 14px;     margin:0;     padding:0; }
#floatdiv ul  { list-style: none; } #floatdiv li  { margin-bottom: 2px; text-align: center; } #floatdiv a   { color: #5D5D5D; border: 0; text-decoration: none; display: block; } #floatdiv a:hover, #floatdiv .menu  { background-color: #5D5D5D; color: #fff; } #floatdiv .menu, #floatdiv .last    { margin-bottom: 0px; } [/code]

기본적으로 위의 코드가 들어가며, 더 추가될 수도 있습니다.

블로그 화면과 이동 위치#

실제 블로그에서 위치를 찾아 보겠습니다. 자주색 가로선은 떠다니는 메뉴에서 이동하게 될 이동 위치를 가리킵니다.

이동 위치 1 : 맨 위

이동 위치 1 : 맨 위


이동 위치 2 : 글 끝 또는 추천 배너

이동 위치 2 : 글 끝 또는 추천 배너


이동 위치 3 : 트랙백/댓글 보기

이동 위치 3 : 트랙백/댓글 보기


이동 위치 4 : 댓글 쓰기(위) 및 페이징(아래)

이동 위치 4 : 댓글 쓰기(위) 및 페이징(아래)


이동 위치 5 : 페이징(자주색) 및 사이드바(파란색)

이동 위치 5 : 페이징(자주색) 및 사이드바(파란색)


이동 위치 6 : 맨 아래

이동 위치 6 : 맨 아래

위에서 보면 대충 어느 위치인지 감이 오지 않습니까? 일단 글의 맨 처음 부분에 이동할 수 있게 하고, 그 다음으로 추천 배너의 위치[각주:2], 트랙백/댓글 보기, 댓글 달기, 페이징, 문서의 맨 끝 등으로 구성할 수 있습니다.

이때 이동 위치 5 : 페이징 그림을 보면 사이드바에 파란색으로 이동 위치를 표시했습니다. 이것은 1단 스킨에서는 유용하지만, 2단 스킨이나, 3단 스킨에서는 조금 불합리한 점이 생깁니다. 여기에 이동 위치를 지정하면 페이지가 위아래로 왔다 갔다를 반복하게 될 수도 있으므로 꼭 필요하지 않다면, 그리고 1단 스킨이 아니라면, 이동 위치를 지정하지 않는 것이 좋습니다.

블로그 스킨 코드에서 이동 위치 찾기 및 코드 넣기#

스킨 소스와 관련한 기본 사항은 티스토리 스킨 가이드를 참조하기 바랍니다.

티스토리 관리 화면 - 스킨 편집 화면

티스토리 관리 화면 - 스킨 편집 화면

실제로 넣을 코드는 다음과 같습니다. 각각의 위치에 <a name="이름"></a>와 같은 식으로 붙여 주면 됩니다. 구성할 메뉴와 이동 위치에 넣을 코드는 아래와 같습니다.

[code html] <div id="floatdiv">     <ul>         <li class="menu">공간이동</li>         <li><a href="/">첫페이지</a></li>         <li><a href="#top">처음으로</a></li>         <li><a href="#recommend">추천배너</a></li>         <li><a href="#comment1">댓글보기</a></li>         <li><a href="#comment2">댓글달기</a></li>         <li><a href="#paging">이동메뉴</a></li>         <li class="last"><a href="#end">맨끝으로</a></li>     </ul> </div> [/code] [code html] <a name="top"></a> <a name="recommend"></a> <a name="comment1"></a> <a name="comment2"></a> <a name="paging"></a> <a name="end"></a> [/code]

이것을 스킨에 실제로 적용하면 다음과 같습니다. 빨간 네모기준이 되는 (X)HTML 코드 또는 티스토리 치환자입니다. 그것을 찾은 뒤 알맞은 위치에 이동위치를 표시하면 됩니다.

이동 위치 (스킨) 1 : 맨 위

이동 위치 (스킨) 1 : 맨 위

맨 위로 이동하게 만들려면 위 그림의 자주색 줄이 있는 부분, 곧 body 태그의 바로 다음에 a 태그(앵커 태그)를 넣어야 한다.

이동 위치 (스킨) 2 : 글 끝 또는 추천 배너

이동 위치 (스킨) 2 : 글 끝 또는 추천 배너

이때 추천 배너를 플러그인에서 추가했기 때문에 위 화면에는 나타나지 않고 있습니다. 저와 달리 추천 배너의 코드를 직접 입력했다면 위 스킨 화면에 나타나게 됩니다. 또한 위와 같이 추천 배너의 코드가 나타나지 않는다면,[각주:3] 저 위치가 본문의 바로 다음인데, 블로그 소스 보기를 통해 정확한 위치를 찾아야 합니다.

다만 이 경우에는 임시로 저곳에 붙여 두겠습니다.

이동 위치 (스킨) 3 : 트랙백/댓글 보기

이동 위치 (스킨) 3 : 트랙백/댓글 보기

이동할 위치는 트랙백과 댓글의 내용이 나오기 바로 전입니다. 이동 위치 3 : 트랙백/댓글 보기 그림을 참조하십시오.

이동 위치 (스킨) 4 : 댓글 쓰기

이동 위치 (스킨) 4 : 댓글 쓰기

댓글 쓰기도 앞의 설명과 마찬가지입니다.

이동 위치 (스킨) 5 : 페이징

이동 위치 (스킨) 5 : 페이징

페이징은 보통 1~3줄로 나타납니다. 아무쪼록 페이징 영역의 맨 앞으로 이동 위치를 잡아야 합니다.

이동 위치 (스킨) 6 : 맨 아래

이동 위치 (스킨) 6 : 맨 아래

맨 아래는 </body>의 바로 앞에 이동 위치를 두면 됩니다.

각각의 위치에 앞서 설명했던 앵커 태그(a 태그)를 넣으면 됩니다. 이때 a 태그의 역할은 링크 걸기가 아닌 위치 지정입니다. 링크를 걸 때는 href 속성(href attribute)을 사용하며, 링크의 대상을 지정할 때는 name 속성(href attribute)을 이용합니다. 다만 링크 대상을 지정할 때 (X)HTML 공통 속성(Common attribute) 가운데 코어 속성(core attribute)에 속하는 id 속성을 사용할 수도 있습니다.

참고 1 : id 속성은 공통 속성이기 때문에 a 태그(a 엘리먼트) 이외에 다른 곳에도 쓰일 수 있습니다.

참고 2 : a 태그(a element / a 엘리먼트)는 앵커(anchor), 곧 을 가리킵니다.

위에서 추천배너에 대한 메뉴와 이동 위치 코드는, 앞서 설명했고 또한 보았듯이, 스킨에서는 넣을 수 있는 위치가 없습니다.[각주:4] 그러나 블로그 소스 보기를 통해서 그 위치를 찾아낼 수는 있습니다.

일단 여기까지 마친 뒤에 저장합니다. 저장은 선택이 아닌 필수입니다.

[저장]을 클릭하여 저장합시다.

[저장]을 클릭하여 저장합시다.

이동 메뉴 적용#

HTML 코드(skin.html) 적용#

일단 앞에서 이동할 위치를 스킨에 지정해 넣었습니다. 이번에는 그 위치로 이동하게 만들 메뉴를 넣어 보겠습니다.

빨간 네모 부분이 메뉴입니다.

빨간 네모 부분이 메뉴입니다.

저 부분을 스킨에서 찾으면 다음과 같습니다.

스킨(skin.html)에서 찾은 메뉴

스킨(skin.html)에서 찾은 메뉴

기준이 되는 것은 위치로그, 미디어로그, 방명록 등입니다. 각자 자신의 블로그 스킨에서 알맞은 문자열을 찾기 바랍니다. 때로는 메뉴가 그래픽 이미지 및 플래시 배너로 되어 있는 경우도 있습니다.

skin.html 부분에 추가한 코드 : 기존 메뉴(빨간 테두리)와 추가된 떠다니는 메뉴(자주색 테두리)

skin.html 부분에 추가한 코드 : 기존 메뉴(빨간 테두리)와 추가된 떠다니는 메뉴(자주색 테두리)

다 마쳤으면 일단 저장합니다.

CSS 코드(style.css) 적용#

style.css 부분에 추가한 코드 : 기존 메뉴(빨간 테두리)와 추가된 떠다니는 메뉴(자주색 테두리)

style.css 부분에 추가한 코드 : 기존 메뉴(빨간 테두리)와 추가된 떠다니는 메뉴(자주색 테두리)

제 경우는 맨 마지막 부분에 화면에 보이지 않을 부분이 자리 잡고 있습니다. 각자 자신의 CSS 설정의 맨 마지막 부분쯤에 코드를 넣으시면 됩니다.

넣은 뒤에는 저장하면 외형은 완성됩니다.

작동 확인 및 수정#

떠다니는 메뉴의 작동 확인#

떠다니는 메뉴에서 [처음으로]를 클릭했을 때의 화면

떠다니는 메뉴에서 [처음으로]를 클릭했을 때의 화면

하지만 저것이 정상 동작한다는 보장은 못합니다. 배경을 투명으로 했기 때문에 조금 이상하지만, 어쨌든 겉모양은 도아의 세상사는 이야기와 거의 같습니다. 왜? 그것을 베꼈으니까요.

떠다니는 메뉴에서 [추천배너]를 클릭했을 때의 화면

떠다니는 메뉴에서 [추천배너]를 클릭했을 때의 화면

추천배너를 클릭했으나 엉뚱한 곳으로 갔습니다. ^^a 다른 메뉴를 확인한 뒤 나중에 고치겠습니다. 아랫부분은 필요가 없어서 잘랐습니다.

떠다니는 메뉴에서 [댓글보기]를 클릭했을 때의 화면

떠다니는 메뉴에서 [댓글보기]를 클릭했을 때의 화면


떠다니는 메뉴에서 [댓글달기]를 클릭했을 때의 화면

떠다니는 메뉴에서 [댓글달기]를 클릭했을 때의 화면

이미 티스토리에 로그인했으므로 댓글 달기에서 이름이나 비밀번호 등을 묻지 않고 있습니다. 그러므로 다르게 나타날 수도 있습니다.

떠다니는 메뉴에서 [이동메뉴]를 클릭했을 때의 화면

떠다니는 메뉴에서 [이동메뉴]를 클릭했을 때의 화면


떠다니는 메뉴에서 [맨끝으로]를 클릭했을 때의 화면

떠다니는 메뉴에서 [맨끝으로]를 클릭했을 때의 화면

[맨끝으로]를 클릭했을 때는 반응이 조금 다릅니다. 이는 이동 메뉴는 화면에서 전체 높이의 30% 되는 곳에 둥둥 떠 있게 되지만, 이동 위치맨끝은 화면 전체 높이 100% 되는 곳입니다. 따라서 항상 떠다니는 메뉴보다 아래쪽에 위치하게 되므로 위의 그림은 정상입니다.

추천 배너 관련 수정 1#

앞서 추천 배너는 스킨에서 나타나지 않았습니다. 이것을 제가 임의로 지정하였는데, 그 위치는 추천 배너의 위치가 아닌 글의 끝이었습니다. 따라서 옳게 작동하게 만들려면, 떠다니는 메뉴의 항목을 글끝으로라고 고치거나, 또는 추천 배너의 올바른 위치를 지정해야 합니다.

[code html] <div id="floatdiv">     <ul>         <li class="menu">공간이동</li>         <li><a href="/">첫페이지</a></li>         <li><a href="#top">처음으로</a></li>         <li><a href="#ccl-icon-[\##_article_rep_id_##]-0">추천배너</a></li>         <li><a href="#comment1">댓글보기</a></li>         <li><a href="#comment2">댓글달기</a></li>         <li><a href="#paging">이동메뉴</a></li>         <li class="last"><a href="#end">맨끝으로</a></li>     </ul> </div> [/code]

처음에는 위와 같이 고쳤습니다. 그런데 작동을 안 했습니다. 태터툴즈에는 분명히 [##_article_rep_id_##]라는 치환자가 있지만, 티스토리에는 없기 때문입니다. 저렇게 할 수 있다면 매우 간단하게 이동 메뉴를 만들 수 있게 되지요.

추천 배너 관련 수정 2#

해결책을 찾아서 검색하다가 강팀장의 웹이야기(e-Biz Story) :: 간단한 Tip으로 내 블로그 이용자 배려하는 기능 #2라는 페이지는 발견했습니다. 그곳에서는 자바스크립트로 처리하였으며, 저도 그것을 따라했습니다. 이 방법의 단점은 항상 CCL 마크를 달아야 합니다. 실수로 안 달면 추천배너는 작동하지 않게 됩니다.

강팀장 님의 게시글을 참조하여 고친 코드는 다음과 같습니다.

[code html] <div id="floatdiv">     <ul>         <li class="menu">공간이동</li>         <li><a href="/">첫페이지</a></li>         <li><a href="#top">처음으로</a></li>         <li><script type="text/javascript">             //<![CDATA[                var str1 = "[\##_article_rep_link_##]";                str2 = str1.slice(1,str1.length);                str2 = "ccl-icon-"+str2+"-0";                document.write("<a href='#"+str2+"'>추천배너</a>");             //]]>             //</script>         </li>         <li><a href="#comment1">댓글보기</a></li>         <li><a href="#comment2">댓글달기</a></li>         <li><a href="#paging">이동메뉴</a></li>         <li class="last"><a href="#end">맨끝으로</a></li>     </ul> </div> [/code]

그런데 안 되더군요. ㅡㅡ;; 분명히 강팀장 님의 게시글에서는 잘 작동하는데, 왜 제 블로그에서는 안 될까요?

여러 가지 실험을 반복하여 티스토리에 문제가 있음을 알게 되었습니다. 고유주소permanant link, 곧 permalink를 뜻하므로,고유주소는 항상 블로그주소/아라비아수의 꼴(예컨대, http;//xyz.tistory.com/12345)로 이루어져야 합니다. 그런데티스토리가 제 블로그의 고유주소를 정의하지를 않았습니다. 다시 말해 티스토리의 버그 때문에 제 블로그에는 저 코드가 작동하지 않았다는 뜻입니다.

그런데 분명히 정의된 경우도 있습니다. 글제목에는 정의되어 있는데, 막상 자바스크립트에 적용하려고 보니 정의되지 않았다고 나옵니다. 이런 현상은 트랙백에서도 나타납니다. 스킨에서 트랙백과 관련한 부분에서는 잘 작동하는데, 사용자가 임의로 설정하면 작동하지를 않습니다. 미치고 환장할 노릇이죠. 테스트 블로그를 보시면 이 버그가 나타남을 볼 수 있습니다.

결국 버그 때문에 적용할 수 없게 되었습니다. 당분간 저 부분을 적용하지 않기로 했습니다.

덧붙이는 말#

팁을 적용하면서 발견한 버그는 티스토리에 정나미가 떨어지게 만들었습니다. 오죽하면 블로그를 (텍스트큐브닷컴으로) 합쳐야 하나?라는 생각을 했겠습니까?

다음과 통합된 뒤에 가입해서 그런지, 티스토리 버그 리포팅 등을 티스토리가 아닌 다음에서 처리한다는 것도 마음에 안 드는데, 버그 리포팅을 해도 답변이 없는 것은 진짜 열 받습니다. 제가 버그 리포팅을 한 것 가운데 맨 처음 한 번만 답변을 받았고, 나머지는 지금까지 수정이 안 되고 있고, 답변도 못 받았습니다.

그들은 사용자를 언제까지 기다리게 만들어야 직성이 풀리려는지 모르겠습니다.

관련 문서#

내부 문서#

외부 문서#

이 글은 스프링노트에서 작성되었습니다.


  1. 왕미친세상 블로그에서는 추천 배너를 글 끝과 태그 사이에 넣고 있습니다. [본문으로]
  2. 내가 생각하기에는, 추천 배너 위치로 이동하기는 블로그 방문자보다는 블로그 주인(블로거)의 입장을 고려한 위치 선정으로 보입니다. 하지만 대부분 추천 배너 위치로 이동하도록 메뉴를 구성하고 있으므로 저도 추가했습니다. [본문으로]
  3. 추천 배너를 티스토리의 플러그인 메뉴에서 추가하였다면 스킨에는 나타나지 않습니다. [본문으로]
  4. 다시 강조하건대, 추천 배너를 티스토리의 플러그인 메뉴에서 추가하였다면 스킨에는 나타나지 않고, 그러므로 스킨만 참조해서는 넣을 방법이 없습니다. [본문으로]
Trackback 0 Comment 1

ᄒᆞᆫ글에서 블로그로 올리기와 주석 표기 문제

한컴오피스2010 베타버전 버그 31 - ᄒᆞᆫ에서 다른 이름으로 저장하기와 주석 표기 문제

ᄒᆞᆫ글2010 베타버전에서 다른 이름으로 저장하기를 통해 HTML 문서를 만들거나 블로그로 올리기를 통해 블로그에 올린 게시물에 나타나는 주석과 관련한 HTML 태그 표기 때문에 약간의 오류가 생기고 있음을 발견했습니다.

  • 참고 : 본문에서는 블로그로 올리기 문제만 다루었으나, 다른 이름으로 저장 - 인터넷 문서도 같은 벌레가 나타나고 있습니다.

벌레의 유형

ᄒᆞᆫ글 씨! 이 버그는 반드시 고쳐 주셔야겠습니다. 이 버그가 고쳐지지 않으면 ᄒᆞᆫ글에서 작성한 주석은 HTML로 고쳤을 때 대부분 자리 표시에 불과하게 됩니다.

개발자의 답변

2010년 2월 5일 버그 리포팅을 한 상태입니다.

벌레의 발견

이 벌레는 우연히 블로그 - (X)HTML 태그 표기 문제 문서를 다시 살피다가 발견했습니다. 그 문서에서 주석의 링크를 클릭했음에도 이동하지 않아서 문제가 있음을 알게 되었습니다.

티스토리 및 텍스트큐브의 주석

티스토리와 텍스트큐브는 태터툴즈를 사용하는 블로그이므로 주석의 동작도 거의 비슷합니다.

일단 제 블로그의 7-Zip 소개 글을 살펴보겠습니다.

블로그에 나타난 주석 (빨간 동그라미 안쪽)

블로그에 나타난 주석 (빨간 동그라미 안쪽)

위 그림에서 빨간 동그라미 안쪽에 주석이 있습니다. 이 주석을 클릭하면 주석을 나타내는 부분으로 이동합니다.

주석 부분으로 이동한 뒤의 화면

주석 부분으로 이동한 뒤의 화면

주석 부분으로 이동하면 위와 같은 화면이 됩니다. 이때 [본문으로](파란 네모 부분)를 클릭하면 이 주석을 호출한 곳으로 이동합니다.

[본문으로]를 클릭했을 때의 화면

[본문으로]를 클릭했을 때의 화면

앞서 [본문으로]를 클릭하면 위와 같이 이동을 해 줍니다.

ᄒᆞᆫ글 2010 베타에서 출력한 주석의 동작

테스트 블로그의 예제 문서를 이용하여 테스트하겠습니다. 참고로 이 예제 문서는 IE6와 파이어폭스에서 서로 다른 결과를 보여줍니다. 여기에서는 파이어폭스 3.5 버전을 이용하겠습니다. 첨언하자면, 여기에 사용한 HTML 코드가 올바르지 않기 때문에 동작하지 않아야 정상입니다. 다시 말해 동작하는 IE6의 경우가 틀린 경우이지 파이어폭스가 틀린 것은 아닙니다.

ᄒᆞᆫ글에서 블로그로 올린 주석이 있는 문서

ᄒᆞᆫ글에서 블로그로 올린 주석이 있는 문서

위의 ᄒᆞᆫ글에서 블로그로 올린 주석이 있는 문서에서 주석을 클릭하면? 아래 그림처럼 됩니다.

이동은 않고 주소 표시줄만 바뀐 화면

이동은 않고 주소 표시줄만 바뀐 화면

위 그림처럼 이동은 하지 않았습니다. 그저 주소 표시줄만 바뀌었죠.

벌레 분석

코드 보기

앞서 발견한 두 경우의 HTML 코드를 분석해 보겠습니다.

티스토리 주석의 HTML 코드

티스토리 주석은 아래와 같습니다.

티스토리의 주석 표시 부분의 HTML 코드

티스토리의 주석 표시 부분의 HTML 코드


티스토리의 주석 내용 부분의 HTML 코드

티스토리의 주석 내용 부분의 HTML 코드

ᄒᆞᆫ글에서 블로그로 올린 문서의 HTML 코드

예제 문서의 HTML 코드는 다음과 같습니다.

블로그로 올린 문서의 주석 표시 부분의 HTML 코드

블로그로 올린 문서의 주석 표시 부분의 HTML 코드

앞서의 실험에서는 주석 내용 부분은 나타나지 않았지만, 여기에서는 주석 내용 부분도 HTML 코드를 나타내 보겠습니다.

블로그로 올린 문서의 주석 내용 부분의 HTML 코드

블로그로 올린 문서의 주석 내용 부분의 HTML 코드

코드 간략화 및 구조 분석

코드가 복잡하므로 간략하게 구조만 나타내 보겠습니다. 아울러 생략된 부분도 함께 나타내겠습니다.

먼저 티스토리 주석의 HTML 구조입니다.

[code html] <p>본문 내용 1<sup class="footnote"><a id="footnote_link_208_1" href="#footnote_208_1"><span style="display: none;">[각주:</span>1<span style="display: none;">]</span></a></sup>)</p> <p>본문 내용 2</p> <p>본문 내용 3</p> <div class="footnotes">     <ol class="footnotes">         <li id="footnote_208_1">주석 내용 1<a href="#footnote_link_208_1">[본문으로]</a></li>     </ol> </div> [/code]

다음은 블로그로 올린 문서의 HTML 구조입니다.

[code html] <p class="HStyle0">본문 내용 1<a href="#FOOTNOTE1"><sup>1)</sup></a></p> <p class="HStyle0">본문 내용 2</p> <p class="HStyle0">본문 내용 3</p> <hr align="left" width="300px"> <p class="HStyle11"><a name="#FOOTNOTE1">1)&nbsp;주석 내용 1</a></p> [/code]

위 두 코드에서 차이점은 (1) id와 name의 차이, (2) 링크를 이용한 왕복과 편도, (3) 링크 대상을 가리키는 이름의 차이(# 표시가 있느냐 없느냐)입니다. 일단 id와 name의 차이는 여러 문서를 함께 볼 경우에는 문제가 생기지만, 예제 문서는 오직 1개의 문서만을 화면에 표시하고 있으므로 이게 문제는 아닙니다. 그 다음으로 링크를 이용한 왕복이나 편도 이동이냐는 전혀 문젯거리가 아닙니다. 넘어가죠. 마지막으로 링크 대상을 가리킬 때 # 표시를 붙이느냐 마느냐는 상당히 차이가 큽니다.

일단 # 표시는 문서 내부의 이동 표시임을 나타내고 있습니다. 보통 # 표시 다음에는 id나 name로 표시하는 객체 이름(Object name)이 오게 됩니다. 그렇다면 # 자체가 객체 이름이냐? 그렇지는 않습니다. #은 문서와 문서 내부의 객체 이름과의 구분을 해 주는 표시일 뿐입니다. 다시 말해 #을 붙여서 id나 name을 표시하지는 않는다는 뜻입니다. 과거에는 #을 붙여서 표시하여도 호환성에 문제가 없었으나, 지금은 이 부분에 대해 엄격히 검사하고 있습니다. 현재 # 표시가 붙어 있어도 이동이 가능한 웹브라우저는 IE 계열뿐이며, 파이어폭스 등의 모질라/게코 계열이나 오페라 계열의 웹브라우저는 # 표시가 붙은 객체로의 이동을 지원하지 않습니다.

그러므로 위의 코드는 다음과 같이 고쳐야 합니다.

[code html] <p class="HStyle0">본문 내용 1<a href="#FOOTNOTE1"><sup>1)</sup></a></p> <p class="HStyle0">본문 내용 2</p> <p class="HStyle0">본문 내용 3</p> <hr align="left" width="300px"> <p class="HStyle11"><a name="FOOTNOTE1">1)&nbsp;주석 내용 1</a></p> [/code]

맨 마지막 줄에서 # 표시를 떼었습니다.

참고로 테스트 블로그에 이 부분에 대해 시험할 예제 문서(예제 - 주석과 위치 이동)를 올려 두었습니다. 직접 보시고 시험해 보시기 바랍니다. 참고로 주석 1은 정상적으로 이동이 가능하고, 주석 2는 IE 계열에서면 이동이 가능합니다.

결론

링크를 표시하면서 앵커(A 태그)에 name 속성에 # 문자가 들어간 이름을 넣었기 때문에 발생한 문제입니다. 그 문자를 떼면 정상적으로 이동이 가능합니다. 추가로 본문으로의 이동을 지원하도록 바꾸고, 아울러 앵커(A 태그) 때문에 밑줄이 생기는 현상도 제거하려면 다음과 같이 고치면 됩니다.

[code html] <p class="HStyle0">본문 내용 1<a id="FOOTNOTE_HWP_ARTICLE_[문서번호]_1" href="#FOOTNOTE_HWP_1"><sup>1)</sup></a></p> <p class="HStyle0">본문 내용 2</p> <p class="HStyle0">본문 내용 3</p> <div class="HStyle11">     <hr align="left" width="300px">     <ol start="1">         <li id="FOOTNOTE_HWP_1">주석 내용 1<a href="#FOOTNOTE_HWP_ARTICLE_[문서번호]_1">[본문으로]</a></li>     </ol> </div> [/code]

위와 같이 바꾸면 좀 더 구조적이고 효율적인 코드가 됩니다. 참고로 [문서번호]에 해당하는 값으로 치환해야 합니다. 그밖에 <ol start="1">의 경우는 시작하는 주석 번호1이라는 뜻입니다. 주석 번호를 하나하나 지정할 필요가 없다는 뜻입니다. 아무튼 이것을 적용하는 문제는 ᄒᆞᆫ글 개발자가 해결할 일이겠지요.

관련 벌레

이 벌레와 관련이 있는 벌레는 다음과 같습니다.

관련 문서

내부 문서

외부 문서

이 글은 스프링노트에서 작성되었습니다.


Trackback 0 Comment 0

블로그 - 주석 사이의 간격

한컴오피스 베타버전 버그 17 - ᄒᆞᆫ글과 블로그 7 - 주석 1 - 주석 사이의 간격

한컴오피스2010 베타테스트를 하면서 가장 아쉬운 점은 너무 자사 제품을 위주로 작업을 처리한다는 점이었다. 물론 한글과컴퓨터사라는 회사에서 만들었으므로 그것은 당연할 수도 있다. 하지만 블로그에 글을 올릴 때 스타일을 따로 만들어서 올리면서, 그것도 제대로 적용도 안 되게 올리는 일은 그러한 자사 중심주의가 빚은 최악의 버그(벌레) 가운데 하나라고 생각합니다.

이번에도 한 가지 벌레를 발견하게 되었습니다. 그런데 이게 좀 이상합니다. 아, 벌레는 원래 이상한 놈이었죠. 실수했습니다.

1. 벌레의 유형

ᄒᆞᆫ글 씨! 주석과 주석 사이에는 굳이 빈 줄이 필요하지 않습니다. 오히려 페이지 레이아웃(편집 배정)을 흩트리는 주범이 됩니다. 물론 이것이 벌레인지 아닌지 알 수 없습니다만, 저는 단호하게 벌레라고 말하겠습니다.

2. 개발자의 답변

2010년 1월 11일 버그 리포팅을 한 상태입니다.

3. 벌레의 발견

3.1. 블로그에서 보이는 주석 사이의 줄 간격(?) 문제

ᄒᆞᆫ글의 기능을 모두 사용해 보고 싶은 마음에 블로그에 올릴 글에도 각주(주석)를 넣게 되었습니다. 그러다가 혹시나 하는 마음에 테스트 블로그에 먼저 올려 보았습니다.

그림 1 각주를 블로그에 나타나게 만든 화면

위 각주를 보면 각주 사이가 지나치게 넓습니다. 아니, 저 공간에 짧은 각주 하나 정도는 들어갈 수 있어 보입니다.

소스코드를 살펴보기로 하죠.

그림 2 증거용 스크린샷

저 소스는 누구나 확인할 수 있습니다. 위 코드를 분석하면 다음과 같습니다.

<hr>
<a name="name1">
        <p>Text1</p>
</a>
<br>
<a name="name2">
        <p>Text2</p>
</a>

이때 한 가지 문제가 있다. 바로 br 태그이다. 도대체 왜 저게 들어 있는지 알 수 없었다. 바로 저것이 위 그림 1에서 보이는 주석 사이의 간격을 만드는 범인이었다. 어찌 보면 주석 사이가 너무 붙어 있으면 갑갑해 보이기 때문이라고 말할 수도 있으나, 이미 ᄒᆞᆫ글이 내보내는 스타일이 전혀 지정되지 않음을 확인한 상황에서는 그것도 말이 되지 않는다. 다시 말해 주석의 글꼴이 본문보다 작고, 줄 간격도 본문의 160%보다 좁은 130%이기 때문에 저렇게 했다는 답변은, 물론 그 말을 할 사람들―대부분 한글과컴퓨터사의 개발진이리라 생각한다.―에게는 옳은 말이겠지만, 현재 상황에서는 말이 안 되는 소리가 되어 버렸다.

3.2. HTML 문서에서 보이는 줄 간격 문제

지금까지 블로그로 올리기 기능을 사용하여 발견한 문제는 다른 이름으로 저장 > 인터넷 문서에서도 발견되었다는 점을 생각하면 HTML 문서도 확인할 필요가 있습니다.

그림 3 [다른 이름으로 저장]에서도 나타난 각주 사이의 이상 간격 벌레

위 그림에서 파란색 테두리로 나타낸 부분입니다. 주황색으로 된 부분이 바로 br 태그가 있는 곳이죠. 굳이 저렇게 해서 보기 싫게 바꾸어야 할까요?

지금까지 경험으로 웹서버로 보내기웹브라우저로 보내기 기능에서도 나타나리라 생각합니다.

그림 4 br 태그를 제거한 모습

위 그림에서 보면 줄 간격이 확연히 줄어 있습니다.

4. 벌레의 원인

주석과 주석 사이를 구분하려고 빈 줄을 넣는 시도는 좋았습니다. 그런데 그게 실제로 어떻게 보일는지는 생각해 보지 않았을까요? 그것을 오히려 보기 흉하게 여길 사람도 분명 존재한다는 사실을 그들은 알았을 것입니다. 또한 웹문서를 책처럼 인쇄하고 싶은 사람에게도 그러한 빈 줄은 그리 좋지 않은, 아니 흉한 모습을 보일 뿐입니다.

게다가 블로그로 올리기 기능은 다른 이름으로 저장 기능이나 웹브라우저로 보내기웹서버로 보내기 기능과는 차별화된 기능입니다. 블로그는 로그(log, 기록)입니다. 기록은 정보(information)일 수도 있지만, 기본적으로 자료(data)입니다. 그 자료를 잘 나타내기 위한 시스템이 여럿 존재하며, 그들 나름대로 장단점을 가지고 있습니다. 예컨대 텍스트큐브 블로그나 티스토리 블로그는 텍스트큐브라는 블로그 시스템을 기반으로 작동합니다. 그렇다면 주석 기능 등은 텍스트큐브에서 지원하는 주석 기능([footnote] [/footnote])을 이용하여 나타내는 것이 더 낫지 않을까요? 주석은 단순히 그림을 나타내는 것과는 다르니까요.

달리 말하자면, ᄒᆞᆫ글에서 블로그로 올리기 기능은 지나치게 ᄒᆞᆫ글을 중심으로 HTML 데이터를 만들어내고, 그것을 블로그에 적용하려고 했다는 점을 지적하고 싶습니다. 앞서 지적한 적용되지 않는 CSS 버그나 이번에 나타난 각주 사이의 너무 넓은 줄 간격 버그도 그와 같은 맥락에서 볼 수 있습니다.

기왕에 블로그로 올리기 기능을 만들었다면, 블로그를 만들어주는 시스템―텍스트큐브, 워드프레스 등―을 벤치마크할 필요가 있다는 말입니다.

5. 비슷한 벌레

[벌레와 팁/버그] - ᄒᆞᆫ글 씨! ‘ᄒᆞᆫ글’을 제대로 나타내면 안 되겠니?

6. 관련 문서

6.1. 내부 문서

[벌레와 팁/버그] - 한글과컴퓨터 사전에서 탈자 하나

[벌레와 팁/버그] - 한글과컴퓨터 사전에 나타난 이상한 모양의 글자

[벌레와 팁/버그] - 맞춤법과 글자 모양

[벌레와 팁/버그] - ᄒᆞᆫ글 씨! 링크를 왜 엉뚱하게 표시하나요? 3

[벌레와 팁/버그] - ᄒᆞᆫ글 씨! 기본은 지켜야죠!

[벌레와 팁/버그] - ᄒᆞᆫ글 씨! 링크를 왜 엉뚱하게 표시하나요? 2

[벌레와 팁/버그] - ᄒᆞᆫ글 씨! 맞춤법 도우미로 엉뚱한 곳을 표시하면 어떡해요?

[벌레와 팁/버그] - ᄒᆞᆫ글 씨! 링크를 왜 엉뚱하게 표시하나요?

[벌레와 팁/제안] - 한컴오피스 베타버전의 공백과 이동 기능

[벌레와 팁/버그] - ᄒᆞᆫ글 씨! 블로그에는 글을 하나만 올리란 말입니다.

[벌레와 팁/버그] - ᄒᆞᆫ글 씨! ‘ᄒᆞᆫ글’을 제대로 나타내면 안 되겠니? 2

[벌레와 팁/버그] - ᄒᆞᆫ글 씨! ‘ᄒᆞᆫ글’을 제대로 나타내면 안 되겠니?

[벌레와 팁/버그] - ᄒᆞᆫ글 씨! 블로그 카테고리는 어디에?

[벌레와 팁/버그] - ᄒᆞᆫ글 씨! 블로그에는 게시판이 없거든요.

[벌레와 팁/버그] - HTML 태그 해석 오류 문제

[벌레와 팁/버그] - 도대체 무슨 짓을 하는 거냐, ᄒᆞᆫ글?

[프로그램/스크린샷] - 한컴오피스2010 베타버전 실행화면

[벌레와 팁/버그] - 한컴오피스2010 베타 설치 작업과 버그 몇 개

[프로그램/설치] - 한컴오피스2010 베타버전 설치기

6.2. 외부 문서 - 테스트 블로그

예제 3

예제 5

이 글은 ᄒᆞᆫ글 2010 베타버전에서 작성하였습니다.

Trackback 0 Comment 0
prev 1 next


티스토리 툴바