달력

09

« 2010/09 »

  •  
  •  
  •  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  •  
  •  

'IT 이야기/블로그 & HTML'에 해당되는 글 73건

  1. 2009/07/29 트위터(Twitter)에 글 남기는 법 + 유용한 사이트 소개 (2)
  2. 2009/07/23 트위터(Twitter) ==> 미투데이 ==> 블로그 (2)
  3. 2009/04/24 블로그용 LaTeX 적용 코드 수정 (2)
  4. 2009/04/24 블로그에 LaTeX 수식 입력하기 (6)
  5. 2009/04/09 새 파비콘(favicon)과 블로그이미지, 대표이미지 (6)
  6. 2009/04/01 max-width 이용하여 크게 올라간 웹 이미지 한방에 조절하기 (17)
  7. 2009/03/30 태그 속성값으로 CSS 스타일 적용하기: a[rel=**] { ... } (2)
  8. 2009/03/27 한RSS 디렉토리 등록 (2)
  9. 2009/03/12 내 블로그가 추천블로그 + 다음 블로그 지표보기 (12)
  10. 2009/02/25 딜리셔스(delicious.com)의 Link Rolls 이용해서 즐겨찾기를 관리해 보자 (2)
  11. 2009/02/25 2009년 1월 12일 이전에 티스토리에 올린 동영상 마음데로 지워지지 않는다!! 아셨나요? (14)
  12. 2009/02/25 블로거뉴스 위젯에 추천/인기/최신 탭을 달아보자!! (내용추가) (2)
  13. 2009/02/19 자주 안보는 목록은 드롭다운박스로 바꾸자 (10)
  14. 2009/02/19 HTML 태그의 `title` 속성 활용하여 공간을 효율적으로 사용하기 (9)
  15. 2009/02/18 위젯 적용시에 스타일 바꾸기 - HTML 소스퍼가기 (4)
  16. 2009/02/17 스킨 변경 및 적용 완료: Life Is Mono (Light) (13)
  17. 2009/02/05 메타사이트 추천, RSS 구독 버튼 by Krang (8)
  18. 2009/02/04 이용중인 메타 블로그들
  19. 2009/02/04 한RSS, 피드버너(FeedBurner) 피드 즉시 수집하기 (9)
  20. 2009/02/04 RSS주소 다시 변경 합니다. (변덕이 죽 끓듯... -_-;;)
  21. 2009/01/30 다음 웹인사이드로 보는 재미있는 유입경로들... 난 국제블로거??? (8)
  22. 2009/01/20 티스토리 초대장 드립니다. 선착순 10분 - 종료 (40)
  23. 2009/01/19 내 블로그 유입경로? (8)
  24. 2009/01/08 지금 내 블로그를 보고 있는 접속자는 몇명? whos.amung.us (8)
  25. 2009/01/07 햅틱2 안에 블로그 있다 ?! (2)
  26. 2008/11/10 내 블로그는... $3,387.24 짜리~ (10)
  27. 2008/11/07 태터데스크 사용하면서 "주소/?page=XX" 링크 사용하기 (3)
  28. 2008/11/05 RSS 부분공개에서 전체공개로... FeedBurner 사용중지... (6)
  29. 2008/10/31 CSS - 내용을 가운데로 정렬하기 - margin-left/right: auto (4)
  30. 2008/10/29 태터데스크 주무르기 : 썸네일 배치 ( 내용추가 ) (34)
2009/07/29 14:48

트위터(Twitter)에 글 남기는 법 + 유용한 사이트 소개 IT 이야기/블로그 & HTML2009/07/29 14:48

트위터에 글을 남기는 여러가지 방법이 있겠지만, 그중에서 제가 사용해본 방법들을 정리해 둡니다.



1. 트위터 홈페이지 이용하기

따로 설명이 필요없겠지만, 일단 트위터 사이트가 좀 느려서 가끔 답답함을 느끼곤 하죠. 


2. PC용 어플리케이션 이용하기

대표적으로 Twhirl 과 TweetDeck 이 있는 듯 합니다. 

자세한 내용은 각각의 홈페이지를 참고하면 되겠지만, Twhirl은 약간 메신져와 비슷한 느낌입니다. 디자인도 깔끔한 편이구요. 대화창 비슷한게 하나 떠서 그곳을 이용해 Twitter Home에 해당되는 내용이 실시간으로 업데이트 됩니다. 자리도 많이 차지 하지 않아서 보편적으로 사용하기엔 가장 무난한 것 같습니다. 

TweetDeck은 뭐랄까 좀더 전문화된 도구인데, 보다 넓은 공간을 이용해서 많은 정보를 보여주고 있습니다. 특히 무수히 많은 글들 중에서 자신이 언급된 글들만 걸러서 보여주는 기능이 있는데, 이게 아주 유용하더라구요. 그래서 전 현재 이녀석을 이용중입니다. 한가지 단점은 화면을 좀 많이 차지한다는 점입니다. 

그외에 파이어폭스용 플러그인을 활용하시는 분들도 많은 것 같습니다. 파이어폭스를 주 브라우져로 쓰시는 분이라면 추천 할만 합니다. 


3. 모바일 홈페이지 이용하기: http://m.twitter.com

이 주소로 트위터에 접속하면 이미지는 없고 텍스트로만 깔끔하게 만들어진 화면을 만날 수가 있는데요. 시험삼아 햅틱에서 접속해 보니 잘 되네요. 지금 데이터통화료 정액제 상품을 이용중인데 가끔 활용해도 괘안을 것 같네요. 



그 외에 트위터 관련해서 참고할 만한 곳은 아래와 같습니다.



그리고, 아래는 몇몇 따로 알게된 사이트 입니다. 아마 위 두곳중에 어딘가에 언급이 되어 있을 법한데, 그냥 따로 기록해 둡니다. (이부분은 지속적으로 업데이트 할 예정입니다.)

  • Twibbon: 자신의 트위터 프로필 이미지에 리본이나 뱃지를 달아주는 서비스


뭔가 잘 정리해 보고 싶었으나, 한자한자 입력할때마다 귀차니즘이 배가되어 그냥 이정도로 마무리 합니다. 그냥 북마크 수준밖에 안되버렸네용.. 에궁..

저작자 표시 비영리 변경 금지

'IT 이야기 > 블로그 & HTML' 카테고리의 다른 글

트위터(Twitter)에 글 남기는 법 + 유용한 사이트 소개  (2) 2009/07/29
트위터(Twitter) ==> 미투데이 ==> 블로그  (2) 2009/07/23
블로그용 LaTeX 적용 코드 수정  (2) 2009/04/24
블로그에 LaTeX 수식 입력하기  (6) 2009/04/24
새 파비콘(favicon)과 블로그이미지, 대표이미지  (6) 2009/04/09
max-width 이용하여 크게 올라간 웹 이미지 한방에 조절하기  (17) 2009/04/01
TAG tweetdeck, twhirl, twitter, twitterfox, 트위터
Trackback (0) : Comment (2)
Posted by 호아범

TRACKBACK | http://www.crazybar.net/trackback/937 관련글 쓰기

댓글을 달아 주세요

  1. BlogIcon gostopgo90 2009/07/30 07:53  댓글주소  수정/삭제  댓글쓰기

    파이어폭스를 사용해서 그런지 twitterFox 가 참 편리하네요...
    데스크탑용도 있는줄 처음알았네요. 좋은 정보 감사합니다.^^&

    • BlogIcon 호아범 2009/08/06 01:25  댓글주소  수정/삭제

      파폭 쓰시는 분들은 대부분 그걸 이용하시더라구요.
      저도 파폭을 가끔 쓰기때문에 함 깔아보려구요.. ^^

2009/07/23 16:33

트위터(Twitter) ==> 미투데이 ==> 블로그 IT 이야기/블로그 & HTML2009/07/23 16:33

트위터를 쓰다보면 미투데이처럼 하루 단위로 글을 블로그로 보냈으면 하는 바램이 생기더라구요.

기존에 http://www.loudtwitter.com 에서 곧바로 블로그로 보내는 기능을 제공했다고 합니다만, 현재는 서비스가 중지된 상태이고, 운영자가 다시 살려보려고 애쓰고 있는 듯 합니다.

찾아보니까 API를 통해서 트위터의 글을 미투데이로 보내는 서비스를 APP가 있더라구요. 참고로, 이 APP는 미투데이의 차니님께서 만드셨습니다.


