본문 바로가기
  • 북마크
정보

[텍스트큐브]텍스트큐브에 로고를 이미지로 바꿔보자!

by 빽짱구 2008. 12. 17.

텍스트큐브 제공형(?)의 블로그 로고를 이미지로 바꾸는 방법입니다.

 

텍스트 큐브닷컴은 아직 beta 버전이라 스킨편집 기능을 지원하지 않습니다.

그래서 이만 저만 불편한게 아니지요..  다행이도 html 코드위젯은 지원함으로, 그걸이용하는 방법입니다.

예전에 텍스트큐브닷컴 블로그 수정하기 라는 글을 포스팅한적이 있습니다. 꼭참고 하시길 바랍니다.

 

텍스트 로고를 이미지로 바꾸는 방법은 다음과 같습니다.

 

먼저 원하는 로고이미지를 만든후 아무곳(?)이나 업로드합니다. 계정이 있으면 자신의 계정에 올리셔도 됩니다만, 저같은 경우는 아래와 같은 방법을 이용했습니다.

 

 

공지사항에 이미지를 업로드후 해당 이미지 주소를 복사하는 방법입니다.

 

 

이렇게 업로드된 이미지의 주소를 알기위해 이미지 속성을 확인합니다.

 

 

주소는 이런식으로 알아두시면 됩니다.

 

그런 다음 html 코드위젯에 이미지를 넣도록 하겠습니다.

코드위젯은 관리자 > 꾸미기 > 위젯에 위치해 있습니다.

 

 

html 코드위젯을 선택하시고 style을 주시면 됩니다. 예전에 포스팅 했을때도 언급했지만, 스타일의 우선순위는 인라인 > 내부 > 외부 로 인식을 하기때문에 외부보다 먼저인식하는 내부스타일을 이용하는 방법입니다.

 

 

소스는 다음과 같습니다.

 

<style type="text/css">
#header h1 {width:220px; height:35px; background:url(http://fs.textcube.com/blog/0/2036/attach/XA7VmjmTfX.png); text-indent: -99999px;}
* html #header h1 {background:none;  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://fs.textcube.com/blog/0/2036/attach/XA7VmjmTfX.png, sizingMethod=crop);}
</style>

 

저같은 경우는 로고를 투명 png 로 저장했기에, 위와 같이 IE6 핵을 사용했습니다. [참고글]

이미지 주소는 처음 알아낸 이미지 경로를 적어주시면 됩니다.

 

/* 주의 */

1. 로고사이즈(가로,세로)를 꼭 적어주세요.

2. 텍스트를 없애야 하기때문에 text-indent (들여쓰기)를 -99999px 로 주고, 텍스트를 숨깁니다.

3. png가 아닐경우 스타핵을 사용할필요는 없습니다.

4. 스킨마다 class 또는 id 명이 다르니 해당 명을 정확히 입력하셔야 합니다. (여러 방법이 있죠? 소스보기나, 파폭 부가기능을 이용하시면 됩니다.)

 

응용해 보세요.^^

 

 

댓글18[댓글정책]

  • Favicon of http://irina.wo.tc irina 2008.12.18 00:03

    한번 써먹어야겠네요. Flash 파일도 가능한가요?
    답글

    • Favicon of http://www.webmini.net 빽짱구 2008.12.18 00:15

      css를 이용해서 배경으로 설정하는 방법이기에 플래쉬는 불가능하리라 생각됩니다.^^;

      하지만 css의 배경이 아닌 코드위젯을 통해 플래쉬를 포지션으로 묶어주면 가능할지도 모르겠습니다.

      해당 id나 class 명을 찾으시고, 위와 같은 방법으로 #header 부분에 position:relative; 를 주시고, h1 부분에 position:absolute; 로 절대위치를 주시면 가능하겠네요.. 물론 h1부분에 텍스트를 숨기시구요..

      기회되면 그부분도 포스팅 하도록 하겠습니다.

  • Favicon of http://lifestory.textcube.com 회색웃음 2008.12.18 00:05

    홍~~ 이런 방법도 있군요. 자바와 웹을 몰라 이시대의 멍청이가 되어가고 있는뎅.. 이거 한번 해보고 싶네요.. 근데~ 이미지를 멋지게 맹글줄 모른다능.. 엥~
    그래서 차차로 해보겠슴당~ 마음에 드는 이미지가 나올때까지.. ^.^
    답글

    • Favicon of http://www.webmini.net 빽짱구 2008.12.18 00:11

      웹의 세계란 너무나 빨리 발전해서 공부를 하지 않으면, 뒤따라가기가 어려운거 같아요.. 가끔 두려울때도 있구요..^^;

  • Favicon of http://diary.webpher.com 띠용 2008.12.18 00:18

    이거 꼭 적용해볼꺼예요.히힛
    답글

  • Favicon of http://www.cosmosia.cn JinHe 2008.12.19 13:53

    저도 이 방법을 이용했거든요...
    근데 님처럼 다른 회원님들한테도 편리하게
    게시물을 작성하지 않았어요...

    허허...생각지도 못했거든요...
    답글

    • Favicon of http://www.webmini.net 빽짱구 2008.12.19 14:26

      네? 무슨말씀이신지.. 이해가 잘 안가네요..
      위에 방법을 이용했었는데, 저처럼 포스팅 할 생각을 못했다는 말씀인가요..

      모르시는 분들을 위해 공유 하는것도 나쁘지 않다고 생각해요 ^^;

    • Favicon of http://www.cosmosia.cn JinHe 2008.12.21 21:47

      전 이런것도 모른 사람들한테는 도움이 되는줄 몰랐어요...
      그러니다보니 포스팅 할 생각도 못했구요...
      참...
      웹미니가 대박나는 이유를 알것 같애요...허허

  • Favicon of http://www.webmini.net 빽짱구 2008.12.21 22:40

    제 생각에는 자신이 알고있다고 다른사람이 당연히 알겠지라는 생각은 가지고있지 않습니다. 다만, 아주 작은 팁이라도 1명이 유용한 정보가 되었다면 그걸로 만족할 따름입니다. 그래서 포스팅을 하는 이유일수도 있구요. 이런부분이 개인블로그의 장점이 아닐까 하는 생각도 합니다. 누구를 위해 정보를 줄수 있고, 정보를 주지 못한다해도 자신만의 일기형식의 글로 취미생활이 될수도 있으니깐요.^^
    답글

  • Favicon of http://archvista.net/ 아크몬드 2008.12.22 18:13

    좋은데요/
    답글

  • Favicon of http://www.dollkorea.co.kr 돌코리아 2008.12.23 16:46

    웹미니가 산뜻해져써요
    답글

  • Favicon of http://kuna.wo.tc 쿠나 2009.01.04 16:29

    자바스크립트로 뜯는 방법만 썼었는데 이런 방법도 있군요 ㅋㅋ
    잘 보고 갑니다~
    답글

  • Favicon of http://yoonhi.textcube.com 신윤희 2009.01.30 03:40

    좋은 팁이네요~
    잘보고 갑니다~
    답글