텍스트큐브 1.7의 링크 분류 기능 사용하기
님이다. 접힌 상태이기는 하지만 펼쳐보면 정말 많은 블로그와 사이트가 등록되어 있다. 또 구분을 위해 말머리를 블로그 도구로 했다는 것을 알 수 있다. TT는 태터툴즈, WP는 워드프레스이다.
필자 역시 비슷한 형태로 링크를 관리해 왔다. A는 진보 사이트, B는 블로그, Q는 QAOS.com의 회원이다. 이렇게 말머리로 링크를 구분한 이유는 링크에는 분류기능이 없기 때문이다. 그런데 텍스트큐브
가 1.7로 판올림
하면서 미약하지만 링크에 분류 기능이 추가되었다. 따라서 이제는 더 이상 말머리로 링크를 구분할 필요가 없어졌다.
필자는 1단 스킨을 사용한다. 그래서 티스토리
에서 배포한 Moving Box
도 1단으로 개조해서 사용하고 있다. 이렇게 1단을 사용할 때 발생하는 문제는 링크를 깔끔하게 출력할 수 있는 방법이 별로 없다는 점이다. 그래서 링크 분류 기능이 추가되기 전에는 소수의 블로그만 등록해서 다운 메뉴로 접근할 수 있도록 했다. 또 Moving Box로 바꾸면서는 링크를 제거한 적도 있다.
다행이 1.7에서 링크에 분류를 다는 기능이 추가되었기 때문에 이번에는 텍스트큐브
의 링크 분류 기능을 이용해서 링크를 깔끔하게 출력하는 방법을 알아 보겠다. 사실 간단한 기능이라 이미 사용하고 있을 사람도 있을 것으로 생각한다.
- 분류 추가
- 텍스트큐브 1.7에서는 메뉴의 구조가 완전히 바뀌고 메뉴도 예전의 링크 방식에서 다운 메뉴로 바뀌었다. 그러나 사용하는 방법은 예전과 비슷하다.
- 관리도구/네트워크/링크를 클릭하고 링크추가 탭을 클릭한다.
- 홈페이지 제목에 적당한 제목(예: QAOS.com)을 입력하고 홈페이지 주소에 적당한 주소(예: http://qaos.com/)를 입력한다. RSS 주소로 읽어와도 되지만 읽어 온 정보를 수정해야 하는 때가 많으므로 직접 입력하는 것이 더 편하다.
- 분류의 또는 새로운 분류를 추가합니다에 추가할 분류 이름(예: 쉬어가기)를 입력하고 저장하기 단추를 클릭한다.
- 분류 수정
- 텍스트큐브에서는 링크의 분류를 추가하고 수정할 수 있는 기능은 제공한다. 또 링크가 없으면 분류를 자동으로 삭제한다. 따라서 분류를 삭제할 수 있는 기능이 없다고 따로 고민할 필요는 없다.
- 관리도구/네트워크/링크를 클릭하고 링크목록 탭을 클릭한다.
- 목록에서 분류 이름(예: 세상보기)을 클릭한다.
- 제목을 적당히 수정한 뒤 저장하기 단추를 클릭한다.
- 링크 출력
- 일단 링크에 분류를 추가하고 분류에 따라 링크를 정리해도 실제 출력되는 링크는 아무런 변화가 없다는 것을 알 수 있다. 그 이유는 간단하다. 스킨에서 관련된 치환자를 추가하지 않았기 때문이ㅣ다. 링크에 분류 기능이 추가되면서 추가된 치환자는 두가지 있다. 바로 [##_link_category_##]와 [##_link_list_##]이다. [##_link_category_##]를 이용하면 링크를 출력하면서 분류 이름을 출력할 수 있다. [##_link_list_##]를 이용하면 분류에 따라 정리된 링크를 출력할 수 있다. 따라서 이제 링크를 출력하는 방법은 다음처럼 총 세가지로 볼 수 있다.
- 링크만 출력: 분류 기능이 추가되기 전에 사용되는 방법이다. <s_link_rep> 태그와 </s_link_rep> 태그 사이에 사이트 주소에 해당하는 [##_link_url_##]과 [##_link_site_##]를 둠으로서 링크만 출력하는 방법이다. 참고로 [##_link_url_##]과 [##_link_site_##], [##_link_category_##] 모두 <s_link_rep> 태그와 </s_link_rep> 태그 사이에 와야만 동작한다.
- 링크와 분류 출력: 두번째 방법은 링크를 출력하면서 분류를 출력하는 방법이다. 이방법을 사용하면 [분류1] 사이트1 [분류1] [사이트2]처럼 모든 사이트 이름 앞에 분류 이름이 붙는다. 따라서 이런 방법은 예전에 필자가 사용한 것처럼 짧은 말머리를 사용, 링크를 길게 늘일 때 편리한 방법이다. 사용하는 방법은 [##_link_category_##]만 앞쪽에 덧붙이면 된다. 역시 <s_link_rep> 태그와 </s_link_rep> 태그 사이에 와야만 동작한다.
- 링크를 분류에 따라 출력: 이 방법은 현재 필자가 사용하고 있는 방법이다. 메뉴 방식에 비해 공간을 많이 차지하기는 하지만 상당히 많은 사이트를 등록할 수 있으며 분류에 따라 링크가 출력되기 때문에 조금 더 일목 요연하게 링크를 출력할 수 있다. 코드에서 알 수 있듯이 [##_link_list_##]만 달랑 삽입하면 된다.
- 링크만 출력: 분류 기능이 추가되기 전에 사용되는 방법이다. <s_link_rep> 태그와 </s_link_rep> 태그 사이에 사이트 주소에 해당하는 [##_link_url_##]과 [##_link_site_##]를 둠으로서 링크만 출력하는 방법이다. 참고로 [##_link_url_##]과 [##_link_site_##], [##_link_category_##] 모두 <s_link_rep> 태그와 </s_link_rep> 태그 사이에 와야만 동작한다.
- 링크 꾸미기
- [##_link_list_##]만 달랑 삽입하면 필자의 블로그처럼 링크가 정리되서 출력되는 것이 아니라 다음 예처럼 분류가 나오고 다음 줄에 사이트가 나오는 형태로 출력된다.
실제 HTML 코드를 살펴보면 다음과 처럼 <UL>와 <LI> 태그를 중복해서 출력한다는 것을 알 수 있다. 따라서 이 문제는 CSS 파일에 적당한 스타일시트만 추가하면 자신이 원하는 대로 링크의 출력 형태를 바꿀 수 있다.
필자는 링크가 분류에 따라 출력되고 링크는 분류 이름보다 들여쓰여지도록 다음과 같은 스타일시트를 사용했다. module_link는 [##_link_list_##]를 감싼 DIV 태그에서 지정했기 때문에 module_link라는 클래스로 지정한 것이다.
이렇게 하면 다음 그림처럼 깔끔한(?) 링크를 출력할 수 있다.
Trackback
Trackback Address :: http://offree.net/trackback/1811






Comments
참고로, FF3에서는 링크가 정말 안 예쁘게 표시됩니다. ㅠ.ㅠ
아주 잘 보이는 것은 아니지만 볼만한데요. ㅋㅋㅋ

제 FF3에선 이렇게 나옵니다. ㅠ.ㅠ
잉? 저도 도아님이 올린 이미지 처럼 표시 되는데요.. 그전엔 bluenlive님 이미지처럼 됬었지만..
어? 저도 이제 예쁘게 잘 나오네요.
이유는 모르겠습니다만…
bluenlive님이 봤을 때에는 CSS를 수정하기 전입니다. mepay님이 글이 겹친다고 해서 글꼴의 문제로 생각했는데 Firefox에서는 겹치더군요. 그래서 float: left 속성으로 바로 잡은 것입니다.
텍스트큐브가 링크에 분류가 이전버전까지는 없었다니.. 제가 쓰는 gblog가 그 부분은 다소 좋네요. ^^
그렇죠. 좋은 점이 있으면 나쁜 점도 있죠. 다만 개발 속도가 빠르기 때문에 gblog의 모든 장점은 다 수용될 것으로 보입니다.
나름 머리를 쓴거라서, 해당되는 링크가 없는 경우에는 링크 카테고리가 자동으로 삭제됩니다.^^ 이름을 변경해서 쓴다거나 하는 걱정 안하시고 쓰셔도 됩니다 :D
아.. 링크가 없는 경우 자동 삭제라.. 좋은데요.
그렇군요. 혹시나 해서 빈 분류를 만들어 두었는데 삭제가 되지 않아 DB에서 직접 삭제를 했습니다. 링크가 없고 시간이 어느 정도 지나야 삭제되는 모양이군요. 본문에 반영해 두도록 하겠습니다.
이런 형식보다는
이걸 쓰는게 더 깔끔하지 않을까요? 뭐 어떻게 하든 상관은 없는거지만..
활용성에서 UL, LI가 더 편하기 때문인 것 같습니다. 대부분의 사이트에서 UL, LI를 사용하더군요.
TraceWatch를 이용한 통계를 분석하는 플러그인이 1.7.2 에서 카테고리 부분이 비정상적으로 동작하는것 같습니다.
카테고리 페이지로 연결시 화면에 아무런 내용이 표시되지 않습니다.
( 흙.. 그래서 현재 비활성화 상태..ㅠㅠ)
.htaccess 파일의 문제로 보이는데 또 미지의 세계를(구글링?) 탐험해야 할것 같습니다.;;
.htaccess를 1.6.x대로 교체하면 다 잘됩니다. 저도 문제가 많아서 1.6.x로 교체했습니다.
큐브 초보 입니다.
링크를 도하님 처럼 하려고 하는데 몰라서.....
1. <div class="module module_link">
2. [##_link_list_##]
3. </div>
이것는 했는데,
아래 부분은 어떻게 해서 복사해 넣어야하는지 몰라서,,,,
복사해 넣을 수 있도록 부탁드립니다.
감사합니다.
필자는 링크가 분류에 따라 출력되고 링크는 분류 이름보다 들여쓰여지도록 다음과 같은 스타일시트를 사용했다. module_link는 [##_link_list_##]를 감싼 DIV 태그에서 지정했기 때문에 module_link라는 클래스로 지정한 것이다.
# /* 분류 이름의 글꼴 속성 설정 */
# .module_link .link_ct {font-weight: bold; font-family: 우리새봄}
# /* 분류 다음 줄에 링크가 오도록 설정 */
# .module_link ul {width: 100%; padding-bottom: 10px}
# /* 링크를 들여쓰도록 설정 */
# .module_link ul ul {padding-left: 10px; width: 660px}
# /* 링크가 줄바꿈 되지 않고 링크 옆에 링크가 오도록 설정 */
# .module_link li li {float: left; padding-right: 5px; white-space: pre}
설명은 본문에 다 있습니다. 또 스킨에 따라 다르기 때문에 복사만으로 해결할 수 있는 부분은 아닙니다. 따라서 먼저 CSS에 대해 공부하시는 것이 순서인 것 같습니다.