1. twi2me: 트윗을 미투데이로 보내기 ( http://channy.creation.net/project/twi2me )

  • 10분 단위로 Twitter의 글을 미투데이로 등록시켜 줌

2. 블로그로 미투데이 글배달하는 방법 ( http://me2day.net/me2/help/posts/phjd5 )

  • 하루에 한번씩 미투데이에 등록된 글을 BlogAPI를 지원하는 블로그로 보내줌


한가지 생각해 보아야 하는게, 그럼 Tistory2Twitter 플러그인과는 어떤 충돌이 안생기는 지 고민을 해봐야 하는데요. 이부분은 문제가 안될것 같습니다. 왜냐하면, Tistory2Twitter 플러그인은 발행된 글만 Twitter로 전송해주고, 미투데이 글배달은 공개설정으로 글이 등록되기 때문이죠.

어쨌든, 이렇게 해서 테스트를 함 해보니, 잘 오네요.. ( http://www.crazybar.net/928 )


저작자 표시 비영리 변경 금지

'IT 이야기 > 블로그 & HTML' 카테고리의 다른 글

트위터(Twitter)에 글 남기는 법 + 유용한 사이트 소개  (2) 2009/07/29
트위터(Twitter) ==> 미투데이 ==> 블로그  (2) 2009/07/23
블로그용 LaTeX 적용 코드 수정  (2) 2009/04/24
블로그에 LaTeX 수식 입력하기  (6) 2009/04/24
새 파비콘(favicon)과 블로그이미지, 대표이미지  (6) 2009/04/09
max-width 이용하여 크게 올라간 웹 이미지 한방에 조절하기  (17) 2009/04/01
TAG me2day, Tistory2Twitter, twi2me, twitter, 글배달, 미투데이, 블로그, 트위터
Trackback (2) : Comment (2)
Posted by 호아범

TRACKBACK | http://www.crazybar.net/trackback/929 관련글 쓰기

  1. SUBJECT hawksong72의 생각

    2009/07/24 11:50 TRACKED FROM hawksong72's me2DAY  삭제

    TendoZinZzA님 http://bit.ly/cgUHg 여기 가면 트위터를 미투로 미투를 블로그로 보내는 방법 정리 되어 있습니다.

  2. SUBJECT 퓨처워커의 생각

    2010/02/16 23:50 TRACKED FROM futurewalker's me2DAY  삭제

    결국 트위터 백업을 위해 트위터 -> 미투데이-> 블로그 연동을 시도해보기로 함. 참 뭐하는 짓인지. http://bit.ly/bwVKIr

댓글을 달아 주세요

  1. BlogIcon 어랍쇼 2009/07/24 02:35  댓글주소  수정/삭제  댓글쓰기

    저도 이미 똑같은 꼼수를 활용하고 있지요. 트위터->미투데이->티스토리

    • BlogIcon 호아범 2009/07/27 16:59  댓글주소  수정/삭제

      네.. ^^ 이미 많은 분들이 사용하고 계시더라구요. ㅎㅎ..
      사실, 이런 꼼수(?)보다는 티스토리 측에서 직접 이런 기능을 구현해 주었으면 하는 바람입니다.

2009/04/24 14:51

블로그용 LaTeX 적용 코드 수정 IT 이야기/블로그 & HTML2009/04/24 14:51

먼저 올린 글에서는 일단 적용만 시켰었는데요. JavaScript 코드를 좀 다듬어 봤습니다.


적용하기

1. 스킨의 </head> 앞에 아래 소스 추가

<script type="text/javascript" language="javascript">
<!--
        var eqTags = {"tex":"\\small\\textstyle ", "texeq":""};

        function createTex() {
                for(tag in eqTags) {
                        document.createElement(tag);
                }
        }       

        function doTex(){
                mathtex_server = "http://www.problem-solving.be/cgi-bin/mathtex.cgi?";
        
                for(tag in eqTags) {
                        eq = document.getElementsByTagName(tag);
                        for (var i=0; i<eq.length; i++) {
                                imgSrc =  mathtex_server + eqTags[tag] + eq[i].innerHTML;
                                eq[i].innerHTML = "<img class=\"equation\" src=\""
                                                                                        + encodeURI(imgSrc)  + "\" />";
                        }
                }
        }

        createTex() ;
-->
</script>


2. 스킨의 </body> 앞에 아래 소스 추가

<script type="text/javascript" language="javascript">
<!--
        doTex();
-->
</script>



혹시 관심있으신 분들 중에 적용하시다 문제 있으면 댓글 남겨주세요...

저작자 표시 비영리 변경 금지

'IT 이야기 > 블로그 & HTML' 카테고리의 다른 글

트위터(Twitter)에 글 남기는 법 + 유용한 사이트 소개  (2) 2009/07/29
트위터(Twitter) ==> 미투데이 ==> 블로그  (2) 2009/07/23
블로그용 LaTeX 적용 코드 수정  (2) 2009/04/24
블로그에 LaTeX 수식 입력하기  (6) 2009/04/24
새 파비콘(favicon)과 블로그이미지, 대표이미지  (6) 2009/04/09
max-width 이용하여 크게 올라간 웹 이미지 한방에 조절하기  (17) 2009/04/01
TAG LaTeX, MathTeX, TeX, 블로그, 수식입력, 수식편집, 티스톨
Trackback (2) : Comment (2)
Posted by 호아범

TRACKBACK | http://www.crazybar.net/trackback/883 관련글 쓰기

  1. SUBJECT [Tip] 블로그에 LaTex 수식 입력하기

    2009/04/24 15:44 TRACKED FROM ::날탱의 컴터 이야기::  삭제

    요즘 이직때문에 회사에 나와서도 일은 안하고 이리저리 정리하면서 RSS 피드를 읽는 중, 블로그에서 LaTex수식을 사용하는 글을 보고 앞으로 사용할 일이 많아 정리한다. LaTex는 주로 수식을 많이 사용하는 분야에서 이용하는 문서 형식으로, WYSWYG에디터가 아니라 HTML처럼 명령어를 이용해서 문서를 생성하는데, 소스로 작성된 수식을 변환해주는 해석기를 거쳐서 이미지나 PDF와 같은 문서로 결과가 출력됩니다. 지금이야 그렇다처도 앞으로 이직을..

  2. SUBJECT Tistory에서 수식 표현하기

    2009/06/12 22:16 TRACKED FROM Ens, New Start  삭제

    다음의 소스코드를 skin.html 의 첫 부분인 </head> 바로 앞에 넣으세요. <script language="javascript" type="text/javascript"> // Thanks for the public TeX renderer, mathTeX by John Forkosh! // http://www.forkosh.com // modified by ensual at gmail.com document.createElement("te..

댓글을 달아 주세요

  1. 2009/04/25 12:36  댓글주소  수정/삭제  댓글쓰기

    비밀댓글 입니다

    • BlogIcon 호아범 2009/04/26 22:04  댓글주소  수정/삭제

      너무 죄송해 하시니 제가 오히려 죄송합니다.
      블로그를 운영하다보면 이런 일이 비일비재하더라구요. 사람마다 중요하게 생각하는 기준도 다르구요.
      어쨌든, 기분나뻐하지 않으시고 조치해 주셔서 넘 감사합니다. ^^

2009/04/24 00:58

블로그에 LaTeX 수식 입력하기 IT 이야기/블로그 & HTML2009/04/24 00:58

일도 잘 안되고 심심해서 RSS로 블로그들을 살펴보던중, 재미난 글을 하나 찾았습니다. 바로, 블로그에서 LaTeX수식을 사용하는 방법에 관한 글이었습니다. 

LaTeX는 주로 이공계와 같이 수식을 많이 사용하는 분야에서 이용하는 문서형식인데, WYSWYG에디터가 아니라 HTML처럼 명령어를 이용해서 문서를 생성하는데, 소스로 작성된 수식을 변환해주는 해석기를 거쳐서 이미지나 PDF문서가 결과가 됩니다.

블로그에 글을 작성하다보면 가끔 수식을 입력하고 싶을때가 있는데, 보통은 다른 에디터에서 작성한 후에 이미지를 업로드 했었죠. 그런데, 이 방법을 이용하면 아주 간단하게 수식을 입력할 수가 있겠네요. 

여기저기 관련글을 좀 더 찾아본 후에 정리해 봅니다. 


적용하기

위 글에서 소개한 블로그에 올려진 방법을 바탕으로 본 블로그에도 적용을 해 보았습니다.
(참고로 아래 방법의 원문은 http://hshin.info/185 입니다.)

1. 스킨의 </head> 앞에 아래 소스 추가

<script language="javascript" type="text/javascript">
        document.createElement("tex");
        document.createElement("texeq");
        
        var mathtex_server = "http://www.problem-solving.be/cgi-bin/mathtex.cgi";    

        function generateLink(code) {   
                return "<img class=\"equation\" src=\""+ mathtex_server + "?" + code +"\" />";
        }
         
        function generateTeX(tag) {
                var eqn = window.document.getElementsByTagName(tag);
                for (var i=0; i<eqn.length; i++) {
                        if (tag == "tex") { 
                                eqn[i].innerHTML = generateLink("\\small\\textstyle " + eqn[i].innerHTML);
                        } 
                        if (tag == "texeq") { 
                                eqn[i].innerHTML = generateLink(eqn[i].innerHTML);
                        } 
                }
        }
</script>


2. 스킨의 </body> 앞에 아래 소스 추가

<script language="javascript" type="text/javascript">
        generateTeX("tex");
        generateTeX("texeq");
</script>



사용하기 및 결과보기

인라인으로 문장에 포함되는 형태로 사용하려면 <tex> ~ </tex>, 좀더 큰 형태로 사용하려면 <texeq> ~</texeq> 태그를 이용하면 됩니다. 

그 결과 아래와 같이 이쁜 수식을 사용할 수 있게 보여지고 있습니다. 

이차방정식의 근의 공식:

입력: <texeq> ax^2+bx+c=0 ~~~\Leftrightarrow~~~ x=\frac{-b \pm \sqrt{b^2-4ac}}{2a} </texeq>
 결과:  ax^2+bx+c=0 ~~~\Leftrightarrow~~~ x=\frac{-b \pm \sqrt{b^2-4ac}}{2a}



관련사이트

본 글은 아래 사이트들을 참고하여 작성된 것임을 밝혀둡니다.



저작자 표시 비영리 변경 금지

'IT 이야기 > 블로그 & HTML' 카테고리의 다른 글

트위터(Twitter) ==> 미투데이 ==> 블로그  (2) 2009/07/23
블로그용 LaTeX 적용 코드 수정  (2) 2009/04/24
블로그에 LaTeX 수식 입력하기  (6) 2009/04/24
새 파비콘(favicon)과 블로그이미지, 대표이미지  (6) 2009/04/09
max-width 이용하여 크게 올라간 웹 이미지 한방에 조절하기  (17) 2009/04/01
태그 속성값으로 CSS 스타일 적용하기: a[rel=**] { ... }  (2) 2009/03/30
TAG HTML, LaTeX, MathTeX, TeX, 블로그, 수식입력, 티스토리
Trackback (4) : Comment (6)
Posted by 호아범

TRACKBACK | http://www.crazybar.net/trackback/881 관련글 쓰기

  1. SUBJECT Tistory에서 수식 표현하기

    2009/04/24 04:48 TRACKED FROM New Start, Ens!  삭제

    다음의 소스코드를 skin.html 의 첫 부분인 </head> 바로 앞에 넣으세요. <script language="javascript" type="text/javascript"> document.createElement("tex"); document.createElement("texeq"); </script> before_end_head.js 다음의 소스코드를 skin.html 의 마지막 부분인 </body> 바로 앞에 넣으세요. <script..

  2. SUBJECT 블로그용 LaTeX 적용 코드 수정

    2009/04/24 14:52 TRACKED FROM Crazy Life on Net  삭제

    먼저 올린 글에서는 일단 적용만 시켰었는데요. JavaScript 코드를 좀 다듬어 봤습니다. 적용하기 1. 스킨의 </head> 앞에 아래 소스 추가 <script type="text/javascript" language="javascript"> <!--         var eqTags = {"tex":"\\small\\textstyle ", "texeq":""};         function createTex() {               ..

  3. SUBJECT [Tip] 블로그에 LaTex 수식 입력하기

    2009/04/24 15:37 TRACKED FROM ::날탱의 컴터 이야기::  삭제

    요즘 이직때문에 회사에 나와서도 일은 안하고 이리저리 정리하면서 RSS 피드를 읽는 중, 블로그에서 LaTex수식을 사용하는 글을 보고 앞으로 사용할 일이 많아 정리한다. LaTex는 주로 수식을 많이 사용하는 분야에서 이용하는 문서 형식으로, WYSWYG에디터가 아니라 HTML처럼 명령어를 이용해서 문서를 생성하는데, 소스로 작성된 수식을 변환해주는 해석기를 거쳐서 이미지나 PDF와 같은 문서로 결과가 출력됩니다. 지금이야 그렇다처도 앞으로 이직을..

  4. SUBJECT Tistory에서 수식 입력하기

    2009/05/27 03:46 TRACKED FROM Adorpyiskn  삭제

    Tistory에서 수식을 입력할 수 있는 방법이 있다고 해서 기록해둔다. 이 정보는 이 블로그에서 가져온 것이다. 모든 코드의 삽입은 skin.html 파일에서 이루어진다. 다음 코드를 </head> 앞에 추가해준다. <script type="text/javascript" language="javascript"> <!-- var eqTags = {"tex":"\\small\\textstyle ", "texeq":""}; function createT..

댓글을 달아 주세요

  1. BlogIcon rain2u 2009/04/24 05:53  댓글주소  수정/삭제  댓글쓰기

    잘 정리된 글 잘 읽었습니다.
    저 역시 공부하는 과목의 특성상 수식을 많이 쓰게 되는데...
    게다가 정리벽(!?)까지 있어서... 블로그에다가 공부한 내용을 정리하여 놓습니다.
    그러다가 보니 자연스럽게 라텍스를 알게 되었고...

    현재에는 구글 가젯으로 제공되는 sitmo 에서 필요한 수식만을 입력하여 그림파일로 다운받은 뒤,
    블로그에 저장하고 있습니다. :)

    • BlogIcon 호아범 2009/04/24 10:42  댓글주소  수정/삭제

      네, 저도 본문에 썼듯이 수식을 꼭 올려야 하는 상황이면 PC에서 작업을 한 후에 올리곤 했었는데, 그게 은근 귀찮아서 아예 수식을 빼버리는 일이 생기더라구요.
      생각보다 간단한 방법이라서, 적용해 두면 써먹을 일이 있을거 같아요.. ^^
      다만 mathTeX 서버를 이용하는 방식이라 경우에 따라선 약간의 delay가 생기지 않을까 하는 생각이 드네요.

  2. BlogIcon Ens 2009/04/24 06:42  댓글주소  수정/삭제  댓글쓰기

    제가 제시한 것과 다르게 generateLink, generateTeX 함수 등의 정의가 </head> 위쪽으로 옮긴 이유가 있는지요?
    제가 JavaScript를 발로 짜는 습관이 있어서.. 제 코드에 문제가 있는 거면..
    제 홈피에 있는 내용도 바꾸야 되는 것 같아서 질문드립니다.

    • BlogIcon 호아범 2009/04/24 10:45  댓글주소  수정/삭제

      아니요.. 수행상에 문제가 있어서 바꾼건 아닙니다. ^^
      다만 본문에 함수 정의가 나오면 정리가 되질 않아서, 유지보수 차원에서 옮겼다는 설명이 가장 적합할 것 같네요.
      또, 이렇게 해두면 별도 JS 파일로 저장한 후에 파일체로 포함시키기에도 용이해서요.
      어쨌든 유용한 정보 공개해 주셔서 넘 감사합니다. ^^

  3. BlogIcon 돌이아빠 2009/04/24 08:01  댓글주소  수정/삭제  댓글쓰기

    LaTex를 블로그에서도 쓸 수가 있게 되었네요? 오호.이거 재밌어 보입니다.
    심심할때 적용해 봐야겠어요. ㅎㅎㅎ

    • BlogIcon 호아범 2009/04/24 10:46  댓글주소  수정/삭제

      그러게요... 비공개로 사용중인 Wiki에는 관련 기능을 구현해서 사용중이었는데, 블로그에 적용해볼 생각을 못했네요.
      역시 세상에는 발빠른 분들이 참 많은것 같아요. ^^

2009/04/09 16:03

새 파비콘(favicon)과 블로그이미지, 대표이미지 IT 이야기/블로그 & HTML2009/04/09 16:03

파비콘 (favicon)

대표 이미지

블로그 이미지

파비콘(favicon)과 블로그이미지, 대표이미지를 커피콩 사진으로 바꿔봤습니다. 

점심시간에 커피 마시다가 문득 커피콩으로 글씨를 써보자는 생각에 시작했는데, 미적감각 "꽝"인 저로써는 뭐 이정도로 만족입니다. ㅎㅎ~

참고로, 이미지를 파비콘으로 사용할 아이콘 파일로 바꾸는 작업은 http://converticon.com 에서 온라인 상으로 손쉽게 처리하실 수 있습니다. 

그리고, 댓글에서 파비콘과 블로그 이미지 사용에 관한 설정은 관리자 -> 플러그인에서 하실수 있습니다.


저작자 표시 비영리 변경 금지

'IT 이야기 > 블로그 & HTML' 카테고리의 다른 글

블로그용 LaTeX 적용 코드 수정  (2) 2009/04/24
블로그에 LaTeX 수식 입력하기  (6) 2009/04/24
새 파비콘(favicon)과 블로그이미지, 대표이미지  (6) 2009/04/09
max-width 이용하여 크게 올라간 웹 이미지 한방에 조절하기  (17) 2009/04/01
태그 속성값으로 CSS 스타일 적용하기: a[rel=**] { ... }  (2) 2009/03/30
한RSS 디렉토리 등록  (2) 2009/03/27
TAG 블로그, 이미지, 커피콩, 파비콘
Trackback (1) : Comment (6)
Posted by 호아범

TRACKBACK | http://www.crazybar.net/trackback/872 관련글 쓰기

  1. SUBJECT 나도 블로그 파비콘 파헤치기

    2009/04/24 16:16 TRACKED FROM 미친 사람의 말에서도 얻어들을 것이 있다  삭제

    이번 시간은 파비콘을 적나라게 파헤치겠습니다. 우선 용어의 정의부터 알아보도록 하죠. 파비콘이란 한마디로 즐겨찾기 아이콘 입니다. 별거 아니죠? 원래는 즐겨찾기(facovities)와 아이콘(icon)의 합성어로, 인터넷 웹브라우저의 주소창 옆에 붙은 조그마한 아이콘을 말합니다 예) 즐겨찾기 아이콘을 만드는 이유는 블로그의 입지(섬세하게)를 확고히 하기 위함입니다. 다들 이런 경험 있으시죠? "컴퓨터에 파비콘 아이콘이 있으면 먼저 눈이 가는 현상"..

댓글을 달아 주세요

  1. BlogIcon 함차 2009/04/09 16:55  댓글주소  수정/삭제  댓글쓰기

    ㅎㅎ..귀엽네요

  2. BlogIcon Krang 2009/04/09 21:02  댓글주소  수정/삭제  댓글쓰기

    정말 독특하고 재밌습니다.ㅎ
    풉!~ 하고 웃음이 터졌다는!
    저도 주변의 콩(?)을 모아봐야....

    • BlogIcon 호아범 2009/04/13 20:33  댓글주소  수정/삭제

      오.. 제가 감동을 드린건가요? ㅎㅎ
      까만콩 말고, 강남콩이나 메주콩으로 하면 더 이쁘지 않을까 하는 생각이 듭니다. ㅋㅋ

  3. BlogIcon MindEater™ 2009/04/10 16:43  댓글주소  수정/삭제  댓글쓰기

    ㅎㅎ 잼있어요.
    그나저나 아무런 연관이 없는 제 파리콘도 바꿔주고 싶은데~ ㅠㅠ

    • BlogIcon 호아범 2009/04/13 20:32  댓글주소  수정/삭제

      저도 사실 커피콩이랑 별 연관은 없습니다.
      그냥 가끔 갈아서 마시는 정도네요..
      파비콘이니 블로그이미지니... 은근 신경쓰입니다. 대충 하자니 그것도 이상하고, 잘 만들자니 자신도 없고. 에궁..

2009/04/01 22:55

max-width 이용하여 크게 올라간 웹 이미지 한방에 조절하기 IT 이야기/블로그 & HTML2009/04/01 22:55

블로그 스킨을 변경하다 보면, 글을 올리는 영역의 크기가 천차만별입니다. 이미지 업로드시, 글쓰기 영역의 폭에 그 크기를 맞춘 경우에, 좁은 스킨을 이용하다가 넓은 걸로 바꾸는 경우는 문제가 되지 않지만, 그 반대의 경우는 그림이 잘리는 문제가 발생하게 되죠.

본 블로그도 여러번 스킨을 바꾸면서 이런 문제가 발생을 하더라구요. 이럴때, 유용하게 활용할 수 있는 팁 하나 올립니다. 

max-width 속성

예전에 max-width에 관한 글을 올린적이 있습니다. 

간단하게 말해서, 개체의 폭의 최대 값을 정해놓고, 개체가 이 값보다 큰 경우 크기를 맞쳐주는 역할을 합니다. 유사한 속성으로는 max-height, min-width, min-height 가 있습니다.


스타일 설정하기

블로그 본문에 보여지는 이미지에 대해 CSS를 이용하여 max-width를 설정해 둡니다. 그리고, height는 자동으로 조절되도록 설정합니다.

    .imageblock img{
            max-width: 680px;
            height: auto;
    }

티스토리 에디터를 이용해서 이미지를 올린 경우에는 imageblock 이라는 DIV 안에 이미지가 들어가게 됩니다. 그래서 위와 같이 설정해 두면 해당 이미지에 대해, 폭의 최대값은 680px가 되고 높이는 자동으로 설정됩니다. 

범용으로 적용하려면 스킨의 구조를 적절히 활용하여 적용하고 싶은 이미지 클래스를 설정하면 될 듯 합니다. 또, 스타일이 중첩되어서 제대로 적용이 되지 않는다면, 속성값 뒤에 !important를 넣어서 강제로 적용 시키는 방법도 있습니다. 


결과보기

적용 전

적용 후


적용 전에는 화면에서 사진이 잘린걸 볼 수 있지만, 적용 후에는 정상적으로 보여지는 걸 알 수 있습니다.


나머지

max-width 속성은 인터넷익스플로러 6 (IE6)에서는 지원되지 않습니다. 현재 크롬과 파이어폭스, 인터넷익스플로러 7, 8 (IE7, IE8)에서는 정상적으로 동작하는 걸로 확인되었습니다. 


저작자 표시 비영리 변경 금지

'IT 이야기 > 블로그 & HTML' 카테고리의 다른 글

블로그에 LaTeX 수식 입력하기  (6) 2009/04/24
새 파비콘(favicon)과 블로그이미지, 대표이미지  (6) 2009/04/09
max-width 이용하여 크게 올라간 웹 이미지 한방에 조절하기  (17) 2009/04/01
태그 속성값으로 CSS 스타일 적용하기: a[rel=**] { ... }  (2) 2009/03/30
한RSS 디렉토리 등록  (2) 2009/03/27
내 블로그가 추천블로그 + 다음 블로그 지표보기  (12) 2009/03/12
TAG CSS, max-width, 블로그, 스킨, 스타일, 이미지 크기 조절, 티스토리
Trackback (1) : Comment (17)
Posted by 호아범

TRACKBACK | http://www.crazybar.net/trackback/867 관련글 쓰기

  1. SUBJECT CSS - 가로사진 &amp; 세로사진 구분없이 정사각형 안으로 쏙 들어오는 썸네일 만들기

    2009/04/01 23:01 TRACKED FROM Crazy Life on Net  삭제

    테터데스크 사용중에 보면 썸네일 크기를 조정하기가 쉽지 않다. 보통은 가로나 세로 기준 하나만 적용해서 이미지 크기를 조정하게 되므로 사진의 위아래나 좌우가 잘리기 마련이다. 이때 사용하면 좋은 CSS 스타일이 바로 max-width와 max-height. 영어단어에서 유추할 수 있듯이, 최대 높이와 최대 너비를 지정해 주는 구문인데, 이를 이용하면 이미지의 최대 크기가 제약되므로, 화면상의 이미지는 내가 지정해둔 공간 안으로 쏙 들어오게 된다. 정..

댓글을 달아 주세요

  1. BlogIcon 어랍쇼 2009/04/02 08:42  댓글주소  수정/삭제  댓글쓰기

    (우선 전 완전 초짜입니다. 따라만 할뿐 ㅠ.ㅠ)
    제 스킨 css를 보니 이미지블럭이란 부분이
    .imageblock {border:none; padding:0; margin:5px 0;}
    요렇게 되어있는데...위에 까만바탕에 써주신 것처럼 괄호안에 넣으면 되나요? 전 적용이 잘 안되네요.
    저의 경우에는 어떻게 수정해야 하는지요?

    • BlogIcon 호아범 2009/04/02 14:53  댓글주소  수정/삭제

      어렵게 생각하실 것 없습니다.
      말씀하신 .imageblock { .... } 아랫줄에 위 내용을 추가하시면 됩니다.
      .imageblock { .... } 는 .imageblock 자체에 대한 속성이고, 위 내용은 .imageblock에 속해 있는 img 에 대해서만 적용이 됩니다.
      그럼 성공하시길~~

  2. BlogIcon 돌이아빠 2009/04/02 10:04  댓글주소  수정/삭제  댓글쓰기

    오호 이런 것도 있는거군요!
    호아범님한테 많이 배우고 있습니다 ㅎㅎㅎ 저도 적용을 함 해놔봐야 겠어용.
    감사합니다~

  3. BlogIcon 필넷 2009/04/02 16:28  댓글주소  수정/삭제  댓글쓰기

    좋은 팁인데요.
    한수 배우고 갑니다. ^^*

  4. BlogIcon 함차 2009/04/02 20:10  댓글주소  수정/삭제  댓글쓰기

    너무 좋은요..바로 적용해야겠어요..ㅋㅋ

  5. BlogIcon 함차 2009/04/02 20:21  댓글주소  수정/삭제  댓글쓰기

    css에 .imageblock {border:none; padding:0; margin:5px 0;} 아래에
    .imageblock img{ max-width: 680px; height: auto; } 추가하고
    사진을 넣어봤는데..적용되지 않네요
    사진이 700 사이즈로 ..에궁

    • BlogIcon 호아범 2009/04/02 21:01  댓글주소  수정/삭제

      올리는 단계에서는 블로그 스킨에 설정된 값으로 적용이 되구요.
      화면에 뿌려지는 시점에서 위 값이 적용 됩니다.
      그리고, 혹시 IE6 쓰시는 건 아니시죠? ^^

    • BlogIcon 호아범 2009/04/02 21:06  댓글주소  수정/삭제

      IE8로 확인해 본 결과 스타일이 적용되고 있습니다.
      혹시, 큰 사이즈 그림이 올려진 글이 있나요?

  6. BlogIcon MindEater™ 2009/04/03 12:59  댓글주소  수정/삭제  댓글쓰기

    나중에 스킨 바꿀때 도움을 받을 수 있겠군요~~ ^^

  7. BlogIcon 폭력 2009/06/16 22:53  댓글주소  수정/삭제  댓글쓰기

    오 걱정거리였는데 감사합니다

  8. 몬수니 2009/07/08 12:26  댓글주소  수정/삭제  댓글쓰기

    css스타일에 max-widh를 정의해 둔 것을 보고 의미가 무언가 싶어서 검색하다가 님 블로그에 들어와서 유용한 정보를 얻고 가네요. 감사합니다.

2009/03/30 21:57

태그 속성값으로 CSS 스타일 적용하기: a[rel=**] { ... } IT 이야기/블로그 & HTML2009/03/30 21:57

CSS 스타일시트를 이용해서 스타일을 적용하는 방법에는 대표적으로 세가지 방법이 있습니다. 

  • 태그를 이용한 방법: A { ... } / DIV { ... }
  • 클래스를 이용한 방법: .class1 { ... }
  • 아이디를 이용한 방법: #id { ... }

원소들간의 포함관계를 나타내고 싶을때는 공백을 이용해서 나열하면 되고, 동시에 여러 부류에 스타일을 적용하고 싶을때는 ,(comma)를 이용해서 표현하면 됩니다.

예를 들어, 아래와 같은 CSS 구문을 살펴보면, 

content 라는 아이디를 가진 원소 내부에 entry 클래스 원소 내부의 ol, ul, il 태그의 padding-left 을 25px 로 설정하라는 의미가 됩니다. 

그런데, 경우데 따라 위 방법만으로는 표현하기가 힘든 경우가 있습니다.

가령, 서버측에서 자동으로 생성되어 오는 html문장이면서, 별도의 아이디나 클래스가 없는 경우일텐데요, 대표적으로, 티스토리 본문아래에 포함되는 CCL[각주:1] 안내문구가 그렇습니다.

본 블로그에 포함되어 있는 html은 아래와 같습니다. (이쁘게 보이도록 일부만 캡춰하였음)

가만히 들여다 보면, fieldset 태그로 묶여 있을뿐 어디에도 클래스나 아이디가 보이질 않습니다. 만약, 이에 포함된 링크에만 특별한 속성값을 할당하고 싶을 경우에는 좀 난감하죠. 

그런데, 한줄기 희망이 보이는데, 그건 바로 바로 rel="license" 라고 표현된 링크의 속성값입니다. 곰곰히 생각해보니, 속성값을 이용해서도 스타일을 할당하는 방법이 있었던게 생각이 나더라구요. 표현법은 아래와 같습니다. 

tag[attribute=value] { ... } 

이 방법을 이용하면, tag 중에서 attribute 값이 value 인 원소들에만 적용되는 스타일을 설정할 수 있습니다. 

다음은 본 블로그에 적용된 스타일입니다. 본문 글에 포함된 링크의 뒤쪽에 화살표()가 보이도록 설정을 하였고, 본문 아래의 부가항목들에서는 보이지 않도록 만들어 보았습니다.

화살표 부분을 보면 첫줄은 .article 클래스 > fieldset 태그 > a 중에서 rel 값이 license 인 원소를 의미하고, 두번째, 세번째 줄은 카테고리글 더보기 부분의 클래스 > a 를 의미합니다. 마지막 줄은 메타사이트 추천버튼 부분인데 여기는 제가 직접 입력한 부분이므로 간단하게 meta_link 라는 클래스를 이용해서 설정했습니다. 

이 결과, 의도데로 해당부분에서는 화살표가 보이지 않게 되었지요. 아주 간단한 팁이긴 합니다만, 알아두면 간혹 요긴하게 쓰일 곳이 있을 것 같아 포스팅 해 둡니다.

다만, 이 기능은 인터넷 익스플로러 6 이전 버전에서는 안된다고 합니다. 


  1. Creative Commons License [본문으로]
저작자 표시 비영리 변경 금지

'IT 이야기 > 블로그 & HTML' 카테고리의 다른 글

새 파비콘(favicon)과 블로그이미지, 대표이미지  (6) 2009/04/09
max-width 이용하여 크게 올라간 웹 이미지 한방에 조절하기  (17) 2009/04/01
태그 속성값으로 CSS 스타일 적용하기: a[rel=**] { ... }  (2) 2009/03/30
한RSS 디렉토리 등록  (2) 2009/03/27
내 블로그가 추천블로그 + 다음 블로그 지표보기  (12) 2009/03/12
딜리셔스(delicious.com)의 Link Rolls 이용해서 즐겨찾기를 관리해 보자  (2) 2009/02/25
TAG CSS, HTML, 블로그, 속성, 스킨, 스킨수정, 스타일시트, 아이디, 클래스, 태그
Trackback (0) : Comment (2)
Posted by 호아범

TRACKBACK | http://www.crazybar.net/trackback/865 관련글 쓰기

댓글을 달아 주세요

  1. BlogIcon 필넷 2009/03/31 09:47  댓글주소  수정/삭제  댓글쓰기

    오~ 정말 잘 정리해주셨네요.
    잘 보고 갑니다. ^^

2009/03/27 14:54

한RSS 디렉토리 등록 IT 이야기/블로그 & HTML2009/03/27 14:54

한RSS 디렉토리

한RSS 디렉토리 등록을 위한 글입니다.  

디렉토리 등록/변경 요건 
  1. 구독자수가 20명 이상이어야 합니다. (부정적인 방법으로 구독자를 늘렸을 경우, 디렉토리에서 영구제외됩니다.)
  2. 아래 조건에 맞는 글을 블로그에 작성해 주십시오.
    • 제목 : 한RSS 디렉토리 등록
    • 본문 : <a href="http://www.hanrss.com/directory" target="_blank">한RSS 디렉토리</a>
    • 해당 글을 RSS로 발행합니다.
  3. 위 요건을 만족시킨 후, 아래 요청란을 통해 디렉토리 등록을 요청해 주십시오. 요청이 반영되기까지는 하루 정도의 시간이 소요될 수 있습니다.


저작자 표시 비영리 변경 금지

'IT 이야기 > 블로그 & HTML' 카테고리의 다른 글

max-width 이용하여 크게 올라간 웹 이미지 한방에 조절하기  (17) 2009/04/01
태그 속성값으로 CSS 스타일 적용하기: a[rel=**] { ... }  (2) 2009/03/30
한RSS 디렉토리 등록  (2) 2009/03/27
내 블로그가 추천블로그 + 다음 블로그 지표보기  (12) 2009/03/12
딜리셔스(delicious.com)의 Link Rolls 이용해서 즐겨찾기를 관리해 보자  (2) 2009/02/25
2009년 1월 12일 이전에 티스토리에 올린 동영상 마음데로 지워지지 않는다!! 아셨나요?  (14) 2009/02/25
TAG RSS, 디렉토리 서비스, 한RSS 디렉토리 등록
Trackback (0) : Comment (2)
Posted by 호아범

TRACKBACK | http://www.crazybar.net/trackback/862 관련글 쓰기

댓글을 달아 주세요

  1. BlogIcon 함차 2009/03/28 01:44  댓글주소  수정/삭제  댓글쓰기

    포스트만 작성하면 되는건가요..

    • BlogIcon 호아범 2009/03/30 10:40  댓글주소  수정/삭제

      본문에 있는 링크 눌러보시면, 등록하기라는 링크가 있습니다. 글 작성하고 그곳에 등록신청하면 됩니다.

2009/03/12 00:24

내 블로그가 추천블로그 + 다음 블로그 지표보기 IT 이야기/블로그 & HTML2009/03/12 00:24

블로그 주소로 놀수 있는 재미있는 놀이를 또 하나 찾았습니다. ^^

다음에서 블로그검색을 통해 제 블로그를 찾아보니, 떡하니 "추천"이라는 글귀가 붙어 있네요... ㅎㅎ.. 무슨 의미가 있을까 싶기는 합니다만, 그래도 일단 기분은 좋습니다. 헤헤~

더불에 예전에 다음 디렉토리 서비스에서 웹사이트에대한 지표를 제공해준다는 글을 쓴적이 있습니다. 얼마나 바꼈을까 싶어서 다시한번 찾아보았지요.

예전보다 순위도 오르고, 소개내용도 들어갔군요. 그런데, 출처가 어찌 되는지는 모르겠지만, 소개 글귀가 재밌네요. "호아범 개인 블로그"... 

참고로, 이를 이용하려면 다음에서 사이트를 찾아낸 다음에 지표보기 버튼을 클릭하면 됩니다.

혹시나 하고 네이버에서도 비슷한 일을 해 보았는데요.. 뭐 좀 많이 썰렁하네요.. -_-;;

 

그냥 심심하실때 재미삼아 함 해보셔요.. ^^

저작자 표시 비영리 변경 금지

'IT 이야기 > 블로그 & HTML' 카테고리의 다른 글

태그 속성값으로 CSS 스타일 적용하기: a[rel=**] { ... }  (2) 2009/03/30
한RSS 디렉토리 등록  (2) 2009/03/27
내 블로그가 추천블로그 + 다음 블로그 지표보기  (12) 2009/03/12
딜리셔스(delicious.com)의 Link Rolls 이용해서 즐겨찾기를 관리해 보자  (2) 2009/02/25
2009년 1월 12일 이전에 티스토리에 올린 동영상 마음데로 지워지지 않는다!! 아셨나요?  (14) 2009/02/25
블로거뉴스 위젯에 추천/인기/최신 탭을 달아보자!! (내용추가)  (2) 2009/02/25
TAG 네이버, 다음, 블로그, 블로그 주소, 순위, 지표, 추천
Trackback (1) : Comment (12)
Posted by 호아범

TRACKBACK | http://www.crazybar.net/trackback/848 관련글 쓰기

  1. SUBJECT 다음 블로그 검색에서 제 블로그 옆에 추천이 붙었네요

    2009/03/12 09:02 TRACKED FROM 즐거운하루  삭제

    요줌 이상하게도 꾸준히 포스팅도 안하고 놀고 있는데 요상하게도 꾸준히 방문자도 많고 왜 그런지 의문도 들고 포스팅할것도 없고 해서 그냥 어떤 경유로 들어오는지 궁금해서 유입 검색어로 검색하다가 뚜시꿍~~~ 제 블로그 옆에 추천표시가 붙었네요 언제 붙여데요? 왠지 붙으니깐 좋은데요 아무래도 추천 표시가 붙으면 다른 블로그 보다 노출이 더 많게죠 ?!아닌가?!? 아무튼 그래서 그런가요 제 블로그 방문자가 많은것이 추천이 붙어서 그런가보네요 헤헤 블로그..

댓글을 달아 주세요

  1. BlogIcon 지우개닷컴 2009/03/12 00:48  댓글주소  수정/삭제  댓글쓰기

    추천 블로그에 선정 되셨군요.

    늦었지만 축하드립니다^^

    • BlogIcon 호아범 2009/03/12 00:55  댓글주소  수정/삭제

      딱히 축하까지야.. 필요있겠습까?
      큰 의미도 없어보이고, 뭐가 좋은지도 모르겠고, 무엇보다도 왜 된건지도 모르는데요..
      그냥 잠시 잠깐 웃은걸로 만족입니다요.. ^^

  2. BlogIcon 즐거운하루 2009/03/12 09:05  댓글주소  수정/삭제  댓글쓰기

    댓글타고 놀러와봐습니다 재미도 있고 기분 좋은일이죠 ^^ 저두 살포시 엮은글 쏘고 갑니다 즐거운하루되세요!

    • BlogIcon 호아범 2009/03/12 12:18  댓글주소  수정/삭제

      에궁.. 직접 놀러오셨네요. ^^ 감사드립니다.
      어쨌든 간에, '다음'에서 추천을 받으니 기분은 좋네요. 헤헤

  3. BlogIcon 돌이아빠 2009/03/12 14:02  댓글주소  수정/삭제  댓글쓰기

    헛 저도 오랫만에 함 해봐야겠따능 ㅋㅋㅋ

  4. BlogIcon 로묘왕자 2009/03/17 09:27  댓글주소  수정/삭제  댓글쓰기

    ㅋㅋ 저도 추천 표시가 있던데...
    Krang 님 말씀대로라면... 대략 암울하고...
    정말로 다음에서 추천을 해준거라면 기쁜데 ㅋㅋ

    • BlogIcon 호아범 2009/03/17 11:05  댓글주소  수정/삭제

      그냥 좋은게 좋은거니까, 기쁘게 생각하셔요.. ^^
      저도 딴 생각 않하고 이건 기쁜일이다... 이렇게 생각중입니다.

2009/02/25 19:21

딜리셔스(delicious.com)의 Link Rolls 이용해서 즐겨찾기를 관리해 보자 IT 이야기/블로그 & HTML2009/02/25 19:21

딜리셔스(delicious.com)는 social 북마크 서비스로서, 사용자는 원하는 웹페이지를 등록할수 있고, 태그를 달거나 다른 사용자 내지 웹페이지에 공유를 할 수 있는 기능을 제공하고 있습니다.


딜리셔스가 제공해주는 기능중에 Link Rolls라는 녀석이 있는데요, 저장되어 있는 북마크중 일부를 다른 웹페이지에서 볼수 있도록 도와주는 일종의 위젯입니다.


딜리셔스 - Link Rolls 사용하기

Link Rolls를 사용하려면 딜리셔스->Setting->Link Rolls 링크를 이용하면 됩니다. 

2영역에서 보여질 정보를 설정하면 3영역에 미리보기가 됩니다. 원하는 설정이 다 끝나면 1영역의 코드를 복사해서 원하는 웹페이지에 삽입하면 됩니다. 

2영역에서 설정하는 내용은 아래와 같습니다. 

  • Title: 제목
  • Tags: 보여질 태그 목록, 지정하지 않으면 전체 북마크가 대상이 됨
  • Icon: 제목 앞에 붙여질 아이콘 모양
  • Quantity: 보여질 북마크 개수
  • Bullets: 북마크 앞에 붙을 점 모양
  • Sort: 정렬방법
  • Show: 각각의 아이템을 표시할지를 선택


그리고, 완성된 코드에 스타일일 입히고 싶을때는 4에 표시된 css styling guide를 참조하면 손쉽게 작성할 수 있습니다.


결과보기

이렇게 해서 완성된 제 Link Rolls 입니다.

제 경우는 특정 태그를 가진 북마크들을 알파벳 순서로 보여지도록 설정했습니다. 블로그에 붙여놓고 싶은 링크들에게 특정한 태그를 붙여줌으로써 별도의 작업 없이도 블로그에 나타나는 링크들을 관리할 수 있게 된거죠. 

또, 필요에 따라 Link Rolls를 여러개 사용한다면 다양한 응용이 가능할 것 같습니다. 다만, 딜리셔스 서버가 좀 느린 감이 있어서 간간히 로딩이 잠깐동안 멈추곤 하네요. -_-;


나머지

참고로, 티스토리 블로그의 사이드바 영역에 추가하려면, [스킨] 위젯 적용시에 스타일 바꾸기 - HTML 소스퍼가기 에서 소개한 HTML 배너출력을 이용하면 편리하게 적용할 수 있습니다.


저작자 표시 비영리 변경 금지

'IT 이야기 > 블로그 & HTML' 카테고리의 다른 글

한RSS 디렉토리 등록  (2) 2009/03/27
내 블로그가 추천블로그 + 다음 블로그 지표보기  (12) 2009/03/12
딜리셔스(delicious.com)의 Link Rolls 이용해서 즐겨찾기를 관리해 보자  (2) 2009/02/25
2009년 1월 12일 이전에 티스토리에 올린 동영상 마음데로 지워지지 않는다!! 아셨나요?  (14) 2009/02/25
블로거뉴스 위젯에 추천/인기/최신 탭을 달아보자!! (내용추가)  (2) 2009/02/25
자주 안보는 목록은 드롭다운박스로 바꾸자  (10) 2009/02/19
TAG del.icio.us, delicious.com, Link Rolls, 딜리셔스, 북마크, 블로그, 위젯, 즐겨찾기 관리, 티스토리
Trackback (0) : Comment (2)
Posted by 호아범

TRACKBACK | http://www.crazybar.net/trackback/832 관련글 쓰기

댓글을 달아 주세요

  1. BlogIcon ipodart 2009/02/25 21:36  댓글주소  수정/삭제  댓글쓰기

    북마크만 열심히 하고 이런 기능이 있는지 몰랐어요^^;
    잘 읽었습니다~

    • BlogIcon 호아범 2009/02/25 22:30  댓글주소  수정/삭제

      그게 참 애매하더라구요.
      북마크를 달기는 편한데 막상 찾기는 좀 불편한 감이 없잖아 있죠.
      또, 구글링이나 네이버를 찾는게 딜리셔스에서 찾는 것보다 더 빠르기도하고...

      그래서 전 별도의 매쉬업(?) 페이지를 만들어서 사용중입니다. 제가 사용하기 편하게 보여주도록이요.
      http://wow.crazybar.net

      방문댓글 감사드려용. ^^

2009/02/25 15:32

2009년 1월 12일 이전에 티스토리에 올린 동영상 마음데로 지워지지 않는다!! 아셨나요? IT 이야기/블로그 & HTML2009/02/25 15:32

얼마전 우연한 기회에 퍼가기 금지로 블로그에 등록한 동영상이 다른 블로그에 게시된걸 알게 되었습니다. 

그 블로그 개설자와 연락을 취하려 했으나 잘 안되더군요. 아마도 현재는 운영되고 있지 않는 듯 했습니다. 

그래서, 이것 저것 다 귀찮아 제가 올린 동영상을 삭제하기로 결정을 하였고, 원문 글에서 해당 동영상을 삭제를 한 후에 대상 블로그에 가서 확인을 해 봤는데, 아뿔사~ 여전히 재생이 가능했습니다. 결론은, 블로그에서 삭제를 해도 티스토리 블로그에 업로드된 동영상이 저장되는 다음TV팟에서는 삭제가 안되었던 것이죠. 혹시나 하고, 글을 비공개로 바꿔봤으나, 뭐 역시나 였습니다.


결국, 다음 측에 문의를 하기로 했죠. 총세번의 삭제요청을 한 결과 처리가 되었습니다. 일단, 좀 많이 무성의한 응대에 적지 않게 실망해 버렸습니다. -_-;;

처음에는  고객센터를 통해서 문의 했더니, 알아보고 연락주겠다고 했으나 연락이 없었구요. -_-;; 

첫번째 문의 답변 보기


두번째는 권리침해 신고를 하라고 하더라구요. 근데 이건 권리 침해가 아니라, 내가 올린 동영상 삭제해 달라는 거였는데... 

두번째 문의 답변 보기

뭔가, 내용은 읽지 않고 기계적으로 응대했다는 생각이 듭니다. 


여튼, 결국 수소문 끝에 동영상에 관한 문의는 tv팟 전용 고객센터로 문의하라는 내용을 보게 되었고, 그쪽으로 요청한 결과 해당 동영상이 영구 삭제 되었답니다. 

세번째 문의 답변 보기



그러면서 알게 된 사실입니다만, 이런 공지가 있었더군요. 다음은 일부 발췌한 글입니다.

적용 날짜 : 2009년 1월 12일(월)부터 업로드 된 동영상
변경 내용 : 본인이 올린 동영상을 마이팟, 카페, 블로그 등에서 직접 삭제할 경우, 
                 외부로 퍼간 동영상도 모두 삭제되어 재생되지 않습니다.
                 단, 1월 12일 이전에 업로드 된 동영상은 기존대로 재생되오니 참고하세요.

뭐 결론적으로, 원래는 블로그에서 동영상을 삭제해도 tv팟 서버에는 계속 남아 있었지만, 2009년 1월 12일 이후에 업로드된 경우에는 블로그에서 지우면 서버에서도 동시에 지워진다는 내용이네요. 아울러, 그 이전에 업로드한 동영상을 삭제하려고 하면 귀찮더라도 고객센터로 일일히 연락을 해야하겠네요. 에궁.


흠, 그러면 도대체 비공개라든가 퍼가기 금지같은건 왜 만들었었을까요? 더더욱 이해가 안되는 건, 저의 경우는 퍼가기 금지를 해 놨음데도 불구하고 버젓히 다른 블로그에서 재생을 할 수 있었다는 점이요. 제 생각에는 소스보기로 긁어간게 아닐까 하는 생각이 들긴 합니다만, 어쨌든 퍼가기 금지를 했다면, 동영상 재생을 요청하는 URL과 원문의 URL을 비교만 해 보아도 쉽게 막을 수 있을듯 한데, 그걸 못하나 (혹은 안하나) 봅니다. 

아마 애초에, 티스토리에 업로드한 동영상을 자동으로 tv팟과 연결시킨 정책 자체가 문제가 있지 않았나? 하는 생각이 듭니다. 다음은 파일첨부에 관한 티스토리 가이드 중 일부를 발췌한 내용입니다. 

 2. 동영상

티스토리의 동영상은 Daum tv팟과의 연동을 통하여 제공하고 있습니다. 동영상 버튼을 통하여 직접 촬영한 동영상 파일 업로드 (최대 100MB)를 비롯하여, 동영상 걸기라는 메뉴를 통하여 tv팟 동영상을 검색한 뒤 삽입이 가능합니다. (Powered by Daum tv팟)


어쨌든 이번일을 계기로 다음 세가지를 깨달았습니다.

  • 살면서 뭘 하던 간에 약관을 잘 읽자.
  • 서비스 약관이 변경되었다는 메일이 오면 잙 읽어보자
  • 티스토리에 왠만하면 동영상은 올리지 말자.

저작자 표시 비영리 변경 금지

'IT 이야기 > 블로그 & HTML' 카테고리의 다른 글

내 블로그가 추천블로그 + 다음 블로그 지표보기  (12) 2009/03/12
딜리셔스(delicious.com)의 Link Rolls 이용해서 즐겨찾기를 관리해 보자  (2) 2009/02/25
2009년 1월 12일 이전에 티스토리에 올린 동영상 마음데로 지워지지 않는다!! 아셨나요?  (14) 2009/02/25
블로거뉴스 위젯에 추천/인기/최신 탭을 달아보자!! (내용추가)  (2) 2009/02/25
자주 안보는 목록은 드롭다운박스로 바꾸자  (10) 2009/02/19
HTML 태그의 `title` 속성 활용하여 공간을 효율적으로 사용하기  (9) 2009/02/19
TAG Daum, TV팟, 다음, 동영상, 동영상 삭제, 불펌, 블로그, 티스토리, 퍼가기 금지
Trackback (1) : Comment (14)
Posted by 호아범

TRACKBACK | http://www.crazybar.net/trackback/831 관련글 쓰기

  1. SUBJECT 원본을 삭제해도 살아있는 좀비파일에 대해...(다음고객센터 vs 네이버고객센터)

    2009/07/16 00:19 TRACKED FROM Raon's Blog  삭제

    Brave 아티스트 - Jennifer Lopez 관련앨범 - Brave Brave-Jennifer Lopez 저번 주 본격적인 블로그 정리를 시작했는데... 아직도 끝이 보이지 않습니다.. -.-^ 개인적인 정리는 끝났는데.

댓글을 달아 주세요

  1. BlogIcon cdmanii 2009/02/25 16:20  댓글주소  수정/삭제  댓글쓰기

    비공개글을 퍼갔다는걸로 첨에 잘못봐서 놀랬네요 퍼가기만 금지된거면 제생각에는 어떤사람이 이걸 가져가서 뛰워놓고싶어서 UCC 받는 프로그램등을 통해서 받아서 다시 올렸을 가능성이 있어보이네요 .
    아니면 다른방법으로라도 .. 근데 퍼가기를 금지해놨다면 뭔가 방책이 있어야할걸로 보이네요.. 저도 몇개 애써서 만들어서 퍼가기 금지해놨더니 그걸 아예 받아다가 다시 다른곳에 올려두었더라구요 ;
    다행히 동영상 만들때 처음 맨트에 육성으로 제 아이디를 말하긴 했지만 ..
    삭제도 쉽게 안되는군요 이전건 ... 에구 그전에 올린게 몇개 있긴한데.. 근데 다행히 처음부터 비공개로 올려버렸습니다 ㅋ
    비공개로 처음부터 올린거랑
    공개로 올렸다가 비공개로 처리하는거랑은 차이가 좀 있다고 하네요
    비공개로 완전히 올린건 자신밖에 못보구요
    공개로 올린뒤 비공개하면 비공개 하였다고 하지만 이미 발행되거나 정보가 다른곳에 흘러간건 재생될수있다고하네요

    • BlogIcon 호아범 2009/02/25 18:48  댓글주소  수정/삭제

      다운받아서 올린거라면 그래도 노력이 가상(?)하네요.. ^^
      이 경우는 명백하게 소스보기 후 붙여넣은 듯 합니다.
      플레이어상의 입력인 비디오ID가 같았거든요.

      아무튼, 퍼가기 금지된 영상이 다른곳에서 돌아가지 못하도록 하는 근본적인 방법이 필요할 듯 합니다.

      당분간 동영상은 안올리려구요... -_-;;

  2. BlogIcon PLUSTWO 2009/02/25 18:00  댓글주소  수정/삭제  댓글쓰기

    아~ 그렇군요..
    너무 개인적인 동영상 업로드는 자제를 해야 되겠군요..
    동영상 업로드할때 블로그에만 이라든지 TV팟 동시에 라든지 선택이 있으면 더 좋겠다는 생각이 드네요..

    • BlogIcon 호아범 2009/02/25 18:50  댓글주소  수정/삭제

      전적으로 동감입니다.
      왜 블로그에 올린 영상을 tv팟에 노출시키는 지 이해가 안갑니다.
      단지, 플레이어의 문제는 아닌것 같고, 데이터를 수집하기 위한 다음의 전략이 아니었을까 하는 생각이 듭니다.
      아무튼, 꽤나 불쾌한 경험이었습니다. ^^

  3. BlogIcon Krang 2009/02/25 22:20  댓글주소  수정/삭제  댓글쓰기

    저도 동영상 올릴 일이 있으면 찜찜해서 외국 계정에 올려버립니다. 비메오나 유투브 같은 곳 말이에요.
    근데 퍼간 사람은 아가 동영상을 왜 퍼갔을 까요?

    • BlogIcon 호아범 2009/02/25 22:28  댓글주소  수정/삭제

      그러게 말입니다. 도무지 이해를 할 수가 없네용.
      재밌는건 그 블로그가 저글 한개 포스팅된 후엔 개점 휴업이더라구요. 후후...
      근데, 유튜브 같은 곳은 "퍼가기"에 대해 더 관대한거 아닌가요?

    • BlogIcon Krang 2009/02/25 22:39  댓글주소  수정/삭제

      사용한지는 오래되어서 가물가물하지만 아마 퍼감방지로 올릴 수도 있을 거에요. 기술적으로 퍼가는 것은 완벽히 막을 순 없겠지만 국내 동영상 사이트보다는 삭제한 동영상이 남아 있는 것도 그렇고 덜 찜찜하게 생각이 들더군요.

    • BlogIcon 호아범 2009/02/25 23:00  댓글주소  수정/삭제

      그렇군요... 덕분에 유용한 정보하나 알았네요.
      담번에 동영상 올릴 일 있을때 참고해야겠습니다. ^^

  4. BlogIcon 돌이아빠 2009/02/27 09:12  댓글주소  수정/삭제  댓글쓰기

    Krang님 말씀처럼 퍼가기 금지 옵션으로 올릴 수 있습니다.
    올릴때 이 옵션을 꼭 체크하고!

    그나저나 아무리 그래도 그렇지 문제인데요? 흐음......

    • BlogIcon 호아범 2009/02/27 09:27  댓글주소  수정/삭제

      그렇군요... 감사합니다. ^^
      아무리 저작권 저작권 노래를 불러도, 관리자들은 별 생각이 없나봐요...
      결국 사용자들이 열심히 조심하는 수밖에요.. 에궁..
      정말이지 허울뿐인 IT강국입니다.

  5. 2009/03/04 03:33  댓글주소  수정/삭제  댓글쓰기

    비밀댓글 입니다

    • BlogIcon 호아범 2009/03/04 11:44  댓글주소  수정/삭제

      우선 장문의 댓글 감사합니다.
      사견이라고 하셨으니까 저도 편하게 말씀 드리지요.

      일단 근본적으로 불가능하다는 점 인정합니다. 예를 들어, 다운받고 어쩌고 하는 건 쉽지 않다고 해도 플레이되는 동영상을 캠타이아 같은 툴로 PC에서 녹화를 할 수도 있구요. 혹은 최악의 경우 모니터에 플레이 되는 동영상을 캠코더로 녹화해서 다시 올릴수도 있는 거죠
      이런 경우까지 어떻게 해주세요.. 라고 칭얼대는 거 당연히 아닙니다. 악의적으로 퍼가는 경우까지 어떻게 막겠습니까

      다만, 제가 말하고자 했던 것은, '퍼가기 금지'를 했으면 업로드한 사이트에서만 플레이가 가능하게 했으면 좋겠다는 거죠. 이정도야 구현이 어렵지 않을 겁니다.

      님의 생각과는 다를 수도 있지만, 동영상서비스에 동영상을 올리고, 그걸 자신의 블로그에 보내는 경우는 블로그 api를 이용해서 미리 사이트를 등록해 두도록 하면 문제가 되지 않겠지요. 예를들어 사진및동영상 사이트인 '플리커'에서는 그런 서비스를 하고 있지요. 또 서비스의 성격이 좀 다르긴 하지만 '미투데이'나 'delicious' 같은 곳에서도 정보를 보내고 싶은 블로그를 등록해 둔 후에 그곳에 대해서만 정보를 보낼수 있도록 하고 있습니다. 또, 역시 성격은 좀 다릅니다만 '알라딘'같은 곳에서 곧바로 블로그에 책 정보를 보낼수 도 있습니다 이 역시 블로그api를 이용한 서비스 입니다.

      제가 맘에 들지 않았던 부분은, 티스토리에 올린 동영상이 공개여부와 관계없이 TV팟에 올려지는지, 운영상의 문제로 어쩔수 없었다면, TV팟에 비공개되길 원하는 사용자에 대해 보다 더 적극적인 보호방법을 제시할 수는 없었는지 입니다. 또 TV팟 대해서는 앞서 언급한 것 처럼 여기저기 퍼가게 되질 않게 바라는 사용자에 대한 배려가 부족하다는 느낌이 들었구요. 마지막으로 다음의 고객센터 응대가 맘에 들지 않았습니다.

      이건 티스토리 잘못인지 TV팟 잘못인지 모르겠으나, 사용자가 삭제한 동영상이 서버에 남아있었다는 사실이 아무리 이해하려해도 납득이 안가는 군요.

      개인적으로 저역시 연구개발 및 프로그래밍 일을 하고 있습니다. 웹관련 일도 여럿 해 보았구요. 님의 고충을 이해 못하는게 아닙니다만, 어쨋든 보다 적극적인 방법으로 저작권을 지켜주지 못했다는 생각이 들어 많이 답답했었지요. 그리고 그러한 답답함을 글로 남겨본거였구요.

      끝으로, 다음, TV팟, 티스토리 모두 서비스를 개발하시는 개발자와 서비스를 구상하는 디자이너, 회사의 경영진들, 그리고 사용자가 모두 다 만족하는 서비스가 되길 바랍니다.

  6. BlogIcon TISTORY 2009/03/04 17:15  댓글주소  수정/삭제  댓글쓰기

    안녕하세요. TISTORY입니다.

    티스토리 이용에 불편을 드려 죄송합니다. 글과 댓글을 보고 죄송하다는 말씀을 먼저 드리고 이와 관련하여
    수정된 부분이 있어서 알려드리고자 댓글을 남겨드립니다.

    1. 티스토리와 DaumTv팟에 접수되는 고객문의를 별도로 분리하여 처리하기때문에 혼선이 있었던것같습니다. 티스토리측으로 메일을 주셨을때는, 단순한 저작권 문제로 인한 삭제요청으로 받아들였던것같습니다. 앞으로 동영상 관련 문제가 티스토리로 들어오면 Daum Tv팟으로 이관하여 처리하도록 조치하였습니다.

    2.티스토리에서 동영상을 업로드할때 업로드창에서 "Daum tv팟에 공개"를 체크 해제하시면 tv팟에 공개되지 않고 있으니 tv팟에 공개를 원하지 않는 동영상은 체크를 해제하고 업로드해주시면 됩니다.체크를 해제하시고 업로드하시면 기본적으로 동영상 퍼가기가 "허용안함"으로 설정되어 퍼가기가 되지 않습니다.

    3.Daum tv팟에 공개되었을 경우에는 퍼가기 설정을 할 수 있습니다. 본문내에 삽입된 동영상을 클릭하시면 우측에서 설정하실수 있습니다.


    혹시 이후에도 Daum tv팟에 공개 를 체크 해제하시고 업로드 하였으나 동영상이 tv팟에 공개될경우에는 Daumtv팟이나 티스토리로 문의해주시기 바랍니다.

    • BlogIcon 호아범 2009/03/04 19:41  댓글주소  수정/삭제

      우선 방문 감사드립니다.
      어찌 되었던 간에 뭔가 개선된다고 하니 기대해 볼거구요.
      정책이야 또 바뀔 수 있겠으나, 기술적으로 가능한 부분들에 대해선 점진적으로 더 좋아지길 바랍니다.
      새로운 정책을 세울때에도, 서비스업체로서 서비스를 이용하는 주체인 사용자들의 입장을 좀더 생각해 주었으면 하구요.
      아울러, 고객센터 직원분들도 보다 전문성을 띄었으면 좋겠네요.

2009/02/25 12:17

블로거뉴스 위젯에 추천/인기/최신 탭을 달아보자!! (내용추가) IT 이야기/블로그 & HTML2009/02/25 12:17

스크립트 입력이 귀찮으신 분들을 위해 소스를 직접 올려드립니다. (본문 하단)
필요하신분은 다운로드해서 사용하세요. 단 적용하는 단계에서 조심해서 다루시길 바랍니다. ^^

그리고, 원문에 비해 좀더 알아보기 쉽도록 코드를 정리하였고, 스타일을 약간 변경하였습니다. 


다음 블로거뉴스 위젯을 블로그에 달려고 하면 한가지 고민이 생깁니다. 추천뉴스, 인기뉴스, 최신뉴스라는 세가지 정보화면 중에서 어떤것을 메인으로 할까에 대한 고민이지요. 

물론, 조그만 역삼각형을 클릭하면 드롭다운 목록이 열리면서 다른 목록으로 전환이 되긴 합니다만, 사람 심리가 왠지 두번 클릭을 하면 영~ 귀찮은 생각이 들기 마련입니다.


추천/인기/최신 탭

그래서 생각한것이, 바로 가기 버튼을 이용해서 탭을 만들어보자고 생각을 했습니다. 

이게 말로 설명할려니까 좀 힘든거 같은데, 아래 그림을 보는것이 이해가 빠를 듯 합니다. 사실, 혼자 생각한건 아니구요, 믹시의 mixUP 캐스트위젯을 좀 참조했습니다. ^^

위쪽에 세가지 뉴스를 나타내는 링크를 달고, 각각을 클릭하면 해당 목록을 아래에 보여주면서 메뉴의 색상을 진하게 바꾸도록 하였습니다.


만들어 보자

My글 퍼가기

이를 위해서는 우선, 블로거 뉴스화면 - My글 퍼가기로 가서 원하는 디자인을 선택한 후에, 소스퍼가기 부분의 소스를 메모장 같은 곳에 복사하여 둡니다. 

제 경우는 이렇게 되는 군요 (클릭하시면 크게 보입니다.)


이중에서 src='어쩌구저쩌구' 하는 부분을 자세히 보면 아래와 같습니다.

http://api...../my_widget?skin=2&page_size=7&init_type=recommend&is_footer=1&daumid=crazybar03 


코드 작성하기

다시 메모장을 새로 열어서 아래 코드를 입력합니다. 이때, 1번 부분은 위 주소의 빨간색 부분을 입력하고, 2번 부분은 위 주소의 파란색 부분을 입력합니다. (클릭하시면 크게 보입니다.)

블로거뉴스위젯이 IFRAME 태그를 이용해서 내용을 채우도록 되어 있는데, 이를 링크와 연동하여 원하는 내용으로 바꾸도록 한 것입니다. 이때, 선택된 링크의 스타일을 약간 다르게 적용시켜서 눈에 띄도록 하였습니다. 


웹페이지에 적용하기

이제 이 코드를 블로그 상의 붙이고 싶은 부분에 가져다 붙이면 모든 준비가 끝이 나는 군요. 제 경우는 우측 사이드바에 붙여두었습니다.

모든 절차가 완료 되었으면, 각각의 링크를 클릭하여 원하는 기능이 잘 수행되는지 확인해 보면 되겠죠 ^^.. 결과가 궁금하시면 본블로그 우측 사이드바를 보세용

참고로, 크롬과 익스플로로 7.0에서는 정상동작함을 확인하였습니다. 


나머지

근데, 이런 위젯을 달아놓기에는 제 글들이 너무 인기가 없네용.. 에궁.. -_-;;

혹시 필요하신분 계실까봐 소스코드도 같이 올립니다. 적용하시는 단계에서 기존의 스킨의 틀이 깨지지 않도록 섬세하게 작업하시기 바랍니다. 

bloggernews.zip

저작자 표시 비영리 변경 금지

'IT 이야기 > 블로그 & HTML' 카테고리의 다른 글

딜리셔스(delicious.com)의 Link Rolls 이용해서 즐겨찾기를 관리해 보자  (2) 2009/02/25
2009년 1월 12일 이전에 티스토리에 올린 동영상 마음데로 지워지지 않는다!! 아셨나요?  (14) 2009/02/25
블로거뉴스 위젯에 추천/인기/최신 탭을 달아보자!! (내용추가)  (2) 2009/02/25
자주 안보는 목록은 드롭다운박스로 바꾸자  (10) 2009/02/19
HTML 태그의 `title` 속성 활용하여 공간을 효율적으로 사용하기  (9) 2009/02/19
위젯 적용시에 스타일 바꾸기 - HTML 소스퍼가기  (4) 2009/02/18
TAG HTML, iframe, mixup 캐스트 위젯, 다음, 링크, 믹시, 블로거뉴스, 블로그, 사이드바, 스킨, 위젯, 탭, 티스토리
Trackback (0) : Comment (2)
Posted by 호아범

TRACKBACK | http://www.crazybar.net/trackback/830 관련글 쓰기

댓글을 달아 주세요

  1. BlogIcon 밥탱구리 2009/02/25 09:23  댓글주소  수정/삭제  댓글쓰기

    좋은정보 감사합니다.ㅎㅎㅎ
    저도 아직 달 염두가 안나는군요ㅠㅠ

    • BlogIcon 호아범 2009/02/25 12:19  댓글주소  수정/삭제

      댓글 감사드립니다. ^^
      근데 역시 문제는 기능이 아니고 디자인인가봐요.
      스킨과 어울리도록 만드는게 더 오래걸리네용.. 에궁..

2009/02/19 19:15

자주 안보는 목록은 드롭다운박스로 바꾸자 IT 이야기/블로그 & HTML2009/02/19 19:15

스킨을 너저분하게 만드는 이유중의 하나가 바로 자주 안가는데 가끔 필요한 목록들입니다. 대표적으로 글보관함과 즐겨찾기 목록을 들수 있을것 같은데요... 대부분의 스킨이 기본적으로 목록형으로 보여지도록 구성되어있지요. 



간혹 블로그을 돌아다니다 보면 드롭다운박스스타일로 바꿔둔 곳을 볼 수가 있는데요. 그 팁을 올려봅니다.



목록형태로 보여지는 스킨은 보통 UL 태그와 LI 태그를 이용하여 작성이 되어 있고, HTML 편집을 통해 들여다 보면 아래와 유사한 형태로 작성되어 있습니다.



이를 드롭다운박스로 바꾸려면 SELECT 태그와 OPTION 태그의 조함으로 변경해 주시면 됩니다.

  1. 아무것도 선택되지 않았음을 나타내는 더미옵션
  2. SELECT 태그: 선택이 이루어 졌을때 해당 페이지로 이동하도록 하는 스크립트를 값으로 가짐
  3. OPTION 태그: 4에서 보여지는 값과 연결되는 URL을 값으로 가짐
  4. 화면상에 보여지는 값

사실 뭐 팁이라 부르기도 좀 거시기 하긴 합니다만 그냥 제가 까먹지 않으려는 목적으로 기록해 둡니다. ^^

테스트를 하고 싶으시면 우측에 보니는 글보관함이랑 즐겨찾기를 눌러보세요...





저작자 표시 비영리 변경 금지

'IT 이야기 > 블로그 & HTML' 카테고리의 다른 글

2009년 1월 12일 이전에 티스토리에 올린 동영상 마음데로 지워지지 않는다!! 아셨나요?  (14) 2009/02/25
블로거뉴스 위젯에 추천/인기/최신 탭을 달아보자!! (내용추가)  (2) 2009/02/25
자주 안보는 목록은 드롭다운박스로 바꾸자  (10) 2009/02/19
HTML 태그의 `title` 속성 활용하여 공간을 효율적으로 사용하기  (9) 2009/02/19
위젯 적용시에 스타일 바꾸기 - HTML 소스퍼가기  (4) 2009/02/18
스킨 변경 및 적용 완료: Life Is Mono (Light)  (13) 2009/02/17
TAG li, option, select, ul, 드롭다운박스, 목록, 블로그, 스킨, 티스토리, 팁
Trackback (0) : Comment (10)
Posted by 호아범

TRACKBACK | http://www.crazybar.net/trackback/828 관련글 쓰기

댓글을 달아 주세요

  1. BlogIcon 돌이아빠 2009/02/19 20:47  댓글주소  수정/삭제  댓글쓰기

    앗! 이거 틈 나는 대로 정리해서 포스팅하려고 했는데.!
    그냥 링크만 걸어야겠어요^^~ 후후훗

    • BlogIcon 호아범 2009/02/19 22:01  댓글주소  수정/삭제

      하하.. 그러셨군요.
      이게 은근히 모르는 분이 볼땐 되게 궁금했나 보더라구요.
      주변에 물어보는 분이 있어서 아예 포스팅으로 남겨버렸습니다. ^^

  2. BlogIcon OLokLiR 2009/02/19 22:53  댓글주소  수정/삭제  댓글쓰기

    와우! 화살표까지 동원한 상세한 설명. 너무 멋있습니다.

  3. BlogIcon 서민당총재 2009/02/19 22:57  댓글주소  수정/삭제  댓글쓰기

    헉! 저는 자주 안쓰는것은 그냥 지워버렸는데....
    상세하게 설명해 주셔서 감사합니다. >ㅁ<

    • BlogIcon 호아범 2009/02/20 12:43  댓글주소  수정/삭제

      사실, 이렇게 달아 놓긴 했지만, 일단 제가 쓰는 일은 거의 없더라구요.
      여차하면 다시 지워버릴까도 생각중입니다. ^^

  4. BlogIcon 피터날아라 2009/02/22 15:50  댓글주소  수정/삭제  댓글쓰기

    와우 호아범님 팁감사합니다.
    다른 블로그에서는 너무 간단히 설명해서 이해하기 어려웠는데
    쏙쏙들어와요 ^o^

  5. BlogIcon iPod Art 2009/02/23 15:03  댓글주소  수정/삭제  댓글쓰기

    제가 원하던 정보가 많아요^^

2009/02/19 16:44

HTML 태그의 `title` 속성 활용하여 공간을 효율적으로 사용하기 IT 이야기/블로그 & HTML2009/02/19 16:44

블로그 스킨을 만든다거나 기타 HTML을 이용해서 웹을 디자인하다 보면 보여주고 싶은 정보는 많은데 공간이 좁아서 고민하게 되는 경우가 많이 있습니다. 

특히, 블로그 스킨을 만들다 보면, 개인적으로 사이드바가 있는 2단이나 3단 스타일을 좋아하는데, 동시에 사진을 가능한한 큰 크기로 올리고 싶기 때문에 본문의 너비를 키우면 사이드바의 폭이 좁아져서 내용을 배치하기가 쉽지 않습니다.


이럴때 활용하면 유용한 기능중의 하나가 바로 대부분의 HTML 태그에 사용할 수 있는 title 속성입니다.

title을 이용하면 관련 내용이 마우스포인터를 해당태그위에 올려두면 내용이 보여지는 툴팁(tooltip)으로 적용이 됩니다.


이번에 스킨을 변경하면서 이를 이용해서 사이드바를 정리해 보았습니다.


최근트랙백과 최근댓글을 꾸미는 과정에서 작성자 정보를 보여주려고 하다보니 한줄에 표현하려면 제목을 줄여야하고 제목을 그대로 보여주려면 두줄로 보여줘야했습니다. 그래서 작성자 정보를 title 속성에 집어 넣어버렸습니다.


다음은 본 블로그에 적용된 스킨 중에서 위 그림에 나온 최근트랙백 부분입니다.

기존에는 span 태그를 이용해서 작성자 정보를 보여주고 있었지만, 이를 지우고(혹은, 주석처리) 이를 감싸로 있는 li 태그에 title속성을 통해 표현하였습니다.


최근댓글부분에도 이와 유사하게 처리가 되어있습니다. 

그럼 테스트를 위해 오른쪽에 있는 최근댓글이나 최근트랙백 위에 마우스를 직접 올려놓아 보세요.. ^^



저작자 표시 비영리 변경 금지

'IT 이야기 > 블로그 & HTML' 카테고리의 다른 글

블로거뉴스 위젯에 추천/인기/최신 탭을 달아보자!! (내용추가)  (2) 2009/02/25
자주 안보는 목록은 드롭다운박스로 바꾸자  (10) 2009/02/19
HTML 태그의 `title` 속성 활용하여 공간을 효율적으로 사용하기  (9) 2009/02/19
위젯 적용시에 스타일 바꾸기 - HTML 소스퍼가기  (4) 2009/02/18
스킨 변경 및 적용 완료: Life Is Mono (Light)  (13) 2009/02/17
메타사이트 추천, RSS 구독 버튼 by Krang  (8) 2009/02/05
TAG HTML, Title, title 속성, 블로그, 스킨, 스킨편집, 웹디자인
Trackback (0) : Comment (9)
Posted by 호아범

TRACKBACK | http://www.crazybar.net/trackback/827 관련글 쓰기

댓글을 달아 주세요

  1. BlogIcon JUNiFAFA 2009/02/19 16:50  댓글주소  수정/삭제  댓글쓰기

    어쩜 제 고민을 콕 찝어서 설명해 주시네요..ㅎㅎ
    게다가 스샷까지 제 블로그 홍보를.ㅋㅋ
    바로 적용해 봐야 겠어요~

  2. BlogIcon 지우개닷컴 2009/02/19 18:34  댓글주소  수정/삭제  댓글쓰기

    말풍선 이네요^^

    • BlogIcon 호아범 2009/02/19 18:37  댓글주소  수정/삭제

      네.. 그렇죠 말풍선... ^^
      어차피 크게 중요하지 않은 정보는 감춰놨다가 필요할때만 보는것도 방법일것 같습니다. ~

  3. BlogIcon 로이스 2009/02/19 18:49  댓글주소  수정/삭제  댓글쓰기

    와 좋은 방법이네요.
    html거의 까막눈이 되어가고 있는데, 저도 시도해 보려면
    좀 걸리겠어요^^

    • BlogIcon 호아범 2009/02/19 19:16  댓글주소  수정/삭제

      원래 아셨던 분이라면 금새 하시겠지요.. ^^
      간단하지만 깔끔한 팁인것 같아서 올려봤는데, 많은 분들이 호응해 주시니 저도 기분이 좋네요.. ^^

  4. BlogIcon 돌이아빠 2009/02/19 20:46  댓글주소  수정/삭제  댓글쓰기

    오호 괜찮은 팁인데요!
    댓글과 트랙백에 적용하면 딱이겠어요!!!
    저도 시간 나는 대로 적용해야겠씁니다!~~~

    • BlogIcon 호아범 2009/02/19 22:00  댓글주소  수정/삭제

      저도 사이드바 폭이 좁아 늘 고민만 했었는데, 이렇게 해 두니까 간편하고 깔끔하고 맘에 딱 드네요.
      돌이아빠님도 이쁘게 꾸며보세용.. ^^

2009/02/18 01:19

위젯 적용시에 스타일 바꾸기 - HTML 소스퍼가기 IT 이야기/블로그 & HTML2009/02/18 01:19

다음 위젯을 적용하다보면 블로그 스킨과 어울리질 않아서 좀 망설여지는 경우가 있습니다. 요번에 스킨을 바꾸면서 저 역시 느꼈던 부분인데요.

그럴때 사용하면 편리한 기능이 바로 HTML 소스퍼가기 입니다. 간단히 말해서, 드래그앤드랍 방식이 아닌 HTML 소스를 직접 받아와서 원하는 위치와 스타일을 적용하는 기능이지요.

사진출처: 위젯뱅크 화면캡춰


이를 티스토리의 사이드바에서 이용할 때는 HTML 배너출력 이라는 항목을 이용하면 됩니다. 

사용중인 사이드바에 HTML 배너출력 항목을 추가하고, 소스부분에 위에서 가져온 코드를 입력하면 됩니다. 이때, 코드 앞뒤에 다른 태그를 추가로 삽입하여 원하는 디자인을 구축할 수 있습니다. 

참고로, 사이드바 설정은 관리자->스킨->사이드바 설정 에서 하실수 있습니다. 


다음은 적용한 결과 입니다. 두개의 라운드 시계가 삽입되어 있는데요, 위쪽이 HTML 소스와 HTML 배너를 이용한 것이구요, 아래쪽은 단순 퍼가기 후에 사이드바에서 드래그앤드랍으로 붙인 것입니다. 

위쪽 시계에는 다른 사이드바 항목들과 일체감을 주기위해 스킨에서 제공하는 배경 및 테두리를 붙였습니다. 첨에 아래 시계처럼 단순 붙이기를 한 후에는 뭔가 어울리지 않는 듯 보여서 좀 이상했는데, 위처럼 하고 나서 보니 다른 항목들과 일체감을 가지게 되어서 한결 자연스러워진 느낌이 드네요..


참고로, HTML 배너출력을 붙이면 기본적으로 아래와 같은 HTML 형태로 사이드바 항목이 만들어 집니다. 

<div class='module module_plugin'>
    <!-- 사용자가 입력한 코드 -->
</div>


따라서, 디자인을 정확하게 맞춰주기 위해서는 module과 module_plugin이라는 클래스에 대한 스타일값을 스타일시트(관리자->스킨->HTML/CSS편집->style.css)에 추가해 주어야 합니다. 


그외에 HTML 소스퍼가기를 이용하면 사이드바가 아닌 곳에도 위젯을 붙일 수 가 있습니다. 이때는 스킨파일(관리자->스킨->HTML/CSS편집->skin.html)의 원하는 위치에 복사해간 코드를 추가해 주면 됩니다.


저작자 표시 비영리 변경 금지

'IT 이야기 > 블로그 & HTML' 카테고리의 다른 글

자주 안보는 목록은 드롭다운박스로 바꾸자  (10) 2009/02/19
HTML 태그의 `title` 속성 활용하여 공간을 효율적으로 사용하기  (9) 2009/02/19
위젯 적용시에 스타일 바꾸기 - HTML 소스퍼가기  (4) 2009/02/18
스킨 변경 및 적용 완료: Life Is Mono (Light)  (13) 2009/02/17
메타사이트 추천, RSS 구독 버튼 by Krang  (8) 2009/02/05
이용중인 메타 블로그들  (0) 2009/02/04
TAG HTML, HTML 배너출력, HTML 소스퍼가기, 블로그, 스킨, 스킨편집, 위젯, 티스토리
Trackback (0) : Comment (4)
Posted by 호아범

TRACKBACK | http://www.crazybar.net/trackback/826 관련글 쓰기

댓글을 달아 주세요

  1. BlogIcon OLokLiR 2009/02/18 03:11  댓글주소  수정/삭제  댓글쓰기

    사이드바가 개별로 분리디자인된 스킨은 디자인을 통일시켜주려면 저런걸 해야되서 불편하지요 ;ㅁ;

    • BlogIcon 호아범 2009/02/18 11:29  댓글주소  수정/삭제

      그르게요... 이뻐서 좋긴 했는데, 덕분에 삽질좀 했네요..
      자유롭게 가져다 붙이기에는 디자인이 단순한게 편하긴 하죠.. ^^

  2. BlogIcon OLokLiR 2009/02/18 23:35  댓글주소  수정/삭제  댓글쓰기

    그런데 파이어폭스에서 댓글이 안보이네요 ;;; 스킨 뭐가 잘못된 걸까요...
    인터넷 익스플로러는 잘 보이는 것 같은데...

    • BlogIcon 호아범 2009/02/19 00:49  댓글주소  수정/삭제

      헉... 감사합니다.
      덕분에 심각한 뻑 하나 잡았네요...
      아마 스타일시트를 해석하는 방식이 FF와 IE가 서로 달랐나 봅니다. 에궁..
      글꼴 설정을 바꾸면서 뭔가가 충돌이 났던거 같네요.
      암튼 지금은 잘 됩니다. ^^

2009/02/17 23:35

스킨 변경 및 적용 완료: Life Is Mono (Light) IT 이야기/블로그 & HTML2009/02/17 23:35


요사이 마음을 다잡아야 할 일들이 여럿 있어서, 기분전환 차원에서 스킨을 뒤집었습니다. 이 일도 여러번 하다 보니까 다해서 2시간 정도밖에 안걸렸네요.. 


선택한 스킨은 티스토리에서 제공하고 있는 Life Is Mono (Light) 입니다. 지금의 기분과 아주 흡사하게 흐릿해 보이는 것이 맘에 드네요. ^^


적용하는 단계에서 수정한 부분들은 다음과 같습니다. (이 부분은 정리차원에서 남겨둡니다.)

디자인 수정


기능 수정

저작자 표시 비영리 변경 금지

'IT 이야기 > 블로그 & HTML' 카테고리의 다른 글

HTML 태그의 `title` 속성 활용하여 공간을 효율적으로 사용하기  (9) 2009/02/19
위젯 적용시에 스타일 바꾸기 - HTML 소스퍼가기  (4) 2009/02/18
스킨 변경 및 적용 완료: Life Is Mono (Light)  (13) 2009/02/17
메타사이트 추천, RSS 구독 버튼 by Krang  (8) 2009/02/05
이용중인 메타 블로그들  (0) 2009/02/04
한RSS, 피드버너(FeedBurner) 피드 즉시 수집하기  (9) 2009/02/04
TAG Life Is Mono, 블로그, 스킨, 스킨변경, 스킨수정, 티스토리
Trackback (2) : Comment (13)
Posted by 호아범

TRACKBACK | http://www.crazybar.net/trackback/825 관련글 쓰기

  1. SUBJECT [티스토리/스킨] HTML 태그의 `title` 속성 활용하여 공간을 효율적으로 사용하기

    2009/02/19 16:46 TRACKED FROM Crazy Life on Net  삭제

    블로그 스킨을 만든다거나 기타 HTML을 이용해서 웹을 디자인하다 보면 보여주고 싶은 정보는 많은데 공간이 좁아서 고민하게 되는 경우가 많이 있습니다. 특히, 블로그 스킨을 만들다 보면, 개인적으로 사이드바가 있는 2단이나 3단 스타일을 좋아하는데, 동시에 사진을 가능한한 큰 크기로 올리고 싶기 때문에 본문의 너비를 키우면 사이드바의 폭이 좁아져서 내용을 배치하기가 쉽지 않습니다. 이럴때 활용하면 유용한 기능중의 하나가 바로 대부분의 HTML 태그에..

  2. SUBJECT [티스토리/스킨] 자주 안보는 목록은 드롭다운박스로 바꾸자

    2009/02/19 19:15 TRACKED FROM Crazy Life on Net  삭제

    스킨을 너저분하게 만드는 이유중의 하나가 바로 자주 안가는데 가끔 필요한 목록들입니다. 대표적으로 글보관함과 즐겨찾기 목록을 들수 있을것 같은데요... 대부분의 스킨이 기본적으로 목록형으로 보여지도록 구성되어있지요. 간혹 블로그을 돌아다니다 보면 드롭다운박스스타일로 바꿔둔 곳을 볼 수가 있는데요. 그 팁을 올려봅니다. 목록형태로 보여지는 스킨은 보통 UL 태그와 LI 태그를 이용하여 작성이 되어 있고, HTML 편집을 통해 들여다 보면 아래와 유사한..

댓글을 달아 주세요

  1. BlogIcon zeduic 2009/02/17 23:51  댓글주소  수정/삭제  댓글쓰기

    우와 글씨체 적용하는거 너무 신기해요..ㅎ

  2. BlogIcon 재키 2009/02/18 02:57  댓글주소  수정/삭제  댓글쓰기

    나눔고딕 이쁘네요...^^

    초기화면 new버튼하고 메타버튼 엑박으로 표기되네요...

    저도 지금 이 스킨 사용중이라 많은 도움이 될듯 합니다...

  3. BlogIcon 마이크 2009/02/18 06:25  댓글주소  수정/삭제  댓글쓰기

    이쁘게 꾸미셨네요. 근데 댓글은 글자색 때문에 안 보이는 건가요?

    • BlogIcon 호아범 2009/02/18 11:27  댓글주소  수정/삭제

      헉.. 댓글이 안보이신다구요?
      죄송하지만 어느부분인지 확인좀 해 주실 수 있나요?
      제가 확인할 땐 다 정상이라.. 어딘지를 모르겠네용.. -_-;;

    • BlogIcon 호아범 2009/02/19 00:48  댓글주소  수정/삭제

      혹시 FF에서 보셨었나요?
      좀전에 FF에서 댓글이 안보이는 벅이 있어서 잡았거든요..

  4. BlogIcon Krang 2009/02/18 07:08  댓글주소  수정/삭제  댓글쓰기

    스킨 깔끔하고 멋지네요. ^^
    추천버튼들은 아마 변경하시면서 삭제되었나봅니다.

    • BlogIcon 호아범 2009/02/19 00:48  댓글주소  수정/삭제

      감사합니다. ^^
      스킨변경당시에는 잘 보였는데, 알고 봤더니 캐쉬에 남아있던 이미지가 그냥 보였었나봐요...
      수정했는데, 잘 보이죠?

  5. BlogIcon 호둥이 2009/03/12 16:05  댓글주소  수정/삭제  댓글쓰기

    블로그가 깔끔하네요.
    블로그 글꼴변경하러 이것저것 찾아보다가
    잘 읽고 갑니다.

2009/02/05 22:08

메타사이트 추천, RSS 구독 버튼 by Krang IT 이야기/블로그 & HTML2009/02/05 22:08

Krang님의 블로그를 구경할때마다 꼭 갖다 달아야지... 하고 생각만 하고 있었는데, 마침 2탄을 배포하셨길래, 낼름 가져다가 달았습니다. 

메타사이트 추천, RSS 구독 버튼 by Krang


기존에 배포하셨던 1탄 및 설치 방법은 요기에 상세히 적혀 있습니다. 

제공되고 있는 것은 올블로그, 블로그코리아, 믹시, 블로거뉴스 등의 메타사이트 추천 버튼과 한RSS, 구글리더 등의 RSS리더 추가 버튼이고, 각각 4가지 크기로 구성되어 있습니다. 

보다 자세한 사항은 Krang님 블로그를 참고하세요..

저작자 표시 비영리 변경 금지

'IT 이야기 > 블로그 & HTML' 카테고리의 다른 글

위젯 적용시에 스타일 바꾸기 - HTML 소스퍼가기  (4) 2009/02/18
스킨 변경 및 적용 완료: Life Is Mono (Light)  (13) 2009/02/17
메타사이트 추천, RSS 구독 버튼 by Krang  (8) 2009/02/05
이용중인 메타 블로그들  (0) 2009/02/04
한RSS, 피드버너(FeedBurner) 피드 즉시 수집하기  (9) 2009/02/04
RSS주소 다시 변경 합니다. (변덕이 죽 끓듯... -_-;;)  (0) 2009/02/04
TAG RSS리더, 구독 버튼, 메타사이트, 블로그, 아이콘, 이미지, 추천 버튼
Trackback (1) : Comment (8)
Posted by 호아범

TRACKBACK | http://www.crazybar.net/trackback/813 관련글 쓰기

  1. SUBJECT [배포] 아이폰 스타일 메타사이트 추천버튼 2탄! by Krang

    2009/02/05 23:39 TRACKED FROM Krang :: 닥스훈트,웹,그리고 일상  삭제

     아이폰 스타일 메타사이트/RSS 아이콘(버튼) 2번째 버전을 공개합니다. ▶ 종류? 메타사이트 4개(올블로그,블로그코리아,믹시,블로거뉴스)와 RSS 2개(구글리더기, 한RSS) ▶ 달라진점? 블로그 스킨, 여백에 따라 이용할 수 있도록 4가지 크기(올블,믹시는 종류도2가지)로 제작, 선택권을 넓혔고 여백을 줄여 버튼끼리 밀착하게끔 했습니다. 각자의 기호에 맞게 가감하여 사용하세요 :) ▶ 주의사항!~ ※ 기존에 배포한 Krang’s 아이폰 버튼 이..

댓글을 달아 주세요

  1. BlogIcon Krang 2009/02/05 23:40  댓글주소  수정/삭제  댓글쓰기

    좋게 봐주시니 감사합니다. ( _ _);;
    걱정했었는데 이용해주시는 분들이 있어서 기분이 좋네요. ^^

  2. BlogIcon 돌이아빠 2009/02/06 09:07  댓글주소  수정/삭제  댓글쓰기

    저도 붙일까 말까 고민중이라는 ㅋㅋ 이쁘긴 이뻐요. 무엇보다 블로거들의 needs를 딱 맞췄다고 할까요? 후훗
    호아범님 호야 요즘 밤잠은 어떤가요?

    • BlogIcon 호아범 2009/02/06 12:36  댓글주소  수정/삭제

      가져다 붙여놓으니 딱 맘에 듭니다.
      호야와는 이번주말 아빠와의 대담을 해야 할 것 같습니다.
      요 며칠새 투정+반항+고집+장난이 극에 달한 듯 해요.
      에궁...

  3. BlogIcon 피터날아라 2009/02/18 14:43  댓글주소  수정/삭제  댓글쓰기

    오호
    저도 이거 달고싶어서 한참을 웹서핑하던기억이....
    그러다 포기했죠
    좋은정보 감사합니다. 당장달아야지~

  4. BlogIcon 피터날아라 2009/02/18 17:23  댓글주소  수정/삭제  댓글쓰기

    달았습니다. 크랑님블로그가서보니 1탄이 더 이쁜것같아 1탄달았습니다.
    근데 아이콘 주위에 하늘색은 어쩔수없는건가봐요 ㅠ

2009/02/04 11:04

이용중인 메타 블로그들 IT 이야기/블로그 & HTML2009/02/04 11:04

본 블로그의 글이 발행되고 있는 메타블로그 목록입니다.

몇군데 되지도 않는데 어떤어떤 곳에 가입이 되어 발행이 되고 있는지 영 헤깔려서 아예 포스팅으로 남겨둡니다. 


미디어 다음 - 블로거 뉴스

  • 티스토리 플러그인 및 RSS 통한 수동 등록
  • 플러그인의 경우, 발행 상태의 글 중에서 원하는 글을 골라서 등록
  • RSS 방식의 경우, 공개 및 발행상태로 RSS에 포함 된 글 중 원하는 글을 수동으로 등록

믹시

  • 티스토리 플러그인 및 RSS 자동 수집
  • 공개 또는 발행상태로 RSS에 포함 된 글 중 원하는 글을 수동으로 등록
  • 이중 발행상태의 글에 한하여 플러그인을 통해 본문에 추천 버튼이 보임
  • 사이트 내에서 원치 않는 글의 등록을 취소 할 수 있음


올블로그

  • 티스토리 플러그인 및 RSS 자동 수집
  • 플러그인의 경우, 발행하는 방식(발행 / 공개 및 발행)을 선택할 수 있음
  • RSS 방식의 경우, 공개 또는 발행으로 RSS에 포함 된 글은 자동으로 등록됨
  • 사이트 내에서 원치 않는 글의 등록을 취소 할 수 있음


블로그코리아

  • 티스토리 플러그인 및 RSS 자동 수집
  • 공개 또는 발행상태로 RSS에 포함된 글은 자동으로 등록됨
  • 사이트 내에서 원치 않는 글의 등록을 취소 할 수 있음

레뷰

  • RSS를 통한 수동 등록
  • 공개 또는 발행상태로 RSS에 포함 된 글 중 원하는 글을 수동으로 등록
  • 블로그 등록을 취소하더라도 등록된 글이 삭제 되지는 않음


이올린

  • 티스토리 플러그인
  • 발행상태의 글이 자동으로 등록됨


티스토리 메인

  • 공개 또는 발행 상태로 저장 된 글은 자동으로 등록
  • 개별적인 등록 취소는 할 수 없음
    • 취소를 위해선 글의 상태를 비공개로 전환해야 함


저작자 표시 비영리 변경 금지

'IT 이야기 > 블로그 & HTML' 카테고리의 다른 글

스킨 변경 및 적용 완료: Life Is Mono (Light)  (13) 2009/02/17
메타사이트 추천, RSS 구독 버튼 by Krang  (8) 2009/02/05
이용중인 메타 블로그들  (0) 2009/02/04
한RSS, 피드버너(FeedBurner) 피드 즉시 수집하기  (9) 2009/02/04
RSS주소 다시 변경 합니다. (변덕이 죽 끓듯... -_-;;)  (0) 2009/02/04
다음 웹인사이드로 보는 재미있는 유입경로들... 난 국제블로거???  (8) 2009/01/30
TAG 레뷰, 메타블로그, 믹시, 발행, 블로거 뉴스, 블로그, 블로그코리아, 올블로그, 이올린, 티스토리
Trackback (0) : Comment (0)
Posted by 호아범

TRACKBACK | http://www.crazybar.net/trackback/810 관련글 쓰기

댓글을 달아 주세요

2009/02/04 11:00

한RSS, 피드버너(FeedBurner) 피드 즉시 수집하기 IT 이야기/블로그 & HTML2009/02/04 11:00

블로그에 글을 작성하고 한RSS를 통해 바로 확인하는 과정에서 몇가지 문제가 발생되었습니다. 웹기반 RSS 구독기인 한RSS와 RSS를 꾸며주는 FeedBurner의 글 수집시간 간격 때문에 즉각적으로 반영이 안되기 때문입니다. 

각 서비스에서는 RSS를 즉시 수집하는 기능을 제공하고 있는데 그에 관한 내용을 포스팅으로 남겨둡니다. 이 기능을 활용하면 FeedBurner를 통해 발행한 글을 한RSS를 통해 즉시(가능한한 빨리) 확인할 수 있습니다. 

--

한RSS의 경우, 대략 30분~1시간 주기로 새글 및 업데이트 정보가 갱신됩니다. (한RSS 도움말 참조) 하지만, 경우에 따라선 특정 사이트의 업데이트 정보를 곧바로 확인하고 싶을 때가 있죠. 예를 들어, 본인이 등록한 글이 RSS에 어떻게 보여지는 지 확인하고 싶을 때가 있겠네요.

이럴때 RSS 즉시 수집요청하기 를 통해 가능한한 빠른 시간내에 업데이트 해 달라고 요청할 수가 있습니다. (한RSS 왼쪽 화면 맨 하단에 보면 해당 링크를 찾을 수 있습니다. )

이렇게 해 주면, 짧은 시간 내에 해당 RSS를 업데이트 하실 수 있습니다.


그런데, 만약 FeedBurner를 사용중이라면 약간 문제가 생기네요. FeedBurner 자체가 원본 RSS를 수집해 와서 감싸주는 역할을 하기때문에 그 사이의 시간차가 존재하기 때문입니다.

이럴때는 FeedBurner의 Ping FeedBurner 기능을 활용하면 문제가 해결 됩니다. (FeedBurner 메뉴중 Troubleshootize에 접속하면 해당 링크를 찾을 수 있습니다. )

여기서 특이한 점은 즉시 반영이군요. 직접 수행해 보면 곧바로 갱신되어 있는 걸 확인할 수 있습니다.


저작자 표시 비영리 변경 금지

'IT 이야기 > 블로그 & HTML' 카테고리의 다른 글

메타사이트 추천, RSS 구독 버튼 by Krang  (8) 2009/02/05
이용중인 메타 블로그들  (0) 2009/02/04
한RSS, 피드버너(FeedBurner) 피드 즉시 수집하기  (9) 2009/02/04
RSS주소 다시 변경 합니다. (변덕이 죽 끓듯... -_-;;)  (0) 2009/02/04
다음 웹인사이드로 보는 재미있는 유입경로들... 난 국제블로거???  (8) 2009/01/30
티스토리 초대장 드립니다. 선착순 10분 - 종료  (40) 2009/01/20
TAG FEED, feedburner, RSS, 블로그, 즉시 수집, 피드, 피드버너, 한RSS
Trackback (1) : Comment (9)
Posted by 호아범

TRACKBACK | http://www.crazybar.net/trackback/811 관련글 쓰기

  1. SUBJECT 블로그코리아에서 내 블로그 인증하기

    2009/11/12 13:02 TRACKED FROM rinda's  삭제

    요즘 메타블로그 서비스에 관심이 있어 블로그 코리아에 가입했다. -가입의 목적이었던- 채널에서 여러 글들을 읽다보니.. 블코에도 리뷰룸이 있구나! 테스트 삼아 리뷰를 하나 신청했더니 블로그 인증을 하라고 한다. 인증은 마이페이지> 블로그 인증하기에서 할 수 있다. 블로그 선택 목록에서 리뷰를 할 블로그를 선택하면 위의 그림에서처럼 코드가 나타난다. 코드를 넣은 새 글을 자신의 블로그에서 발행하고 3분 이내에 '인증 요청' 버튼을 누르면 된다. 이 때..

댓글을 달아 주세요

  1. BlogIcon 돌이아빠 2009/02/04 23:57  댓글주소  수정/삭제  댓글쓰기

    오호 호아범님 덕분에 좋은 정보 받아갑니다^^!
    이런 좋은 기능(?)이 있었구만요~

  2. BlogIcon rinda 2009/10/28 16:10  댓글주소  수정/삭제  댓글쓰기

    덕분에 문제 해결 잘 하였습니다.
    좋은 정보 감사합니다 ^^

  3. BlogIcon rinda 2009/11/12 13:04  댓글주소  수정/삭제  댓글쓰기

    참, 늦었지만 트랙백 걸어두고 갑니다.
    (본문 중에 호아범님 블로그 링크도 있는데 괜찮으시죠? ^^; )
    행복한 주말 되세요~

  4. BlogIcon Song4U 2010/02/02 20:22  댓글주소  수정/삭제  댓글쓰기

    좋은 정보됐습니다^^ 피드버너가 좀 바릿빠릿하게 수집해주면 좋겠네요. 구글에 넘어갔다고해서 서버 좀 좋아지려나했는데 여전히 좀느린거같아요.

  5. BlogIcon 열산성 2010/03/02 13:19  댓글주소  수정/삭제  댓글쓰기

    감사합니다~
    도움이 되었습니다~~

2009/02/04 02:51

RSS주소 다시 변경 합니다. (변덕이 죽 끓듯... -_-;;) IT 이야기/블로그 & HTML2009/02/04 02:51

얼마전까지 FeedBurner를 사용하다가 여차저차 하여 FeedBurner 사용을 중지했었는데요. 이게 구글로 넘어갔다는 글을 읽은 후론 그냥 다시 FeedBurner가 사용하고 싶어지는 겁니다. 변덕쟁이..네요..

굳이 이유를 말 하라면, 그냥 구글이 인수했다니까 뭐가 달라졌는지, 혹은 앞으로 달라질지 함 써보고 싶어졌다고나 할까요~

어쨌든, 다시 FeedBurner로 감싸는 작업을 한번 했습니다. 

그런데, 구글에서 FeedBurner를 인수하는 과정에서 feed 주소가 변경이 되었더군요. 원래 주소로도 forwarding이 되긴 합니다만 불필요한 redirection과정을 거치는 게 싫어서 새로 부여받게 되는 주소로 공개합니다.

따라서, 이 순간부터 본 블로그의 공식 RSS주소는

http://feeds2.feedburner.com/crazybar

입니다. 

참고로 기존의 주소로도 계속 발행은 됩니다. 어찌 하다보니 부가적인 RSS 주소가 여럿이 되버렸네요.

일단 한RSS 사용하시는 분의 경우는 자동으로 변경 신청을 해 두었습니다.

사실, 정기 구독자가 많은 것 같지는 않아서 이런 공지하기도 쑥스럽기는 합니다만, 그래도 알릴건 알려야 하겠기에 글로 남겨 둡니다. ^^


저작자 표시 비영리 변경 금지

'IT 이야기 > 블로그 & HTML' 카테고리의 다른 글

이용중인 메타 블로그들  (0) 2009/02/04
한RSS, 피드버너(FeedBurner) 피드 즉시 수집하기  (9) 2009/02/04
RSS주소 다시 변경 합니다. (변덕이 죽 끓듯... -_-;;)  (0) 2009/02/04
다음 웹인사이드로 보는 재미있는 유입경로들... 난 국제블로거???  (8) 2009/01/30
티스토리 초대장 드립니다. 선착순 10분 - 종료  (40) 2009/01/20
내 블로그 유입경로?  (8) 2009/01/19
TAG feedburner, RSS, 구글, 블로그
Trackback (1) : Comment (0)
Posted by 호아범

TRACKBACK | http://www.crazybar.net/trackback/809 관련글 쓰기

  1. SUBJECT 한RSS에서 운영중인 블로그 RSS 주소 통합하기

    2009/02/04 11:19 TRACKED FROM Crazy Life on Net  삭제

    http://www.hanrss.com/bbs/merge_feeds.qst 블로그를 운영하다 보면 여러가지 이유로 블로그의 주소가 바뀌게 되는 경우가 있습니다. 그런데 블로그는 보통 RSS로 발행이 되죠. 문제는 RSS 주소가 보통 블로그 주소와 관련이 되있다는 점입니다. 가령 티스토리의 경우 블로그 주소가 XXXXXX.tistory.com이었다면 해당 블로그의 RSS주소는 XXXXXX.tistory.com/rss 가 됩니다. 또, 네이버 블로그의..

댓글을 달아 주세요

2009/01/30 02:33

다음 웹인사이드로 보는 재미있는 유입경로들... 난 국제블로거??? IT 이야기/블로그 & HTML2009/01/30 02:33

그놈의 트래픽이 뭔지, 한가할때 들여다 보고 있으면 참 재미있지요.

얼마전에는 실시간 접속자수를 알려주는 위젯에 관한 글과  티스토리 플러그인을 활용한 유입경로 분석에 관한 글을 작성했었는데, 요번에는 좀더 전문적(?)인 분석을 해주는 도구를 활용한 트래픽 분석 결과를 올려보려고 합니다.

일단, 가장 널리 알려진 트래픽 분석도구는 Google Analytics 와 다음 웹인사이드가 있습니다. 블로그 운영초기에는 Google Analytics를 이용했었는데, 그걸로 인해 블로그 로딩속도가 좀 느려지는 감이 있어서 다음 웹인사이드로 통계를 내 오고 있습니다. 

티스토리도 다음꺼라서 그런지는 잘 모르겠지만 어쨌든, 웹인사이드로 인한 속도저하는 없더라구요. 


다음은 간단한 웹인사이드 사용법과 분석화면입니다. 


1. 블로그 등록하기

먼저 회원가입을 한 후에, 화면 우측에 보이는 사이트 관리 라는 버튼을 누르고, 중간에 보이는 신규사이트 추가 버튼을 클릭하면 분석하고자 하는 블로그를 추가할 수 있습니다.


다음에 나타나는 창에 사이트의 정보를 입력합니다.


사이트 정보 입력이 끝나면, 아래와 같은 창이 나타나게 되는데요.

여기에 보여지는 스크립트를 복사하여 운영중인 블로그에 삽입해 주면 됩니다. 이때, 스크립트 가이드를 읽어보면 약간의 도움을 받을 수 있겠군요.


2. 티스토리 블로그에 삽입하기

티스토리의 경우는 스킨 편집을 지원하기 때문에 손쉽게 삽입이 가능합니다.

관리자 -> 스킨 -> HTML/CSS편집 으로 접속해서 오른편에 보이는 skin.html 영역의 맨 아래에 보면 </body> 가 보이는 데요. 그 앞에 위 스크립트를 삽입하고  저장해 주면 끝입니다. 


3. 관리 화면 보기

이렇게 했다고 해서 하루아침에 분석이 쫙 하고 나타나는 건 당연히 아니겠지요. 일단 느긋하게 몇일 두고 봅니다. 그러면 누군가 블로그에 접속할 때마다 삽입해둔 스크립트가 짜잔~ 하고 수행되면서 해당 트래픽이 웹인사이드에 누적됩니다. 

적절한 시점에 웹인사이드에 접속해 보면 아래와 같은 화면들이 나타나게 됩니다. 

아래 내용은 실제 본 블로그의 분석화면입니다. 






위 페이지들은 각각의 요약정보이고, 각 정보의 상세 페이지는 너무 많아서 생략합니다. 


4. 재밌는 유입경로들...

웹인사이드를 이용해서 지난 1주일간 트래픽을 들여다 보다 보니 외국으로부터의 유입이 가끔 보이더라구요. 기능중에서 경로분석 -> 유입사이트 메뉴를 활용해서 살펴보니 몇몇 사이트가 눈에 띄네요.

  • http://www.lx3-photography.com: LX3 관련 블로그인데, 제 글이 링크가 되어 있더라구요. (바로가기)
  • http://www.dslr-forum.de: DSLR 관련 독일 사이트인데, 애석하게도 독어를 몰라서 어느 글인지 찾을 수가 없네요.. -_-;;
  • 그외 구글, 야후 등 다른나라 검색엔진들

또, 방문자 심층분석 -> 접속지역 메뉴에서 우리나라 이외지역의 접속 비율을 보니까 약 2% 정도 되는 군요. ㅎㅎ

그냥 국내 블로거로 남기로 했습니다. ^^


여튼, 이래저래 내 블로그를 어떤 사람들이 보는지가 궁금하다면 이런 도구를 이용해 보는 것도 재미있을거 같습니다. 


 


저작자 표시 비영리 변경 금지

'IT 이야기 > 블로그 & HTML' 카테고리의 다른 글

한RSS, 피드버너(FeedBurner) 피드 즉시 수집하기  (9) 2009/02/04
RSS주소 다시 변경 합니다. (변덕이 죽 끓듯... -_-;;)  (0) 2009/02/04
다음 웹인사이드로 보는 재미있는 유입경로들... 난 국제블로거???  (8) 2009/01/30
티스토리 초대장 드립니다. 선착순 10분 - 종료  (40) 2009/01/20
내 블로그 유입경로?  (8) 2009/01/19
지금 내 블로그를 보고 있는 접속자는 몇명? whos.amung.us  (8) 2009/01/08
TAG Google Analystics, 다음, 방문자 분석, 방문자 통계, 블로그, 웹인사이드, 유입경로, 트래픽, 티스토리
Trackback (0) : Comment (8)
Posted by 호아범

TRACKBACK | http://www.crazybar.net/trackback/799 관련글 쓰기

댓글을 달아 주세요

  1. BlogIcon juanpsh 2009/01/30 09:24  댓글주소  수정/삭제  댓글쓰기

    저두 Google 아날리스틱을 사용하고 있었는데요. 쩝, 이거 한 번 써 봐야겠습니다. 좋은 포스팅 감사합니다.

    • BlogIcon 호아범 2009/01/30 09:47  댓글주소  수정/삭제

      요새는 어떤지 모르겠지만, 구글 쓰다보면 간혹 페이지 로딩시에 멈칫하는 경우 없으신가요?
      전 그걸 못견디겠더라구요...

  2. BlogIcon 블루그 2009/01/30 14:59  댓글주소  수정/삭제  댓글쓰기

    저도 한번 확인해봐야겠어요. ^^
    이런 분석글은 정말 재밌어요ㅎㅎ

  3. BlogIcon ACT 2009/02/05 22:39  댓글주소  수정/삭제  댓글쓰기

    이글 보고 바로 웹인사이드 사용중 ㅋ 좋은 정보 캄사~

  4. BlogIcon 예영 2009/02/28 02:19  댓글주소  수정/삭제  댓글쓰기

    국제 블로거가 되려면 영어로 포스팅해야 되겠죠? 저는 영어가 약해서요......... 크;;;;;;;;
    그래도 한국인들이 전세계로 진출한 덕분인지 외국에서 접속하시는 분들이 소수지만 항상 있더군요. ^_^
    나는야 국제 블로거?

    • BlogIcon 호아범 2009/03/02 12:05  댓글주소  수정/삭제

      당연한 말씀이지요.. ^^
      간혹, 카메라 관련 포스팅의 경우는 외국인들도 종종 오더라구요. 물론, 댓글 같은건 없고 그냥 사진만 보고 가는 정도지만요.. ㅎㅎ
      방문댓글 감사드립니다.

2009/01/20 13:53

티스토리 초대장 드립니다. 선착순 10분 - 종료 IT 이야기/블로그 & HTML2009/01/20 13:53

i n v i t a t i o n

티스토리 초대장

+ 남은 초대장 수 : 0

안녕하세요!

티스토리에 보금자리를 마련하시려는 여러분께 초대장을 배포해 드리려고 합니다.

나만의, 내 생각을, 내 기억을 담는 소중한 블로그를 만들고 싶다면 티스토리로 시작해보세요!

티스토리 블로그는 초대에 의해서만 가입이 가능합니다. 원하시는 분은 댓글에 E-mail 주소를 남겨주시면 초대장을 보내드립니다. 남겨주실 때에는 꼭 비밀댓글로 남겨주세요!

초대장을 보내드리고 바로 개설하시지 않으신 분들은 초대장을 회수할 수도 있으니 바로 개설해주세요!

Yes
이런 분들께 드립니다!
1. 다른 블로그를 사용해보셨던 분
2. 이메일 주소가 정상적인 분
3. 블로그를 시작하려는 이유를 남겨주신 분!
No
이런 분들께 드리지 않아요!
1. 이메일 주소가 의심되는 분!
2. 이메일 주소를 남기지 않으신 분
3. 이유도 없이 달라고 하시는 분!
티스토리 이래서 좋아요!
1. 이미지, 동영상, 오디오, 파일까지! 무한 용량과 강력한 멀티미디어를 올릴 수 있어요!
2. 스킨위자드로 스킨을 내맘대로~ 거기에 기능 확장 플러그인까지!
3. 내가 원하는대로 myID.com으로 블로그 주소를 만들 수 있어요!

기왕이면 열심히 활동하실 분들이 신청하셨으면 좋겠습니다. 초대장 나눠드린 분들 중 많은 분들이 개점휴업이더라구요.
 
어쨌든, 댓글에 비밀댓글로 이메일 남겨주시는 선착순 10분에게 초대장 보내드리도록 하겠습니다.
 
----
 
가지고 있던 초대장이 다 소진되어 종료합니다.
 

저작자 표시 비영리 변경 금지

'IT 이야기 > 블로그 & HTML' 카테고리의 다른 글

RSS주소 다시 변경 합니다. (변덕이 죽 끓듯... -_-;;)  (0) 2009/02/04
다음 웹인사이드로 보는 재미있는 유입경로들... 난 국제블로거???  (8) 2009/01/30
티스토리 초대장 드립니다. 선착순 10분 - 종료  (40) 2009/01/20
내 블로그 유입경로?  (8) 2009/01/19
지금 내 블로그를 보고 있는 접속자는 몇명? whos.amung.us  (8) 2009/01/08
햅틱2 안에 블로그 있다 ?!  (2) 2009/01/07
TAG 초대장, 티스토리
Trackback (0) : Comment (40)
Posted by 호아범

TRACKBACK | http://www.crazybar.net/trackback/794 관련글 쓰기

댓글을 달아 주세요

  1. 2009/01/20 13:54  댓글주소  수정/삭제  댓글쓰기

    비밀댓글 입니다

  2. 2009/01/20 13:55  댓글주소  수정/삭제  댓글쓰기

    비밀댓글 입니다

  3. 2009/01/20 13:56  댓글주소  수정/삭제  댓글쓰기

    비밀댓글 입니다

  4. 강깅쓰 2009/01/20 13:58  댓글주소  수정/삭제  댓글쓰기

    rkddudgu@hanmail.net 부탁드립니다!!

    예전에 네이버 블로그를 한번 해본적이있는데

    재밌더라구요ㅎ 그때문이기두 하구요

    요즘 추세가 티스토리인것 같더라구요ㅎㅎ

    그래서 저두 해보려구요

  5. 2009/01/20 13:57  댓글주소  수정/삭제  댓글쓰기

    비밀댓글 입니다

  6. 2009/01/20 13:59  댓글주소  수정/삭제  댓글쓰기

    비밀댓글 입니다

  7. 2009/01/20 14:01  댓글주소  수정/삭제  댓글쓰기

    비밀댓글 입니다

  8. padoc 2009/01/20 14:01  댓글주소  수정/삭제  댓글쓰기

    ㄱㅏ입했어요 감사합니다..__)

  9. 2009/01/20 14:09  댓글주소  수정/삭제  댓글쓰기

    비밀댓글 입니다

  10. 팬더 2009/01/20 14:02  댓글주소  수정/삭제  댓글쓰기

    1st_tistory@hanmail.net

    부탁드려요

  11. 2009/01/20 14:03  댓글주소  수정/삭제  댓글쓰기

    비밀댓글 입니다

  12. BlogIcon 호아범 2009/01/20 14:03  댓글주소  수정/삭제  댓글쓰기

    여기까지 종료합니다.

  13. 최범규 2009/01/20 14:04  댓글주소  수정/삭제  댓글쓰기

    초등학교에서 학생들을 가르치고 있는데 학급 홈페이지로 유용하게 사요하고자 합니다.
    bkchoi81@naver.com

  14. 2009/01/20 14:11  댓글주소  수정/삭제  댓글쓰기

    비밀댓글 입니다

  15. 2009/01/20 14:12  댓글주소  수정/삭제  댓글쓰기

    비밀댓글 입니다

  16. BlogIcon 쉘로우 2009/01/20 14:14  댓글주소  수정/삭제  댓글쓰기

    감사합니다~~ ^^

  17. 2009/01/20 14:15  댓글주소  수정/삭제  댓글쓰기

    비밀댓글 입니다

  18. 이정문 2009/01/20 14:18  댓글주소  수정/삭제  댓글쓰기

    정말 감사합니다!

  19. 2009/01/20 14:40  댓글주소  수정/삭제  댓글쓰기

    비밀댓글 입니다

2009/01/19 23:12

내 블로그 유입경로? IT 이야기/블로그 & HTML2009/01/19 23:12

블로그들을 방문하다 보면 간혹 유입경로를 파악해서 포스팅하는 분들을 많이 보았습니다. 

유입경로란, 블로그를 방문하게 된 경로를 말합니다. 가령 다음 검색에 글이 노출되었고, 그 링크를 클릭했다면 그것이 바로 유입경로가 됩니다. 참고로, 관리자 →플러그인→유입경로 메뉴를 통해 확인할 수 있습니다.

어쨌든, 저도 용돌이님 블로그를 보다가 생각난 김에 한번 해 보았지요.

동일 도메인을 기준으로 묶어보니 이렇게 되네요.

1. 네이버: 2 + 6 + 10 = 44,545

어찌 되었던 간에 현재 웹 검색 1위 업체이다 보니 당연한 결과인것 같기도 하고 아닌것 같기도 하고 뭐 그렇네요.


2. 다음: 1 + 16 + 17 = 40,779

어차피 티스토리가 다음 꺼니까 다음에서 유입이 많은 거겠지요. 근데 용돌이님처럼 초창기에는 다음유입이 훨씬더 많았던 것 같은데 지금은 네이버에 밀렸군요.


3. 구글: 5 + 7 + 14 = 10,279

세계적으로는 가장 많이 쓰는 검색엔진입니다만, 역시 국내에서는 네이버와 다음에 많이 밀리는 듯 합니다. 엄밀히 말해서 밀린다기 보단 사용차 층이 얕다고 해야 할까요?


4. 라이브닷컴: 3 = 8,996

이건 아마, 익스플로러 사용자가 그냥 주소창이나 검색창에 넣어서 검색한 듯 싶네요. 


5. 야후: 4 = 8,810

아마, 인터넷이 첨 등장했을때 가장 유명했던 검색엔진 중 하나가 바로 야후일 겁니다. 단정짓기는 좀 그렇지만, 사용자 층이 많이 준건 사실인 것 같네요. MS에도 밀리다니...


6. 엠파스: 9 + 18 = 2,334

네이트에 인수되면서 뭐가 어찌 돌아가는지 모르겠지만, 어쨌든 유입이 계속 되고 있긴 한가봅니다. 


7. 올블로그: 8 = 1,692

국내에서 가장 유명한 메타블로그 중 하나이죠. 별다른 짓은 하지 않고 있고 그냥 회원가입하고 발행만 하고 있습니다.


8. 태터툴즈: 11 = 1,470

좀 의외의 경로네요. 이게 이올린일까요? 태터툴즈 사이트에 아주 오래전에 플러그인 하나 만들어 올린적 있긴 한데, 그녀석이 트래픽을 일으킬것 같지는 않고, 쓱 살펴본 바로는 잘 모르겠네요.


9. SLR클럽: 12 = 1,463

국내 최고의 카메라 동호회지요. 이곳에는 여행지 후기 비슷한거 몇개 링크 올린 적이 있는데, 워낙에 회원수가 많은 곳이다 보니 오래전에 올렸음에도 불구하고 유입이 계속 되고 있네요.


10. 블로그코리아: 19 + 20 = 1,348

이곳 역시 주로 발행만 하고 별다른 활동은 하지 않는데요. 그래도 꾸준히 유입이 생기는 것 같습니다.


11. 티스토리: 13 = 1,068

티스토리에서 주로 찾아오시는 분들은 거의 티스토리 관련 포스팅 때문이었던 걸로 기억합니다. 스킨이나 태터데스크 관련해서 몇개 글을 썼었거든요.


12. 자체링크: 15 = 897

그외에는 블로그 내에서 발생한 트래픽입니다.


이렇게 해 놓고 다른 분들 것과 비교해 보니, 비슷한 듯 하기도 하고 다른 듯 하기도 한것이 신기하네요. 다만, 별다른 이슈를 만들지 못한 탓인지 믹시나 블로거뉴스로 부터의 유입은 순위권 밖인가 봅니다. 또 한RSS에서의 유입도 없군요. 

암튼 잼있습니다. ^^


저작자 표시 비영리 변경 금지

'IT 이야기 > 블로그 & HTML' 카테고리의 다른 글

다음 웹인사이드로 보는 재미있는 유입경로들... 난 국제블로거???  (8) 2009/01/30
티스토리 초대장 드립니다. 선착순 10분 - 종료  (40) 2009/01/20
내 블로그 유입경로?  (8) 2009/01/19
지금 내 블로그를 보고 있는 접속자는 몇명? whos.amung.us  (8) 2009/01/08
햅틱2 안에 블로그 있다 ?!  (2) 2009/01/07
내 블로그는... $3,387.24 짜리~  (10) 2008/11/10
TAG 분석, 블로그, 유입경로, 트래픽
Trackback (6) : Comment (8)
Posted by 호아범

TRACKBACK | http://www.crazybar.net/trackback/789 관련글 쓰기

  1. SUBJECT 블로그 유입경로를 통한 트래픽 순위

    2009/01/22 01:07 TRACKED FROM ☆★ My Photo Life with α700 ☆★  삭제

    Krang님의 블로그 유입경로 순위로 알아보는 트래픽 효자들, 돌이아빠님의 블로그 유입경로를 통한 트래픽 순위 알아보기 포스트를 보고 저도 따라해봤어요 ^^; 뭐 두 분에 비해서 방문자수는 턱없이 적지만 제 블로그에 어떤 곳에서 많이 유입이 되는지를 보면 나중에 방문자수가 많아졌을 때와 비교도 할 수 있을 듯하여 기록삼아 남겨둡니다. 네이버 검색, 까페 : 1위, 4위 블로그를 본격적으로 시작을 하고 3달 정도는 다음 검색이 1위였다가 돌이아빠님과..

  2. SUBJECT 블로그 유입경로 분석

    2009/01/22 01:07 TRACKED FROM ☆★ My Photo Life with α700 ☆★  삭제

    이전에 특이한 블로그 유입경로들라는 글을 올렸는데 이거 유입경로 분석하는 것도 꽤 재미있네요. 블로그에 유입되는 경로를 분석하다보면 처음 들어보는 서비스에서 유입되는 경로가 있어서 평소 알지 못했던 새로운 서비스에 대해 알게 되기도 하네요. 그리고 이전글과 마찬가지로 왜 유입되는지도 모르는 곳도 있어요 ; 1. http://mw.mediawill.com/WOW/Portal/Intro/LoginPage.aspx 미디어윌 그룹웨어에서 왜 온거니? 유입경..

  3. SUBJECT 특이한 블로그 유입경로들

    2009/01/22 01:07 TRACKED FROM ☆★ My Photo Life with α700 ☆★  삭제

    오늘 관리자메뉴에 유입경로를 보다 평소에 보지 못한 유입경로가 있네요. 그 중 몇가지를 기록합니다. 1. 요즘 블로거들 사이에 유명한(?) "???" 검색을 통한 유입경로 넌 대체 정체가 뭐니? 요즘 이런 유입경로를 많이들 보셨죠? 저도 평소에 대체 뭘까 궁금하던 차였는데 돌이아빠님이 고객센터에 문의를 하였답니다. 다음에서 유입되는 이상한 유입경로 로그의 정체는? 라는 글에 그에 대한 답변이 왔다는데 다음측에서도 아직 모르고 있다네요 -_-a 보통..

  4. SUBJECT 묻습니다.

    2009/01/29 22:57 TRACKED FROM Juan 의 이과수 이야기  삭제

    만년 변방 블로그인 "이과수 이야기"가 방문하시는 모든 분들에게 뭐좀 물어보고 싶은게 있습니다. 이해가 좀 안가서 말이죠. 옆의 캡쳐 사진에서 볼 수 있듯이 제 블로그를 방문하는 매일의 숫자는 거의 고르게 120명 - 250명선입니다. 그런데 어제, 그러니까 1월 28일에는 482명이 방문한 것으로 되어 있었습니다. 평소의 두배가 조금 넘는 방문 숫자를 저녁에 들어와서 보고, 잠깐 놀랐다는.... 이과수 이야기가 드디어 변방 블로그에서 탈피는 하는..

  5. SUBJECT 블로그 유입경로 알아보는 순위

    2009/04/30 18:14 TRACKED FROM 즐거운하루  삭제

    포스팅할것도 없고 그냥 심심하고 생뚱맞게 유입경로 순위을 확인해봐습니다 유입경로 순위 확인하는 방법은 관리자 →플러그인→유입경로 메뉴를 통해 확인할 수 있습니다. 네이버(naver) 1,6,16 네이버 힘인가요? 왠지 다음에 밀리는듯합니다! 다음 (daum) 2,9,12,17,19,20 9.다음 지식에 트랙백을 걸어 놓은 효과을 보는듯합니다 그리고 12.블로거뉴스를 많이 발행하지 않은 결과게죠 또한 제목이 낚시성이 아닌듯해서 별루 없는듯합니다 다음에..

  6. SUBJECT 블로그의 유입 경로?

    2009/11/17 01:54 TRACKED FROM ㅇㅅㅇ♪  삭제

    블로깅을 하다보면 보게되는 게... 바로 유입 경로이다. 누가 어떻 경로로... 또는 어떤 키워드를 통해서 들어왔는지 보게되는데... 나야 전문 블로거는 아니지만... 그래도 오랫동안 블로깅을 해왔기 때문에 글수 자체가 적지는 않은 터라 네이버 블로그를 쓸 때 방문자수가 아주 적은 편은 아니었다. 그리고 티스토리로 이사온 뒤로 보니.. 확.실.히... 네이버 블로그가 방문자수는 훨씬 잘나온다.. ㅋㅋ 한동안 유입량 비교좀 해보려고 네이버 블로그의 기..

댓글을 달아 주세요

  1. BlogIcon 돌이아빠 2009/01/19 23:51  댓글주소  수정/삭제  댓글쓰기

    search.live.com 으로부터의 유입이 꽤 많으시네요? 의외의 정보인데요? 오호.
    전체적으로 메타사이트는 하위권이고 검색이 상위권이네요^^
    구글로부터의 유입 부러운 부분입니다~ 후훗.
    역시 유용한 컨텐츠가 많으시니 검색을 통한 유입이 많으신게 아닌가 합니다^^

    잘 봤습니다~~~

    • BlogIcon 호아범 2009/01/20 00:00  댓글주소  수정/삭제

      안녕하세요.. ^^
      그런식으로 해석이 되네요..
      저는 메타 쪽에서 유입이 적어서 우울했었는데요. ㅎㅎ..
      아마 제 블로그는 소통이 적은 탓인거 같아요. 댓글도 잘 안달리고 트랙백도 적고.. 에궁.. -_-;;

  2. BlogIcon 취호 2009/01/20 00:11  댓글주소  수정/삭제  댓글쓰기

    유용한 정보 잘보았습니다 ㅎ 저도 투데이높으면 한번씩 눌러보고 흡족해해요 ㅎㅎ

  3. BlogIcon 역전의용사 2009/01/22 01:10  댓글주소  수정/삭제  댓글쓰기

    저도 트랙백 남깁니다 ^^
    RSS를 통해 글은 항상 보고 있어요 ^^;

  4. BlogIcon 즐거운하루 2009/04/30 18:17  댓글주소  수정/삭제  댓글쓰기

    search.live.com 유입되는것보니 ie7설치되면기본 검색엔진 search.live.com되서 그런가요 유입량이 많네요 제 블로그에 관련글포스팅이 있어서 트래백 보내드립니다

    • BlogIcon 호아범 2009/05/01 12:34  댓글주소  수정/삭제

      네 말씀하신 내용이 맞습니다.
      IE의 검색엔진이 기본으로 되어 있는 상태로, 검색어를 입력하면 search.live.com으로 검색이 되더라구요.

2009/01/08 15:32

지금 내 블로그를 보고 있는 접속자는 몇명? whos.amung.us IT 이야기/블로그 & HTML2009/01/08 15:32

몇일전 어느(?) 블로그에서 보게 된 건데, 현재 몇명이 블로그에 접속되어 있는지를 보여주는 위젯이 있더라구요. 약간의 검색을 해보니, 이미 알만한 분들은 다 알고 계시는 기능인 듯 싶었습니다. ^^

그래도, 신기한 마음에 간단하게 소개를 해볼까 합니다.


우선, 이에 관해 자세하게 소개해 놓은 블로거팁 닷컴의 링크 먼저 달고 시작합니다.


본 서비스는 whos.amung.us라는 사이트에서 제공해 주는 것으로서 현재 블로그에 접속되어 있는 접속자수를 실시간으로 보여주는 기능을 합니다. 

이를 이용하기 위해서는 사이트에 가서 아래와 같은 JavaScrip 코드를 자신의 블로그의 적절한 위치에 삽입해 주면 됩니다.

그러면 아래와 같은 모양의 버튼을 통해 현재 접속자 수를 알려주게 됩니다. 이때, 디자인이나 색상을 바꾸려면 사이트 내에서 몇가지 조작을 해서 간간하게 만들어 낼 수 있습니다.


그런 후에 만들어진 버튼을 클릭해 보면 구체적으로 어떤 페이지에 몇몇이 접속되어 있는지를 확인 할 수가 있습니다. 아래 그림은 이 글을 쓰고 있는 현재 본 블로그에 접속되어 있는 접속자를 나타내는 화면입니다.

시간대별 변화 그래프, 접속되어있는 포스팅 목록과 접속자 수, 접속한 지역 등을 한눈에 볼 수 있도록 구성이 되어 있는 걸 볼수 있습니다. 


다음은 티스토리 사용자를 기준으로 위젯을 추가하는 모습을 입니다.

1. "관리자 -> 스킨 -> 사이드바 설정"을 클릭 한 후에 "사용 가능한 사이드바"에서 "HTML 배너출력"을 드래그 하여 사이드바 내의 놓고 싶은 위치에 드랍합니다.

이때 사용중인 사이드바의 모양은 스킨에 따라 달리 보일 수 있습니다. 


2. 추가한 "HTML 배너출력"의 편집을 클릭하고 whos.amung.us에서 가져온 코드를 붙여넣고, 저장을 합니다. 이때에 디자인을 고려하여 원하는 태그를 추가하여도 됩니다.


3. 이제 다 되었네요. 확인해 봅시다.



관심 있으신 분들은 간단하게 적용해 봐도 재밌을 듯 합니다. ^^

참고로, 본 블로그의 통계페이지는 http://whos.amung.us/stats/rn60i19qsxfi 입니다.


저작자 표시 비영리 변경 금지

'IT 이야기 > 블로그 & HTML' 카테고리의 다른 글

티스토리 초대장 드립니다. 선착순 10분 - 종료  (40) 2009/01/20
내 블로그 유입경로?  (8) 2009/01/19
지금 내 블로그를 보고 있는 접속자는 몇명? whos.amung.us  (8) 2009/01/08
햅틱2 안에 블로그 있다 ?!  (2) 2009/01/07
내 블로그는... $3,387.24 짜리~  (10) 2008/11/10
태터데스크 사용하면서 "주소/?page=XX" 링크 사용하기  (3) 2008/11/07
TAG whos.amung.us, 분석, 블로그, 접속자수, 티스토리, 후즈어멍어스
Trackback (1) : Comment (8)
Posted by 호아범

TRACKBACK | http://www.crazybar.net/trackback/780 관련글 쓰기

  1. SUBJECT 블로그 실시간 접속자수를 트레이에서 알려준다!!

    2009/01/08 16:31 TRACKED FROM 재아넷 JAEA@BLOG  삭제

    흔히들 블로그에 현재 몇명의 접속자가 있는지에 대해서 무척이나 궁금해 합니다. 특히 블로그에 재미를 붙인분들이라면 더 그럴껀데요~~.. 현재 블로거들이 가장 많이 사용하는 위젯은 http://whos.amung.us/ 에서 지원하는 amung 위젯입니다. 설치도 쉽고 특별히 가입을 해야 한다거나 하는것도 없기 때문에 많이들 사용하고 나름 깔끔함을 권장하기도 합니다. 아마 대부분의 블로그에서 한번쯤은 보셨을겁니다. 보통 RSS 아이콘과 같이 두는경우가..

댓글을 달아 주세요

  1. BlogIcon 다짱 2009/01/08 18:06  댓글주소  수정/삭제  댓글쓰기

    위젯중에 제일 맘에 드는 기능 이에요. 디자인도 간단하고 이쁘구요^^
    설치하는 방법을 쉽게 달아주셔서 초보 블로거님들이 도전해보실수 있겠네요.

  2. BlogIcon 로이스 2009/01/08 18:07  댓글주소  수정/삭제  댓글쓰기

    재미있네요^^
    제 블로그는,,,, 몇명이나 보고있을지...^^
    저도 한번 해봐야겠어요^^

  3. BlogIcon 하늘사람 2009/01/08 20:01  댓글주소  수정/삭제  댓글쓰기

    좋은 데요. 저도 한번 달와봤답니다.

2009/01/07 20:39

햅틱2 안에 블로그 있다 ?! IT 이야기/블로그 & HTML2009/01/07 20:39

얼마전에 티스토리 공지사항에 모바일 접속에 관한 내용이 게시되었더군요. 마침 풀브라우징을 아주 잘 지원하는 햅틱2도 장만한 터라 문득 내 블로그를 함 접속해 볼까? 하는 생각이 들더군요.

그래서 함 해봤습니다. 참고로 본 블로그의 모바일 주소는 http://www.crazybar.net/m 입니다. ^^

Panasonic | DMC-LX3 | Multi-Segment | 1/80sec | F/2 | 0EV | 5.1mm | ISO-80 | Off Compulsory


그냥 접속하면 수많은 이미지데이터로 인해 패킷수가 어마어마 할텐데, 모바일 전용으로 보이는 텍스트위주의 스타일이 나름 깔끔하게 잘 짜여진 듯 보입니다. 이 정도면 정말 심심할 땐 접속해서 놀아볼만 할 것 같습니다. ^^

하지만, 지금은 폰 바꾸면서 의무로 가입한 데이터 요금제를 사용중인 터라 겁없이 접속을 해 보긴 했지만, 글쎄요... 평상시라면 얼마나 접속할까? 하는 생각이 드네요. 

휴대전화 풀브라우징~을 부르짓는 분들을 보면 나름 이해가 안가는 건 아니지만, 어차리 수많은 멀티미디어데이터가 돌아나니고 비표준이 난무하는 우리나라 웹 환경을 고려해 봤을때 이처럼 모바일 전용페이지를 "따로" 만들지 않는 한 완벽한 풀브라우징은 불가능하다는 생각이 드네요. 

여튼, 휴대폰으로 웹페이지를 본다... 는 사실, 참 재밌습니다. ^^

저작자 표시 비영리 변경 금지

'IT 이야기 > 블로그 & HTML' 카테고리의 다른 글

내 블로그 유입경로?  (8) 2009/01/19
지금 내 블로그를 보고 있는 접속자는 몇명? whos.amung.us  (8) 2009/01/08
햅틱2 안에 블로그 있다 ?!  (2) 2009/01/07
내 블로그는... $3,387.24 짜리~  (10) 2008/11/10
태터데스크 사용하면서 "주소/?page=XX" 링크 사용하기  (3) 2008/11/07
RSS 부분공개에서 전체공개로... FeedBurner 사용중지...  (6) 2008/11/05
TAG 모바일페이지, 블로그, 티스토리, 풀브라우징, 햅틱2
Trackback (0) : Comment (2)
Posted by 호아범

TRACKBACK | http://www.crazybar.net/trackback/779 관련글 쓰기

댓글을 달아 주세요

  1. BlogIcon reshout 2009/01/08 09:04  댓글주소  수정/삭제  댓글쓰기

    저는 아이팟터치의 사파리로 보니까 햅틱2랑 모양이 다르네요. 모바일 페이지는 브라우저마다 다르게 표현되는 듯.

2008/11/10 17:30

내 블로그는... $3,387.24 짜리~ IT 이야기/블로그 & HTML2008/11/10 17:30


My blog is worth $3,387.24.
How much is your blog worth?

학주니닷컴에서 알게된 블로그 값어치 측정사이트에서 본 블로그의 값어치를 측정해 보았습니다. ^^; 

$3,387.24 네요... 오늘자 환율로 계산해 보니 약 450만원쯤 나오네요.. ^^ 블로그얌에서 측정해본 가격이 약 200만원 쫌 넘으니까, 이쪽이 꽤 후한 편이군요. 

사실, 이런다고 해서, 누가 블로그를 매매하겠습니까? 그냥 재미삼아 해보는 거죠.. 

근데, 학주니님의 블로그 가격이랑 비교해 보니, 1/10도 안되네요.. -_-;;

저작자 표시 비영리 변경 금지

'IT 이야기 > 블로그 & HTML' 카테고리의 다른 글

지금 내 블로그를 보고 있는 접속자는 몇명? whos.amung.us  (8) 2009/01/08
햅틱2 안에 블로그 있다 ?!  (2) 2009/01/07
내 블로그는... $3,387.24 짜리~  (10) 2008/11/10
태터데스크 사용하면서 "주소/?page=XX" 링크 사용하기  (3) 2008/11/07
RSS 부분공개에서 전체공개로... FeedBurner 사용중지...  (6) 2008/11/05
CSS - 내용을 가운데로 정렬하기 - margin-left/right: auto  (4) 2008/10/31
TAG Technorati, 블로그, 블로그가격, 블로그가치, 블로그얌, 학주니닷컴
Trackback (4) : Comment (10)
Posted by 호아범

TRACKBACK | http://www.crazybar.net/trackback/750 관련글 쓰기

  1. SUBJECT 내블로그을 돈으로 환산하면 얼마일까?확인하는방법

    2008/11/10 18:38 TRACKED FROM 즐거운하루  삭제

    블로그얌 이라는곳 있습니다 블로그얌은 블로그 가치를 측정하는곳입니다 그래서 블로그얌 이외 다른곳은 없나 하고 찾아 봐습니다 찾아 보니 측정 해주는곳이 있습니다 뭐 블로그의 가격을 측정해서 가치가 높게 평가된다면 기분 좋은일 아닐까요 그래서 가치를 측정하는 사이트를 소개 해볼까합니다 그냥 재미으로 하는것이니깐 큰 부담을 가지지마세요 노약자나 심장이 약한분들은 측정을 삼가해주세요 ㅡ.ㅡ;; 블로그얌 제공 블로그 가치평가 ==>가치평가하기 네임즈의 도메인..

  2. SUBJECT 내 블로그의 가치는 $로 얼마일까요

    2008/11/10 19:17 TRACKED FROM 용돌이 이야기  삭제

    How Much Is Your Blog Worth? 학주니님의 포스팅하신 글을 보고 호기심에 한번 해봤습니다. My blog is worth $1,129.08. How much is your blog worth? 용돌이 이야기 블로그 가치가 $1,129.08 이라고하네요. 현재의 환율인 1,323원을 기준으로 했을때 1,493,772.84 원 이로군요. 블로그얌으로 측정해본 가치보다 조금 못합니다만, 후훗 이정도도 어디입니까. 용돌이 이야기를 좀더..

  3. SUBJECT 블로그 가치평가 by 블로그얌(Blogyam)

    2009/02/25 14:46 TRACKED FROM Crazy Life on Net  삭제

    예전에 한번 해 본적이 있었는데... 5개월만에 70만원이 올랐네요.. ^^ (블로그얌 주소: http://www.blogyam.co.kr)

  4. SUBJECT 고환율로 인한 블로그 가치 급등 ? ㅎㅎㅎ

    2009/02/26 16:53 TRACKED FROM 세담의 산행이야기  삭제

    How Much Is Your Blog Worth? Your blog, zetham.net, is worth $15,242.58 Here's a button you can put on your blog: (the HTML is below) My blog is worth $15,242.58. How much is your blog worth? 블로그 가치를 달러로 측정해 보는 사이트~~ ????? 15,000달러가 넘네? ㅋㅋㅋ 블로그얌의 평가보다 무..

댓글을 달아 주세요

  1. BlogIcon monopiece 2008/11/10 17:37  댓글주소  수정/삭제  댓글쓰기

    저도 얼마 나오지는 않았지만 재밌게 해봤습니다. 소개 감사합니다...^^;

  2. BlogIcon Ellif 2008/11/10 17:53  댓글주소  수정/삭제  댓글쓰기

    아, Technorati를 실제적으로 실행할 수 있으니 대단하네요:) 저는 Technorati는 $5,645.40 나오는데 블로그얌은 38만원밖에 안나와요. 블로그얌이 꽤 짠듯 싶네요:)

  3. BlogIcon 돌이아빠 2008/11/10 18:33  댓글주소  수정/삭제  댓글쓰기

    하핫 저는 호아범님의 딱 1/3 정도 수준 되겠습니다 하하핫

  4. BlogIcon 즐거운하루 2008/11/10 18:39  댓글주소  수정/삭제  댓글쓰기

    저두 해봐는데 씁씁할더군요..엮은글 쏘고 갑니다 ^^;; 좋은밤되세요

  5. BlogIcon 세담 2009/02/26 17:48  댓글주소  수정/삭제  댓글쓰기

    ㅎㅎㅎ 트랙백 놓고 갑니다!!호아범님~~~
    재미로 기냥 봤습니다...ㅋ

