컴퓨터 엑셀 워드 포토숍 구글어스 WINDOWS JAVASCRIPT JAVA C++

 
Previous Post Python/파이썬] 랜덤 숫자(정수 난수) 발생 함수; Random Int Generat...Python/파이썬] 표준 정규분포 난수, 가우시안 랜덤 발생 함수; Gauss Rando...윈도우용 cc 컴파일러; 유닉스 CC 컴파일러를 윈도우(MS-Windows)에서 쓰기; W...탐색기 폴더에서, 도스창 실행 레지스트리: '여기에 명령 프롬프트' Command Line...윈도우 레지스트리를 REG (.reg) 파일로 저장하는 법; Windows Registry...C언어 VC++] 데이터형(자료형) 변환 방법; Date Type ConvertUndo / Redo 의 뜻, 정의 의미 - 언두 리두자바스크립트] 문자열 길이 구하기; 문자열 사이즈, JavaScript String Siz...Perl/펄] 현재 디렉토리 변경; 디렉토리 이동 Change Directory Funct...자바스크립트] 문자열 출력 함수, 텍스트 쓰기; HTML-JavaScript Print S...

태그 구름, 딜리셔스로 구현; 태그 클라우드 만들기; Tag Cloud Delicious

Monday, December 04, 2006

온라인 북마크 사이트인 딜리셔스에, "태그 구름" 만드는 기능이 추가되었습니다.

< del.icio.us / Tagrolls >

위의 주소에서, 태그 구름의 스타일을 마우스로 조정하면, 태그 구름 만드는 자바스크립트 코드가 자동으로 생성됩니다. (물론 자신의 딜리셔스(del.icio.us) 계정이 있고, 태그가 있고, 로그인된 상태여야 합니다.)


저의 경우에는 수동으로 편집 과정을 거쳐서
<div id="cloud">
<script type="text/javascript" src="http://del.icio.us/feeds/js/tags/mwultong?size=10-18;color=33ffff-ff33cc"></script>
</div>

이런 코드가 최종적으로 만들어졌습니다. (앞뒤로 붙는 제목 같은 것은 좀 산만해 보여서 지웠습니다.)




그런데 코드를 실제로 블로그에 붙여 보니 문제가 있었습니다.

블로그에서 사용되는 링크 스타일로, 태그 구름이 나와 버리더군요.

예를 들어, 저의 블로그의 기본 링크 텍스트는 볼드체(굵게)로 나오는데, 태그 구름까지 굵게 나와서 보기 어색하게 되었습니다.

그래서 다음과 같은 CSS스타일을 블로그 템플릿의 HTML에 적용하여, 태그 구름의 링크를 볼드체가 아닌 보통의 굵기로 나오게 리셋했습니다.

#delicious-tags-mwultong a:link, #delicious-tags-mwultong a:visited, #delicious-tags-mwultong a:hover, #delicious-tags-mwultong a:active { font-weight:normal; }


딜리셔스의 "태그 구름" 자바스크립트에는
delicious-tags-mwultong
이라는 보이지 않는 HTML id 가 자동으로 부여 되어 있습니다. 이 HTML 아이디에 직접 스타일을 적용해 주면 됩니다.

물론 위의 HTML id 는 저의 경우에만 해당되는 것이고, 만약 자신의 딜리셔스 ID가 foo 라면
delicious-tags-foo
이런 식으로 지정해야 합니다.


그리고

http://del.icio.us/feeds/js/tags/mwultong?size=10-18;color=33ffff-ff33cc

이런 자바스크립트 주소를 브라우저 주소창에 넣고, 태그 구름 만드는 자바스크립트 자체를 다운로드받아서 분석해 보면 도움이 됩니다.




< 완성된 태그 구름 결과 보기 >

(이 링크가 작동하지 않으면) 메인 페이지의 우측 사이드바 한참 아래쪽에 보시면 있습니다. 붙일 장소가 부족해서 현재 사이드바 아래쪽에 붙여 놓았습니다.



▶▶ 온라인 북마크(즐겨찾기) 사이트, 딜리셔스(del.icio.us/delicious) 사용기

☞ 블로거 (구글 블로그: Blogger.com)

☞ HTML/CSS/자바스크립트(JavaScript)

0 Comments:

Post a Comment

<< Home RSS 2.0 feed

구글 Google 에서 제공하는 무료 블로그 서비스인 블로거 Blogger 의 인터넷 주소는 www.blogger.com 입니다. Blogger 에 블로그를 만들면, blogspot.com 이라는 주소에 블로그가 생성됩니다.
블로그를 직접 방문하지 않고도 최신 게시물을 구독하려면 RSS 2.0 feed 주소를 리더기에 등록하시면 됩니다.
Categories
Previous Posts
Monthly Archives
Top