2008/11/07 15:48

태터데스크 사용하면서 "주소/?page=XX" 링크 사용하기 IT 이야기/블로그 & HTML2008/11/07 15:48

기본적으로 티스토리에는 페이지의 개념이 있죠. 특정글의 링크를 타고 들어간 경우가 아니라면, 설정에서 정해둔 개수단위로 한 페이지가 구성되고, 가장 최근 페이지가 블로그 초기화면이 됩니다. 

이럴때 원하는 페이지를 직접들어가는 방법은 블로그 주소/?page=XX 입니다.

가령 본 블로그의 경우 http://www.crazybar.net/?page=1 이라고 하면 첫번째 페이지가 나오게 되는 거죠.

부수적으로 한 화면에 보이는 글의 개수를 1개로 설정한 경우에는 위 주소의 XX는 최근 글 부터의 인덱스로 볼수도 있습니다. 실제로 본 블로그도 이처럼 동작하는데, page=1 이면 최신글, page=10 이면 최근 10번째 글이 됩니다.


문제는 태터데스크를 적용하면 위 링크가 먹지 않습니다.

아마도, URL rewriting 규칙중 어딘가에서 충돌이 생기는 듯 한데, 태터데스크를 사용하는 블로그에서 위처럼 페이지를 지정해도, 그냥 블로그 초기화면으로 튕겨져 나가는 듯 합니다.


이걸 해결할 수 있는 방법은 블로그 주소/?page=XX 가 rewriting될 주소를 직접 입력하면 되겠죠.

그건 바로 index.php 입니다.

실제로, 블로그 주소/?page=XX 와 블로그 주소/index.php?page=XX 는 동일하게 동작합니다. 

본 블로그에서 태스트를 해 보면,  http://www.crazybar.net/?page=1  는  http://www.crazybar.net/ 로 튕겨지지만,  http://www.crazybar.net/index.php?page=1 는 정상적으로 첫 페이지가 나타납니다.


저작자 표시 비영리 변경 금지

'IT 이야기 > 블로그 & HTML' 카테고리의 다른 글

햅틱2 안에 블로그 있다 ?!  (2) 2009/01/07
내 블로그는... $3,387.24 짜리~  (10) 2008/11/10
태터데스크 사용하면서 "주소/?page=XX" 링크 사용하기  (3) 2008/11/07
RSS 부분공개에서 전체공개로... FeedBurner 사용중지...  (6) 2008/11/05
CSS - 내용을 가운데로 정렬하기 - margin-left/right: auto  (4) 2008/10/31
태터데스크 주무르기 : 썸네일 배치 ( 내용추가 )  (34) 2008/10/29
TAG index.php, page, page index, page 링크, 블로그, 태터데스크, 티스토리
Trackback (0) : Comment (3)
Posted by 호아범

TRACKBACK | http://www.crazybar.net/trackback/749 관련글 쓰기

댓글을 달아 주세요

  1. BlogIcon 함차 2008/11/10 17:23  댓글주소  수정/삭제  댓글쓰기

    태터툴즈 사용하시는 분이 많네요..겁이나서..아직 시도 못하고 있는데..이중 사이드바가 너무 인상적이네요

    • BlogIcon 호아범 2008/11/10 18:57  댓글주소  수정/삭제

      안녕하세요 반갑습니다.

      태터툴즈가 아니고 태터데스크 말씀하시는 것 맞죠? ^^
      뭐 겁날거 있습니까? 그냥 써 보는 거죠..

      그리고, 이중사이드바 기능은 티스토리 공식스킨에 있는 걸 가져다 쓴 거에요..

  2. BlogIcon LieBe 2008/12/05 20:09  댓글주소  수정/삭제  댓글쓰기

    아핫....포스트로 소개시켜주셧군요...
    오늘 또 주소 형식 써먹을 일이 있어서 생각하다가 호아범님 블로그가 생각나서 올만에 방문해서 보고 갑니다.^^

    저런 사소하지만 사소하지 않은 부분이 테터데스크 쓰는 분들 중에 막히는 분들이 많을텐데 대부분 포기를 하시거나 연구를 하시거나....뭐 대충....그렇게....ㅎ

    구글링해봐도 이런 정보는 안나오는데 행여나 저처럼 이거저거 해보려던 분들이 꼭 이 포스트로 도움 받았으면 하네요....^^

2008/11/05 19:15

RSS 부분공개에서 전체공개로... FeedBurner 사용중지... IT 이야기/블로그 & HTML2008/11/05 19:15

음, RSS로 등록해 두고 구독하는 도아의 세상 사는 이야기에 RSS에 관한 글이 하나 보였습니다. 사실, 그동안 별 주관 없이 유행따라서 운영했던 부분인데, 뭔가 생각하게 하는 글이더군요. 


우선, RSS 부분공개와 전체공개 문제는 사실 운영상에서 결정해야 하는 선택의 문제입니다. 처음에 별 상식없이 블로그를 쓸때는 당연히 RSS는 전체공개하는 걸로 알고 있었습니다. 그러다가, RSS로 구독하는 블로그의 수가 늘어가면서 어느날 네이버 블로그를 구독하게 되었는데, 글의 첫부분만 보이도록 되어있고, 나머지는 방문해서 보라더군요. 

음... 왠지 사이트로의 직접 방문을 유도하고 있다는 느낌이 들어 얄팍해 보이긴 했습니다만, 생각이 거기서 멈추는 것이 아니고, 이런 식으로 하면 블로그 방문자 수를 늘일수 있겠구나.. 하는 얍삽한 생각이 들더군요. 에궁... 그놈의 카운트가 뭐라고.. 암튼, 그래서, 저도 부분공개를 하기 시작했습니다. 

그러던 중... 앞서 언급한 도아님의 글을 보고 나서 곰곰히 생각해 보니, 왠지 블로고스피어라는 세계에 어울리지 않는 다는 생각을 하게 되었습니다. 사실, RSS의 목적에도 위배가 되는 것 같구요. 또, 억지로 방문을 유도하고 있다는 생각과 반대로 그걸로 인해 그 사이트를 더 보지 않게 될수도 있겠다는 생각도 들구요. 일종의 반발심이랄까? 

어쨌든, 생각이 이런 결론에 다다르자, 결국 오픈웹의 사상에 발맞춰 다시 전체 공개로 전환하기로 했습니다. ^^;


다음으로 FeedBurner로 Feed를 감싸는 문제인데요, 본 블로그의 경우 사실 정기 구독하시는 분들이 그리 많지 않기때문에, 도아님처럼 트래픽 같은게 신경쓰여서 FeedBurner를 이용한건 아니었구요. 다만, Feed 카운트 나오는 게 멋져보이더라구요. ㅋㅋ... 또, 언젠가 사용하고 있는 도메인을 버리게 되면 그때가서 Feed 주소를 버리는 것도 힘들지 않을까 하는 생각에서 FeedBurner를 사용해 오고 있었습니다.

하지만, 그로인해 버려지는 것들이 있긴 합니다. 일단, Feed의 업데이트가 느려지는 점을 들수 있지요. 사실 FeedBurner라는 것 자체가 일종의 RSS리더이고 보니, 주기적으로 정보를 갱신하고, 그걸 바탕으로 재가공을 하는 거니까, 당연한 거겟죠. 

또 하나, RSS로 몰려드는 트래픽을 알기가 어렵다는 문제가 있습니다. 일단 한번 더 거치게 되니까, FeedBurner의 트래픽을 조사하지 않는 한 정확한 수치를 얻기는 불가능한 일입니다. 

그래서, 이번 기회에 FeedBurner도 버리기로 했습니다. 뭐 있는 계정을 지워서 그쪽으로 구독이 불가능하게 하겠다는 건 아니구요. 스킨에 적혀있는 주소를 원복 시키겠다는 거죠. ^^ 사실, 블로깅을 그만둘때까지 도메인을 버릴 일도 없을것 같구요. 훟훟~


지금부터 본 블로그 RSS Feed의 공식 주소는 http://www.crazybar.net/rss 가 되겠습니다. 그리고, Feed의 내용은 전체공개로 발행됩니다. 땅! 땅! 땅!

저작자 표시 비영리 변경 금지

'IT 이야기 > 블로그 & HTML' 카테고리의 다른 글

내 블로그는... $3,387.24 짜리~  (10) 2008/11/10
태터데스크 사용하면서 "주소/?page=XX" 링크 사용하기  (3) 2008/11/07
RSS 부분공개에서 전체공개로... FeedBurner 사용중지...  (6) 2008/11/05
CSS - 내용을 가운데로 정렬하기 - margin-left/right: auto  (4) 2008/10/31
태터데스크 주무르기 : 썸네일 배치 ( 내용추가 )  (34) 2008/10/29
태터데스크에 새글 아이콘 달기  (18) 2008/10/29
TAG FEED, feedburner, RSS, 부분공개, 블로그, 전체공개
Trackback (3) : Comment (6)
Posted by 호아범

TRACKBACK | http://www.crazybar.net/trackback/746 관련글 쓰기

  1. SUBJECT RSS를 부분 공개에서 전체 공개로 바꾼 결과

    2008/11/06 15:37 TRACKED FROM 도아의 세상사는 이야기  삭제

    블로그스피어에서 RSS 피드의 부분 공개와 전체 공개는 상당히 해묵은 논쟁이다. 아울러 결론이 없는 논쟁이기도 하다. 필자는 전체 공개와 부분 공개의 문제는 각자의 취향 또는 블로거와 방문자의 소통으로 문제로 본다. 그러나 이런 논쟁이 발생하는 이유는 상당수 사람들이 이 문제를 옳다, 그르다의 문제로 바라 보기 때문이다. 더 심해지면 RSS가 블로그의 정신이며, RSS는 전체 공개를 전제로 한 것이기 때문에 부분 공개는 블로그의 정신에 위배된다는...

  2. SUBJECT 블로그 RSS 전체공개가 좋을까 부분공개가 좋을까

    2009/05/05 09:12 TRACKED FROM 블로거팁 닷컴  삭제

    RSS를 통해 블로그 혹은 뉴스 사이트의 글을 직접 방문하지 않고도 볼수있어 매우 편리합니다. 사람들은 이제 블로그에 직접 방문하지 않고 웹기반 RSS리더 혹은 설치형(데스크탑)리더를 통해 자신이 원하는 블로그의 글을 취합니다. 그래서 RSS 구독자수는 특정 블로그의 신뢰도와 인기를 나타내는 지표로 여겨지고 있습니다. 많은 블로거들이 RSS 구독자 늘리기에 열을 올리고 있는 이유이기도 하고요. 블로거팁닷컴은 RSS를 전체공개해 두었지만 그렇다고 해서..

  3. SUBJECT 포털 블로그는 진짜 블로그일까?

    2009/06/12 17:57 TRACKED FROM 작은 달팽이집속 바다.  삭제

    내가 개인적으로 한RSS로 구독하는 블로그들 중에서 네이버에 자리를 잡은 블로그는 두개다. 카부터 님의 CRAZY 콜렉터의 보금자리 크라이프 님의 크라이프의 게임이야기 두개 다 게임 관련 블로그인데. 둘 다 RSS가 부분공개로 되어 있다. 난 그냥 저 두분이 RSS를 부분 공개로 설정해 두신 줄 알았다. 그런데 아까 커피 마시다가 퍼뜩 생각이 나서 쓰지도 않는 네이버 블로그에 한번 로그인을 해 봤다. ... RSS를 부분공개인지, 전체공개인지 설정하..

댓글을 달아 주세요

  1. BlogIcon 도아 2008/11/05 19:38  댓글주소  수정/삭제  댓글쓰기

    전체 공개와 부분 공개의 방문자 수의 차이는 별로 없습니다. 그 이유는 어차피 올사람은 다오고 오지 않을 사람은 오지 않기 때문입니다. 이중 극히 일부가 전부냐 부분이냐에 따라 오고 말고가 결정되기 때문에 큰 차이는 없습니다. 다만 부분 공개보다는 전체 공개를 좋아하기 때문에 전체 공개를 하는 것이 구독자 확보에는 조금 더 유리합니다.

    • BlogIcon 호아범 2008/11/05 20:01  댓글주소  수정/삭제

      앗~ 반갑습니다.
      도아님 말씀데로, 이걸 통해 방문자를 늘이겠다는 의도는 없구요...
      제 경험상, 부분공개로 된 글의 경우 더 보고 싶은데 링크를 눌러서 가는 것이 싫어서 그냥 글읽기를 포기하는 경우도 생기더라구요.
      그러면서 든 생각이 제 스스로도 전체공개를 더 좋아하는 구나.. 하는 것이었습니다.
      어쨋든, 잘 정리된 도아님 글 덕택에 제 정책도 정리가 되어서 기분이 좋습니다.
      방문 감사드립니다. ^^

  2. BlogIcon monopiece 2008/11/05 21:00  댓글주소  수정/삭제  댓글쓰기

    좋은 선택을 하신 것 같습니다. 저는 좀 더 지켜 볼 생각입니다. 아직 초보이기에..^^

    • BlogIcon 호아범 2008/11/05 21:13  댓글주소  수정/삭제

      안녕하세요..
      어차피 "내"가 운영하는 것인 만큼, 선택을 서두를 필요는 없는 것 같습니다.
      어차피 결국은 취향문제이니깐요.. ^^

  3. BlogIcon 레인레테 2009/06/12 17:59  댓글주소  수정/삭제  댓글쓰기

    호아범님 안녕하세요.

    블로그 스피어에서 한참 논의가 있었던 때는 제가 이걸 전혀 몰랐네요;;

    오늘 갑자기 관심이 생겨서 관련 포스팅을 트랙백 걸어뒀습니다.

    즐거운 하루 되세요 ^^

    • BlogIcon 호아범 2009/06/17 13:47  댓글주소  수정/삭제

      이게 뭐 호불호가 있는 문제라서 정답은 없는 것 같습니다.
      다만, 저 역시 RSS리더를 이용하는 입장에서 부분공개된 글은 넘 불편하더라구요.
      그래서 그냥 이런 결정을 내렸더랬습니다. ^^

2008/10/31 14:47

CSS - 내용을 가운데로 정렬하기 - margin-left/right: auto IT 이야기/블로그 & HTML2008/10/31 14:47

요사이는 와이드형 모니터를 많이들 사용합니다. 그래서인지, 왼쪽 정렬된 홈페이지나 블로그를 보면 왠지 반대쪽에 남는 공간이 넘 횡해서 쓸쓸(?)한 느낌이 들죠.

반면 본 블로그를 포함하여 많은 웹페이지에서 내용을 가운데에 잘 맞춰서 보여줍니다. 이를 하기 위한, 알고나면 너무나 아무것도 아니지만, 모르면 답답할 수 있는 아주아주 기본적인 팁 하나 올려봅니다.

먼저 웹페이지의 여백이 어떤식으로 적용되는지 간단한 그림을 하나 보도록 하겠습니다.

위 그림은 W3C에서 가져온 것입니다. 

CSS Style을 작성할때, margin이라는 속성을 주게 되는데, 이는 대상의 바깥쪽 여백의 너비를 나타냅니다. 적용하는 방법은 아래와 같습니다. 참고로 안쪽여백은 padding으로 표현하고 값을 설정하는 형식은 margin과 동일합니다. 

  • margin: <all> 
  • margin: <top-bottom> <left-right>
  • margin: <top> <left-right> <bottom>
  • margin: <top> <right> <bottom> <left>

이 외에도 margin-top, margin-bottom, margin-right, margin-left 등을 이용하여 각각의 여백을 따로 따로 지정할 수도 있습니다. 위에서 <all> 을 포함한 각 값은 px, pt, em, % 등을 이용하여 해당되는 쪽의 바깥여백의 너비를 나타내는 표현이 들어가게 되죠. 

이중, margin-left/right 에 실제 숫자값이 아닌 auto라는 값을 주면 왼쪽과 오른쪽의 너비를 동일하게 하겠다는 뜻이 되는데, 이를 이용하면 아주 손쉽게 애초의 목적을 달성할 수 있는 것이죠.

다음은 W3C의 스펙문서에 나온 원문내용입니다. 

If both 'margin-left' and 'margin-right' are 'auto', their used values are equal. This horizontally centers the element with respect to the edges of the containing block. 


만약 원래 표현하고자 하는 내용이 <!-- 원래내용 --> 였다면, 기존 내용을 건드리지 않기 위해 wrapper를 하나 두어서 다음과 같이 표현할 수 있겠죠.

<div style="margin:0 auto; padding:0;">
    <!-- 원래 내용 -->
</div>

여기서, margin:0 auto; 는 위아래 여백은 0으로 하고 좌우여백은 동일하게 한다는 뜻이고, padding:0; 은 안쪽여백을 모든 방향에서 0으로 하겠다는 뜻이 됩니다. 

전체 레이아웃 뿐만 아니라 내부에 포함된 각 요소에도 잘 적용이 되는 사항이니, 머릿속에 넣어주면 편안하게 이용할 수 있으리라 생각됩니다. 예를 들어, 흔히, DIV 같은 요소 자체를 중앙정렬 하려고 할때 부모요소에 text-align 같은걸 써봐도 잘 안되는데, 그럴때에 요 기능을 이용하면 해결이 되는 거죠. 아래 예를 참고하세요..


현재 이 부분은
<div style="margin:0 auto; padding:0; width:400px; border:1px solid #bbbbbb;"> ~ </div>
로 되어있습니다.



저작자 표시 비영리 변경 금지

'IT 이야기 > 블로그 & HTML' 카테고리의 다른 글

태터데스크 사용하면서 "주소/?page=XX" 링크 사용하기  (3) 2008/11/07
RSS 부분공개에서 전체공개로... FeedBurner 사용중지...  (6) 2008/11/05
CSS - 내용을 가운데로 정렬하기 - margin-left/right: auto  (4) 2008/10/31
태터데스크 주무르기 : 썸네일 배치 ( 내용추가 )  (34) 2008/10/29
태터데스크에 새글 아이콘 달기  (18) 2008/10/29
블로그 가치평가 by 블로그얌(Blogyam)  (6) 2008/10/28
TAG auto, Center, CSS, IT, margin, margin-left, margin-right, style, text-align, 블로그, 스킨, 스타일, 여백, 웹, 정렬, 좌우정렬, 중앙정렬
Trackback (1) : Comment (4)
Posted by 호아범

TRACKBACK | http://www.crazybar.net/trackback/731 관련글 쓰기

  1. SUBJECT div(영역) 가운데 정렬

    2010/01/31 16:35 TRACKED FROM 본격 삽질하는  삭제

    그 동안 DIV 영역은 left 값으로 밀고, margin-left로 당겨서 가운데 정렬하는 방법을 사용해왔다. 별 탈 없이 사용해왔기 때문에 무슨 문제가 있거나 한줄은 몰랐고, 덕분에 꽤 오랫동안 문제를 방치했다. 정상적으로 작동하는 모습 창이 위와 같이 박스의 크기보다 큰 경우엔 정상적으로보여지지만.. 창의 가로

댓글을 달아 주세요

  1. BlogIcon Guju 2009/07/16 12:31  댓글주소  수정/삭제  댓글쓰기

    좋은 글 잘 보고 갑니다 ^____^
    질문 하나. Firefox에서는 잘 보이는데, IE에서는 좌측으로 정렬되는 현상이 발생하는데요. 이럴 땐 어떻게 해결하죠?

    • BlogIcon 호아범 2009/07/21 19:29  댓글주소  수정/삭제

      이게 눈으로 보고 직접 만져보기 전에는 뭐라 말씀드리기가 어렵네요. 저도 문제가 생기면 메뉴얼보고 해결하는 터라.. -_-;;
      답을 드리지 못해 죄송합니다.

  2. BlogIcon 이X 2010/01/31 16:37  댓글주소  수정/삭제  댓글쓰기

    좋은 정보 감사합니다. ^^ 블로그에서 관련글을 쓰고 트랙백했습니다.

    Guju// HTML 문서 속성을 지정하지 않으셨다면, 지정 후 확인해보시면 정상적으로 나타나리라 생각합니다.

2008/10/29 22:08

태터데스크 주무르기 : 썸네일 배치 ( 내용추가 ) IT 이야기/블로그 & HTML2008/10/29 22:08

믹시에 등록도 할 겸 해서 글을 약간 다듬어 개시 시각을 갱신힙니다.


태터데스크.. 잘하면 이쁜 초기화면을 만들수 있는데, 사용하기는 그리 녹녹치가 않습니다. 특히 썸네일 관련 부분을 보고 있노라면 좀 짜증이 납니다. 자동으로 생성되서 넘어오는 html에 테이블을 사용해놨기 때문에 순수한 디자인 만으론 모양을 맘데로 주무를 수가 없지요. (기본적으로 이미지가 잘리거나 불필요한 공백이 생기게 됩니다.)

결국 넘어오는 html을 받아서 재가공을 하기로 결정했습니다. 단순하게 생각해서, 1. 소스를 받는다. 2 필요한 부분만 잘라낸다. 3. 다시 쓴다. 뭐 이런 절차가 되겠네요.

원하는 디자인은 이미지는 주어진 영역의 오른쪽에 붙어주고, 내용은 나머지 부분에 여백없이 자연스럽게 배치되는 것입니다.

태터데스크에서 반복되는 아이템은 <s_list>~</s_list> 의 html에 영향을 받습니다. 따라서 수정하는 부분 역시 이부분에 삽입하면 되겠습니다.

소스

<script type="text/javascript" language="javascript">
    str = String('[ ##_item_thumbnail_## ]');
    result = str.match(/<img[^>]*src=\"([^\"]*)\"[^>]*alt=\"([^\"]*)\"[^>]*>/i);
    imgSrc = result[1];
    imgAlt = result[2];
   
    if(imgSrc .lastIndexOf('imgempty.png') < 0) {
        document.write('<div class="TD_thumbimg">');
        document.write('<a href="[ ##_item_link_## ]"><img src="' + imgSrc + '" alt="' +imgAlt+ '"></a>');
        document.write('</div>');
    }
</script>

위 소스를 [## _item_thumbnail_ ## ]에 치환 시켜줍니다. 이렇게 해 주면 웹페이지가 브라우져에 보여지는 순간에 위 스크립트에 의해 다시 만들어진 html (위 소스에서 document.write 부분) 만 화면에 보여지게 됩니다. 

추가로, 이미지가 없을때 보여지는 기본 이미지(imgempty.png)는 아예 보여지지 않도록 바꾸었습니다. (_item_thumbnail_ 앞뒤 여백은 실제로는 없습니다. )


스타일

그리고, 영향을 받는 아이템의 스타일은 다음과 같습니다.

.TD_thumbimg {
    float:right;
    margin: 5px;
    padding:0;
}

.TD_thumbimg img{
    max-width: 160px;
    max-height: 160px;
    width: 160px;
    border: 1px solid #ccc;
    margin:0;
    padding:3px;
}

이미지 부분이 오른쪽에 붙도록 하기 위해 TD_thumbimg 클래스를 이용하였고, 내부에 자리 잡는 img에 대해서 max-width와 max-height를 이용하여 크기를 제어하였습니다. 참고로 max-width와 max-height는 익스플로러6.0에서는 올바르게 동작하지 않습니다. 이 경우 단순히 width만 설정되게 됩니다.


결과

사용자 삽입 이미지


의도했던 데로 잘 나왔네요. 익스플로러7.0, 파이어폭스, 크롬에서는 정상동작합니다.



(추가내용)

사진이 없을 때 아예 표시하지 않는게 아니라, 기본 이미지를 다른 걸로 바꾸어서 적용하는 법에 관해 물어보시는 분이 계셔서 아래 내용을 추가 하였습니다. 

소스 - 기본이미지를 바꿔서 적용하는 법

<script type="text/javascript" language="javascript">
    str = String('[ ##_item_thumbnail_## ]');
    result = str.match(/<img[^>]*src=\"([^\"]*)\"[^>]*alt=\"([^\"]*)\"[^>]*>/i);
    imgSrc = result[1];
    imgAlt = result[2];
    
    if(imgSrc .lastIndexOf('imgempty.png') >= 0) {
        imgSrc = "바꾸고 싶은 기본이미지 URL";
    }

    document.write('<div class="TD_thumbimg">');
    document.write('<a href=""><img src="' + imgSrc + '" alt="' +imgAlt+ '"></a>');
    document.write('</div>');
</script>

적당한 이미지를 스킨의 images 디렉토리에 업로드한 후에 해당 이미지의 절대주소를 이용하면 되겠습니다. 이미지의 절대주소는 사용하고 있는 스킨의 임의의 이미지의 속성을 참조해서 작성하면 됩니다.


'IT 이야기 > 블로그 & HTML' 카테고리의 다른 글

RSS 부분공개에서 전체공개로... FeedBurner 사용중지...  (6) 2008/11/05
CSS - 내용을 가운데로 정렬하기 - margin-left/right: auto  (4) 2008/10/31
태터데스크 주무르기 : 썸네일 배치 ( 내용추가 )  (34) 2008/10/29
태터데스크에 새글 아이콘 달기  (18) 2008/10/29
블로그 가치평가 by 블로그얌(Blogyam)  (6) 2008/10/28
Exif 정보출력 - 카테고리, 태그 단위로 표시여부 제어하기  (2) 2008/10/22
TAG max-height, max-width, Tistory, 블로그, 썸네일, 태터데스크, 티스토리
Trackback (1) : Comment (34)
Posted by 호아범

TRACKBACK | http://www.crazybar.net/trackback/512 관련글 쓰기

  1. SUBJECT 테터데스크 썸네일 수정 방법

    2008/07/22 21:41 TRACKED FROM Dream in dream  삭제

    이미지가 없을때 썸네일을 아예 안보이게 해보려고 하다가... 검색해보니 있네요. 잘 만들어 놓으셨네요. 트랙백으로 원본 걸어놓을께요. 썸네일 목록형 선택후에 HTML 수정 이 내용을... 이내용으로 교체 스타일 수정에 추가 .TD_thumbimg { float:right; margin: 5px; padding:0; } .TD_thumbimg img{ max-width: 160px; max-height: 160px; width: 160px; borde..

댓글을 달아 주세요

  1. BlogIcon Luxury Q. 2008/05/28 00:44  댓글주소  수정/삭제  댓글쓰기

    치환이라는게 무슨 뜻이죠??

    아래 스타일은 어디에 넣어야 하나요??

    고맙습니다~~^^

    • BlogIcon 호아범 2008/05/28 10:11  댓글주소  수정/삭제

      안녕하세요.
      바꿔치기 하라는 말입니다.
      원래 들어있던 [ ##_item_thumbnail_## ] 를 지우고 대신 본문의 소스부분을 삽입하시면 됩니다.

  2. BlogIcon Luxury Q. 2008/05/28 01:07  댓글주소  수정/삭제  댓글쓰기

    그리고 imgempty.png를 다른 사진으로 바꾸는 건 못하나요??

    • BlogIcon 호아범 2008/05/28 10:12  댓글주소  수정/삭제

      당연히 가능하죠...
      제가 테스트해보진 않았지만, 내용이 좀 길어질 듯 하니 본문에 삽입해 놓겠습니다.

  3. BlogIcon Luxury Q. 2008/05/28 20:52  댓글주소  수정/삭제  댓글쓰기

    제 블로그 와 보시면..

    왜 안되는지..

    ㅠㅠ

  4. BlogIcon Luxury Q. 2008/05/29 13:10  댓글주소  수정/삭제  댓글쓰기

    <div class="TD_recent">
    <s_more>
    <div class="TD_more">
    <div class="TD_more_title"><a href=""></a></div>
    <span class="TD_more_btn"><a href="">더보기</a></span> </div>
    </s_more>
    </div>
    <div class="TD_recent">
    <s_list>
    <div class="TD_thumblist">
    <div class="TD_thumbimg"><script type="text/javascript" language="javascript">
    str = String('');
    result = str.match(/<img[^>]*src=\"([^\"]*)\"[^>]*alt=\"([^\"]*)\"[^>]*>/i);
    imgSrc = result[1];
    imgAlt = result[2];

    if(imgSrc .lastIndexOf('imgempty.png') < 0) {
    document.write('<div class="TD_thumbimg">');
    document.write('<a href=""><img src="' + imgSrc + '" alt="' +imgAlt+ '"></a>');
    document.write('</div>');
    }
    </script></div>
    <div class="TD_headline">
    <a href=""></a> <span class="TD_date"> </span>
    </div>
    <div class="TD_summary"><p></p></div>
    </div>
    </s_list>
    </div>

    이렇게 적용했고 스타일도 제대로 먹혔는데..

    무엇이 잘못되었는지 좀 알려주세요.. :(

    • BlogIcon 호아범 2008/05/29 14:06  댓글주소  수정/삭제

      치환자가 적용이 안되었습니다.
      적용하신 코드에서 중간에 보시면 str=String('') 부분이 있습니다.
      '' 사이에 [ ##_item_thumbnail_## ] 넣으세요...
      이때 [ 다음과 ] 직전 공백 삭제하시구요.
      우선 이렇게 함 해보세요..

  5. BlogIcon Luxury Q. 2008/05/29 15:55  댓글주소  수정/삭제  댓글쓰기

    사진이 뜨긴 하는데..

    그런데 왼쪽 여백에 글이 안 차네요..

    • BlogIcon 호아범 2008/05/29 17:35  댓글주소  수정/삭제

      위 소스와 같게 되있죠?
      혹시 <div class="TD_summary">.... 부분에서 <p>랑 </p> 빼 보시겠어요?
      그리고, 스타일에서 TD_summary 부분 에 float 부분은 지우세요.
      적용하셔서 확인해 보세요.

  6. BlogIcon Luxury Q. 2008/05/29 16:24  댓글주소  수정/삭제  댓글쓰기

    그리고 태그는 또 어떻게 하셧는지..

    대단하세요~

    전 세계에 이 방법이 소개된 블로그는 여기밖에 없어서..

    • BlogIcon 호아범 2008/05/29 17:31  댓글주소  수정/삭제

      제 블로그 설정에서 태그부분은 아래와 같습니다.
      --
      Tag: < s_taglist >[ ##_tag_## ]< /s_taglist >
      --
      중간중간 삽입된 공백은 지우셔야 합니다.

      또 궁금한거 있으면 물어보세요.. ^^

  7. BlogIcon Luxury Q. 2008/05/29 17:43  댓글주소  수정/삭제  댓글쓰기

    지워도 달라지는 게 없네요 ㅠㅠ

    그리고 TD_Summary 부분에 float 는 있지도 않고..

    ㅠㅠ 넘어야 할 산이..

  8. BlogIcon Luxury Q. 2008/05/29 17:52  댓글주소  수정/삭제  댓글쓰기

    <div class="TD_recent">
    <s_more>
    <div class="TD_more">
    <div class="TD_more_title"><a href=""></a></div>
    <span class="TD_more_btn"><a href="">더보기</a></span> </div>
    </s_more>
    </div>
    <div class="TD_recent">
    <s_list>
    <FONT face="'Gulim', 'Sans-serif'">
    <div class="TD_thumblist">

    <div class="TD_headline">
    <a href=""></a>
    </div>
    <div class="TD_thumbimg"><script type="text/javascript" language="javascript">
    str = String('');
    result = str.match(/<img[^>]*src=\"([^\"]*)\"[^>]*alt=\"([^\"]*)\"[^>]*>/i);
    imgSrc = result[1];
    imgAlt = result[2];

    if(imgSrc .lastIndexOf('imgempty.png') < 0) {
    document.write('<div class="TD_thumbimg">');
    document.write('<a href=""><img src="' + imgSrc + '" alt="' +imgAlt+ '"></a>');
    document.write('</div>');
    }
    </script></div>
    <div class="TD_summary"><span class="TD_date"> ()<br /><br />Tag: <s_taglist></s_taglist></span></div>
    </div>
    </font>
    </s_list>
    </div>

    아래는 스타일


    #TD_content p{
    padding:0;
    margin:0;
    }
    .TD_headline {
    font-size:1.2em;
    font-weight:bold;
    padding:0;
    }
    .TD_subtitle{
    font-weight:bold;
    color:#999;
    }
    .TD_date {
    color:#999;
    font:0.9em verdana;
    }
    .TD_category {
    margin-left:2px;
    }
    .TD_category a{
    color:#999;
    }
    .TD_name {
    font-weight:nomal;
    }
    .TD_tagbox{
    padding:5px 0;
    }
    .TD_tagbox .TD_tagtitle{
    background:url(../image/ico_tag.gif) no-repeat;
    width:30px;
    height:14px;
    float:left;
    }
    .TD_tagbox .TD_tagtitle span{
    display:none;
    }


    /* 헤드라인형 모듈 */
    .TD_toparticle {
    padding:5px 0 10px 0;
    margin:5px 10px 5px 5px;
    }
    .TD_toparticle .TD_titleinfo{
    background:url(../image/ico_gallery_title.gif) 0 2px no-repeat;
    padding-left:50px;
    }
    .TD_titleinfo {
    padding-bottom:5px;
    }
    .TD_toparticle .TD_tblist {
    display:none;
    }
    .TD_toparticle .TD_tagbox {
    display:none;
    }
    .TD_toparticle .TD_summary{
    background-color:#eee;
    padding:20px 10px;
    color:#999;
    }
    .TD_toparticle .TD_summary p{
    margin:0 10px;
    }
    .TD_toparticle .TD_summary img {
    margin-bottom:10px;
    }


    /* 섬네일 목록형 모듈 */
    .TD_thumblist{
    padding:5px 0;
    margin:5px 5px 10px 10px;
    }
    .TD_thumblist p{
    padding:0;
    margin:0;
    letter-spacing:-1px;
    }
    .TD_thumblist .TD_headline {
    font-size:1.1em;
    font-weight:bold;
    padding:0 0 0 10px;
    text-align:center;
    }
    .TD_thumblist .TD_summary{
    padding:0;
    text-align:center;
    }
    .TD_thumblist .TD_thumbnail{
    border:3px solid #eee;
    }

    /* 텍스트 목록형 모듈 */
    .TD_list{
    margin:5px;
    }
    .TD_list .TD_headline {
    padding:0 0 0 20px;
    font-size:1.2em;
    line-height:1.2em;
    background:url(../image/bull_listbig.gif) 0 2px no-repeat;
    }
    .TD_list .TD_date {
    margin-left:5px;
    font-weight:normal;
    font-size:0.75em;
    }
    .TD_list .TD_summary {
    display:none;
    }


    /* 앨범형 모듈 */
    .TD_album{
    margin:5px;
    padding: 0 5px 5px 10px;
    }
    .TD_album img {
    margin:0 10px 0 0;
    }

    .TD_album .TD_thumbimg .TD_thumbnail{
    border:5px solid #eee;
    }

    .TD_album .TD_headline {
    padding:0 5px 5px 0;
    margin:0;
    font-size:1.1em;
    line-height:1.2em;
    text-align:center;
    }




    /* 최신글 공통 */
    .TD_recent .TD_thumbnail{
    border:none;
    }

    /* 최신글의 더보기 */
    .TD_more{
    text-align:right;
    padding:5px 5px 7px 5px;
    margin:10px 5px;
    color:#333;
    border:1px solid #ddd;
    background-color:#f5f5f5;
    }

    * html .TD_more{height:20px;}

    .TD_more_title{
    font-weight:bold;
    float:left;
    font-size:1.2em;
    background:url(../image/ico_recent_title.gif) 0 0 no-repeat;
    padding:0 0 0 25px;
    }
    .TD_more_btn{
    font:0.9em dotum;
    }


    /* 최신글 텍스트 목록형 */
    .TD_recent{
    }
    .TD_recent .TD_headline {
    color:#000;
    font-weight:normal;
    padding:0;
    font-size:1em;
    }
    .TD_recent .TD_list .TD_headline {
    background:none;
    }
    .TD_recent .TD_list{
    margin:5px;
    background:url(../image/bull_rect.gif) 6px 9px no-repeat;
    padding:3px 0 0 16px;
    }

    /* 최신글 섬네일 목록형 */
    .TD_recent .TD_thumblist{
    margin:10px;
    border: 2px solid #F5F5F5;
    border-left-width: 8px;
    min-height: 170px;
    }

    .TD_recent .TD_thumblist .TD_headline{
    clear:both;
    font-weight:bold;
    color:#000;
    text-align:center;
    }
    .TD_recent .TD_thumblist .TD_summary{
    padding:0;
    text-align:center;
    }
    .TD_recent .TD_thumblist .TD_thumbnail{
    border:5px solid #eee;
    background-color:#eee;
    text-align:center;
    padding:0px;
    }

    .TD_thumbimg {
    float:right;
    margin: 5px;
    padding:0;
    }

    .TD_thumbimg img{
    max-width: 160px;
    max-height: 160px;
    width: 160px;
    border: 1px solid #ccc;
    margin:0;
    padding:3px;
    }


    /* 최신글 앨범형 */
    .TD_recent .TD_album {
    padding:0px;
    margin:0 0 10px 0;
    overflow:hidden;
    text-align:center;
    }
    .TD_recent .TD_album .TD_thumbimg{
    border:0;
    padding:0;
    margin:0 auto;
    }

    .TD_recent .TD_album .TD_headline {
    height:14px;
    overflow:hidden;
    padding-top:4px;
    }

    /* 슬라이드형 */
    .TD_slide{
    margin:2px;
    padding:0;
    float:left;
    }

    .TD_slide .TD_thumbnail{
    margin:0;
    padding:0;
    border:5px solid #eee;
    }
    .TD_slide img{
    margin:0;
    padding:0;
    }


    고맙습니다~

    • BlogIcon 호아범 2008/05/29 18:02  댓글주소  수정/삭제

      일단 소스에서 <script> ~ </script> 앞 뒤의 <div>와 </div> 는 지우셔도 됩니다. 중복되거든요.

      그리고, TD_summary 스타일에서 align 빼보실래요?

      그리고, 스타일에서 중복으로 정의된 부분이 없는지 잘 살펴보세요...

  9. BlogIcon Luxury Q. 2008/05/29 18:13  댓글주소  수정/삭제  댓글쓰기

    품하핫핫핫!!

    성공했습니다..

    앞으로 자주 찾아 뵐께요~~^^

  10. BlogIcon Luxury Q. 2008/05/30 00:47  댓글주소  수정/삭제  댓글쓰기

    요번에는.. 기본이미지를 바꿔서 적용하는 법 이 말썽이군요

    설정하면 죄다 엑박으로 떠요 사진들이.. ㅠㅠ

    • BlogIcon 호아범 2008/05/30 09:53  댓글주소  수정/삭제

      아마 기본 이미지에 대한 URL이 잘못되었을 가능성이 큽니다. 자신의 블로그의 스킨에 올렸다고 해서 블로그 주소로 시작하지 않습니다. 요부분 잘 살펴보세요...

  11. BlogIcon Luxury Q. 2008/05/30 10:10  댓글주소  수정/삭제  댓글쓰기

    요번에는 이미지가 뜨긴 하는데 모든 이미지가 제가 설정한 놈으로 나오고..

    이미지가 없는 건 기본 이미지로 떠 버리네요.. ㅠㅠ

    • BlogIcon 호아범 2008/05/30 10:28  댓글주소  수정/삭제

      확인해 보니 제가 나중에 올려드린 부분에 버그가 있네요...

      if(imgSrc .lastIndexOf('imgempty.png') < 0) {
      imgSrc = "바꾸고 싶은 기본이미지 URL";
      }
      를
      if(imgSrc .lastIndexOf('imgempty.png') >= 0) {
      imgSrc = "바꾸고 싶은 기본이미지 URL";
      }

      로 바꾸세요

  12. 한큐 2008/07/10 14:53  댓글주소  수정/삭제  댓글쓰기

    max-width max-height 이 설정을 ie6 에서도 가능하게는 안되나요.?
    아님 다른 방법이라도. 초보라 도저히 모르겠네요..

    • BlogIcon 호아범 2008/07/10 17:06  댓글주소  수정/삭제

      글쎄요.. 방법이 없습니다.
      저같은 경우는 JavaScript로 사용중인 브라우져를 알아낸 다음에 IE6이하인 경우에는 별도의 스타일이 적용되도록 했습니다.

    • BlogIcon 호아범 2008/07/10 17:10  댓글주소  수정/삭제

      참고로 제가 사용하는 JavaScript 구문입니다.

      isStandard = true;
      if(navigator.appName == "Microsoft Internet Explorer" ) {
      IEver = navigator.appVersion.match(/MSIE \d+.\d+/)[0].split(" " )[1];

      if(IEver < 7) { isStandard = false; }
      }

      이 코드를 시작부분에 삽입한 후에, 별도 처리가 필요한 부분에선 isStandard값을 이용해서 구분이 가능합니다.

  13. 섬니 2008/09/23 12:42  댓글주소  수정/삭제  댓글쓰기

    혹시 태터데스크에 공지사항만 뜨게는 못할까요?
    고수님이신거 같아 질문드려요 ㅜㅜ 포럼에 물어봐도 대답이 없고...
    공지 최신글이 뜨게 했으면 좋겠는데 너무 어려워요... 부탁합니당 꾸벅

    • BlogIcon 호아범 2008/09/23 13:34  댓글주소  수정/삭제

      잠깐 살펴봤는데요.
      제 경우는 일단 가져온 데이터를 가공하는 건 해봤어도,
      이건 태터데스크에서 제공해 주지 않는 정보를 가져와야 하는 거라서 쉽지 않을거 같네요.
      꽁수를 쓰자면, 공지사항이라는 카테고리를 만들어서 그걸 보여주는 거 정도 생각이 나긴 하는데, 잘은 모르겠네요.
      도움 드리지 못해 죄송합니다.

  14. 섬니 2008/09/23 18:38  댓글주소  수정/삭제  댓글쓰기

    아... 그렇군요 ㅜㅠ
    오히려 결론 내주시니 맘이 편하네요.
    계속 붙잡고 고민했는데 원래 안되는거였다니... ^^;
    암튼 감사합니다~

    • BlogIcon 호아범 2008/09/23 19:16  댓글주소  수정/삭제

      제가 아는 선에서 말씀드린거라 부정확 할수도 있어요 ^^
      또 궁금한거 있으면 말씀하세요. 아는데까진 말씀드리겠습니다.

  15. BlogIcon 2FeRed 2009/01/16 10:24  댓글주소  수정/삭제  댓글쓰기

    안녕하신지요.^^

    태터데스크 섬네일 수정해보았는데 글이 왼쪽에 정렬되지 않아서 질문드립니다.

    다른 분의 질문도 읽어보고 거의 하루종일 따라해봤는데 이미지는 오른쪽에 원하는 크기로 정렬이 되는데

    글은 이미지 하단 중앙에 배치됩니다. ㅜ.ㅜ;

    시간되시면 코드에러좀 잡아주시면 감사드리겠습니다.^^ 좋은 하루 보내십시요.^^

    <div class="TD_recent">
    <s_more>
    <div class="TD_more">
    <div class="TD_more_title"><a href=""></a></div>
    <span class="TD_more_btn"><a href="">더보기</a></span> </div>
    </s_more>
    </div>
    <div class="TD_recent">
    <s_list>
    <div class="TD_thumblist">
    <SCRIPT language=javascript type=text/javascript>
    str = String('')
    result = str.match(/<img[^>]*src=\"([^\"]*)\"[^>]*alt=\"([^\"]*)\"[^>]*>/i);
    imgSrc = result[1];
    imgAlt = result[2];

    if(imgSrc.lastIndexOf('imgempty.png') < 0) {
    document.write('<div class="TD_thumbimg">');
    document.write('<a href=""><img src="' + imgSrc + '" alt="' + imgAlt + '"></a>');
    document.write('</div>');
    }
    </SCRIPT>
    <div class="TD_headline">
    <a href=""></a> <span class="TD_date"> </span>
    </div>
    <div class="TD_summary"><p></p></div>
    </div>
    </s_list>
    </div>

    스타일 CSS

    .TD_thumbimg {
    float:right;
    margin: 5px;
    padding:0;
    }

    .TD_thumbimg img{
    max-width: 100px;
    max-height: 100px;
    width: 100px;
    border: 1px solid #ccc;
    margin:0;
    padding:3px;
    }
    .TD_recent .TD_thumblist{
    overflow:hidden;
    margin:0px;
    padding:5px;
    }

    .TD_recent .TD_thumblist .TD_headline{
    clear:both;
    font-weight:bold;
    color:#000;
    text-align:center;
    }
    .TD_recent .TD_thumblist .TD_summary{
    padding:0;
    text:center;
    }
    .TD_recent .TD_thumblist .TD_thumbnail{
    border:5px solid #eee;
    background-color:#eee;
    padding:0px;
    text-align:center;
    }

    그럼 잘 부탁드리겠습니다.^^

    • BlogIcon 호아범 2009/01/16 11:15  댓글주소  수정/삭제

      안녕하세요
      올려주신 코드 상으로는 정렬하는 부분이 없네요.

      제목과 시간은 .TD_recent .TD_thumblist .TD_headline 의 영향을 받고
      내용요약은 .TD_recent .TD_thumblist .TD_summary 의 영향을 받습니다.

      .TD_recent .TD_thumblist .TD_headline 의 맨 아래 text-align: center 에서 center 대신 left로 바꿔보시구요.
      .TD_recent .TD_thumblist .TD_summary 의 맨 아래 text: center 는 아마 오타 같군요. 이것도 지워보시고 text-align: left로 바꿔보세요.

      그럼 성공하시길...

  16. BlogIcon 2FeRed 2009/01/16 13:29  댓글주소  수정/삭제  댓글쓰기

    호아범님이 말씀하신대로 수정하였으나 제 블로그를 오시면 아시겠지만 그림과 글이 서로 따로 놀고 있습니다. 괜히 귀찮게 해드리는 것 아닌지 죄송합니다만 호아범님의 HTML과 CSS 좀 알려주실 수 있으신지요. 안되신다면 제가 아래에 올린 코드에서 틀린부분 지적해주시면 감사하겠습니다.^^


    <div class="TD_recent">
    <s_more>
    <div class="TD_more">
    <div class="TD_more_title"><a href=""></a></div>
    <span class="TD_more_btn"><a href="">더보기</a></span> </div>
    </s_more>
    </div>
    <div class="TD_recent">
    <s_list>
    <div class="TD_thumblist">
    <div class="TD_thumbimg">
    <script type="text/javascript" language="javascript">
    str = String('');
    result = str.match(/<img[^>]*src=\"([^\"]*)\"[^>]*alt=\"([^\"]*)\"[^>]*>/i);
    imgSrc = result[1];
    imgAlt = result[2];

    if(imgSrc .lastIndexOf('imgempty.png') < 0) {
    document.write('<div class="TD_thumbimg">');
    document.write('<a href=""><img src="' + imgSrc + '" alt="' +imgAlt+ '"></a>');
    document.write('</div>');
    }
    </script>
    </div>
    <div class="TD_headline">
    <a href=""></a> <span class="TD_date"> </span>
    </div>
    <div class="TD_summary"><p></p></div>
    </div>
    </s_list>
    </div>

    /* 섬네일 목록형 모듈 */
    .TD_thumblist{
    padding:5px 0;
    margin:5px 5px 10px 10px;
    }
    .TD_thumblist p{
    padding:0;
    margin:0;
    letter-spacing:-1px;
    }
    .TD_thumblist .TD_headline {
    font-size:1.1em;
    font-weight:bold;
    padding:0 0 0 10px;
    text-align:center;
    }
    .TD_thumblist .TD_summary{
    padding:0;
    text-align:center;
    }
    .TD_thumblist .TD_thumbnail{
    border:3px solid #eee;
    }

    /* 텍스트 목록형 모듈 */
    .TD_list{
    margin:5px;
    }
    .TD_list .TD_headline {
    padding:0 0 0 20px;
    font-size:1.2em;
    line-height:1.2em;
    background:url(../image/bull_listbig.gif) 0 2px no-repeat;
    }
    .TD_list .TD_date {
    margin-left:5px;
    font-weight:normal;
    font-size:0.75em;
    }
    .TD_list .TD_summary {
    display:none;
    }


    /* 앨범형 모듈 */
    .TD_album{
    margin:5px;
    padding: 0 5px 5px 10px;
    }
    .TD_album img {
    margin:0 10px 0 0;
    }

    .TD_album .TD_thumbimg .TD_thumbnail{
    border:5px solid #eee;
    }

    .TD_album .TD_headline {
    padding:0 5px 5px 0;
    margin:0;
    font-size:1.1em;
    line-height:1.2em;
    text-align:center;
    }




    /* 최신글 공통 */
    .TD_recent .TD_thumbnail{
    border:none;
    }

    /* 최신글의 더보기 */
    .TD_more{
    text-align:right;
    padding:5px 5px 7px 5px;
    margin:10px 5px;
    color:#333;
    border:1px solid #ddd;
    background-color:#f5f5f5;
    }

    * html .TD_more{height:20px;}

    .TD_more_title{
    font-weight:bold;
    float:left;
    font-size:1.2em;
    background:url(../image/ico_recent_title.gif) 0 0 no-repeat;
    padding:0 0 0 25px;
    }
    .TD_more_btn{
    font:0.9em dotum;
    }


    /* 최신글 텍스트 목록형 */
    .TD_recent{
    }
    .TD_recent .TD_headline {
    color:#000;
    font-weight:normal;
    padding:0;
    font-size:1em;
    }
    .TD_recent .TD_list .TD_headline {
    background:none;
    }
    .TD_recent .TD_list{
    margin:5px;
    background:url(../image/bull_rect.gif) 6px 9px no-repeat;
    padding:3px 0 0 16px;
    }

    /* 최신글 섬네일 목록형 */
    .TD_thumbimg {
    float:right;
    margin: 5px;
    padding:0;
    }

    .TD_thumbimg img{
    max-width: 100px;
    max-height: 100px;
    width: 100px;
    border: 1px solid #ccc;
    margin:0;
    padding:3px;
    }
    .TD_recent .TD_thumblist{
    overflow:hidden;
    margin:0px;
    padding:5px;
    }

    .TD_recent .TD_thumblist .TD_headline{
    clear:both;
    font-weight:bold;
    color:#000;
    text-align:left;
    }
    .TD_recent .TD_thumblist .TD_summary{
    padding:0;
    text-align:left;
    }
    .TD_recent .TD_thumblist .TD_thumbnail{
    border:5px solid #eee;
    background-color:#eee;
    padding:0px;
    }



    /* 최신글 앨범형 */
    .TD_recent .TD_album {
    padding:0px;
    margin:0 0 10px 0;
    overflow:hidden;
    text-align:center;
    }
    .TD_recent .TD_album .TD_thumbimg{
    border:0;
    padding:0;
    margin:0 auto;
    }

    .TD_recent .TD_album .TD_headline {
    height:14px;
    overflow:hidden;
    padding-top:4px;
    }

    /* 슬라이드형 */
    .TD_slide{
    margin:2px;
    padding:0;
    float:left;
    }

    .TD_slide .TD_thumbnail{
    margin:0;
    padding:0;
    border:5px solid #eee;
    }
    .TD_slide img{
    margin:0;
    padding:0;
    }

    귀찮게 해드려서 죄송합니다. ㅜ.ㅡ

  17. BlogIcon 2fered 2009/01/17 11:24  댓글주소  수정/삭제  댓글쓰기

    음... 호아범님 코드대로라면 그림과 글이 같이 정렬되어야 하는데
    제가 해보면 그림은 그림혼자 위에서 정렬되고 그 밑에 글이 정렬됩니다.
    한마디로 그냥 썸네일 목록형처럼 보이는데 그림만 오른쪽에 정렬된 것처럼 보입니다.

    • BlogIcon 호아범 2009/01/17 23:23  댓글주소  수정/삭제

      툴을 통해 살펴보면, 그림 부분에 적용된 최종 스타일이 아래와 같네요..

      border-bottom-width: 0px;
      border-left-width: 0px;
      border-right-width: 0px;
      border-top-width: 0px;
      display: block;
      float: none;
      font-family: 돋움;
      height: 110px;
      line-height: 15px;
      margin-bottom: 5px;
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 5px;
      padding-bottom: 0px;
      padding-left: 0px;
      padding-right: 0px;
      padding-top: 0px;
      width: 211px;

      이대로라면 지금 보여지는 것이 맞습니다.
      여기서 float이 none이 되었고, width가 211px가 되었는데, 이 값을 유발하고 있는 곳을 찾아서 제거해 주어야 할 것 같네요.
      뭔가 값이 겹쳐진듯 합니다...

      그리고 다시 살펴보니, 제 글 본문에 나온 스크립트 부분은 적용이 안되고 있네요.
      소스보기로 함 봐보세요.