태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.



* LieBe's Idea 블로그의 용도 변경으로 기존 작성글 이동 


 

1.배너 이쁘게 정렬하는 법 


메인 블로그의 리뉴얼을 모두 끝마치고서 이래저래 다시 블로깅을 열심히 해볼까~~ 생각만 하면서 많은 분들의 글을 읽고 있습니다.
그런데 의외로 블로그를 오래 하고 열심히 꾸미신 분들이나 센스있는 디자인의 스킨을 쓰시는 분들도 묘하게도 사이드바나 스킨에 배너는 마구 헝클어져 있거나 블로그 분위기와 좀 동 떨어지게 자리를 차지하고 있는 경우가 많더군요.

우선 이해는 갑니다.
사실 아주 예전의 초기 블로그 세대들은 대부분 컴퓨터에 익숙해서 스킨이나 디자인을 자기가 맘 먹은대로 꾸미는데 익숙하고 또 잘 안되면 이리저리 다른 블로거들에게 부탁도 해서 - 그때만해도 블로거들이 얼마 없어서 대부분 이웃사촌 같은 분위기...^^ - 대부분 알아서 꾸몄기 때문이죠.
요즘은 디자인이 정말 눈이 휘둥그레질 정도로 멋진 블로그들도 많은 반면 멋진 스킨은 설치했으나 이상야릇한 배너나 위젯, 플러그인으로 분위기가 확 죽어버리는 경우가 왕왕 있는거 같습니다.



가끔가다 사람들에게 왜 그렇게 쓰냐고 물으면...
  • HTML을 하나도 몰라서...그냥 코드 집어넣으면 된다더만 전혀 안되던데?
  • 꾸며보고는 싶은데 디자인 감각이 떨어져서 마구잡이가 되더라...
  • 큰 배너는 레이아웃을 잘 못잡겠어서 그냥 작은거를 주로 쓰는데 배치를 잘 못하겠어...
  • 정말 정말 나도 이쁘게 쓰고 싶지만 내가 하면 다 이래...



뭐 스킨에 직접 html 코드 삽입하는건 그다지 어려운일이 아닐지도 모릅니다.
일단 사이드바보다는 제약이 좀 줄어들기 때문인데 사이드바 같은 경우는 css의 영향도 받고 제한된 공간이기에 레이아웃이 상당히 중요해지기 때문이죠..

그런데 예전과는 달리 지금은 블로깅 툴이 아주 멋진 기능들을 많이 지원해서 html을 자세히 몰라도 어느정도 쉽게 꾸밀수 있을것 같은데 많은 분들이 거기까진 생각이 미치지 못하신거 같습니다.
최소한 배너나 플러그인 같은 아이템의 배치 정도는 말이죠..
그중 하나가 티스토리 같은 경우엔 -텍스트큐브도 있을거라 생각되지만- 사이드바 설정에 있는 태그 입력기입니다.

정말 태그 입력기는 누가 생각해냈는지 참 편리하더군요.
개인적으론 요 근래 블로그 리뉴얼을 하느라 티스토리 관리 패널을 이제서야 주의깊게 봐서 이런게 있다는걸 늦게서나마 알았는데 태그 입력기로 코딩하면 코드 삽입을 할때 별다른 신경 쓰지 않아도 되서 저같은 게으름뱅이에겐 딱인듯 합니다.

물론 장점만 있는게 아니고 단점도 있는데 세세한 조절이나 디자인을 위해서는 결국 스킨에 직접 코드 삽입하는 정도의 html은 기본적으로 알아야 한다는 것이죠.
그래도 어쨌건 이런 툴이 제공되어 예전보단 참 쉬워진거 같습니다.
태그 입력기의 원리는 사이드바에 태그 입력기 콘솔을 이용해서 사이드바 html 에 직접 코드를 입력한것과 같은 효과를 주는 것입니다.
물론 페이지가 생성될때 플러그인으로 삽입되는 것이니 직접 스킨을 수정하는 것과는 조금 다른 개념이긴 합니다만..

어쨌던 태그 입력기를 이용하면 사이드바에서만큼은 깔끔하게 레이아웃을 꾸밀수 있습니다.

왼쪽은 저의 메인 블로그이고 오른쪽은 지금 보시고 계신 블로그입니다.

지금 보시고 계신 오른쪽 사이드바는 사실 메타싸이트 배너 말고는 필요한게 없기에 - 꾸밀 이유도 없고 - 이 포스트를 작성하기 위해 급히 배치해본 것인데 뭐 그다지 이쁘진 않지만 이런식으로 태그 입력기를 사용할수 있다는, (그것도 아주 쉽고 간단하게 원하는대로~) 예를 보여 드리고 싶었다고 할까요.
그러면 html을 잘 몰라도 레이아웃이 가능하느냐?
네~ 라고 말씀 드리겠습니다.
원리는 간단합니다.
html을 잘 몰라도 요즘 웹에디터들이 html 코드를 너무 잘 만들어주기 때문이죠.  ^^

옆에 보시는 블로그 코리아, 올블로그, 믹시의 배너들은 전부 태그 입력기 한개를 사이드바에 추가하여 만든것이고 전부 테이블로 둘러싸서 하나의 모듈로 집어넣었습니다.

오른쪽 배너를 만드는 법을 간단히 설명하자면...

1. 배너를 각 싸이트에서 퍼온다. 
개인이 독자적으로 만든 것이라면 포스트나 "스킨 업로드" 항목에 업로드 한다음 주소를 따온다.

2. 웹에디터를 실행시킨다. 
저는 간단히 나모에디터를 사용했는데 요즘 많이 쓰는 드림 위버라던지 티스토리 에디터에서 기본 제공하는 테이블 에디터라던지 요즘 블로깅에 많이 쓰이는 MS 라이브라이터든지 아무거나 관계없습니다. 
고작 테이블 하나 만드는것 뿐이니까요..

3. 테이블을 대충 그린다.   (웹에디터 사용법까지 알려달라고 하시면 곤란합니다.  워드프로세서 쓰듯 간단히 쓸수 있습니다.
너무 어렵게 생각할 필요 없습니다.
오른쪽 사이드바의 배너의 배열을 보시면 아시겠지만 저런 모양으로 되어 있기에 테이블을 저렇게 그렸습니다.
4 * 4 의 테이블을 그리고 마우스로 긁어서 셀을 합치면 되겠죠?
아... 테이블 보더는 "0" 으로 하시면 테이블 모양이 나타나지 않고 깔끔하게 나옵니다.
사람에 따라 칸막이가 필요한 분은 선의 굵기를 정해서 1부터 숫자를 정하시면 선이 표시가 됩니다.
그러면 웹에디터에 일단 요로코롬 코드가 나옵니다..

<table border="0" width="200" height="100">
    <tr>
        <td width="100" height="100" rowspan="2"></td>
        <td width="100" height="50"></td>
    </tr>
    <tr>
        <td width="100" height="50"></td>     </tr> </table>

 

뭐 에디터에 따라 천차만별이긴 하지만요...

저것이 일단 뼈대입니다.
그럼 다시 에디터로 돌아가서 아무 문서에서나 
위의 배너의 소스 코드를 집어넣습니다.
개인적으로 올린 이미지나 기타 오브젝트의 배너도 웹에디터의 "삽입" 과 같은 메뉴를 이용하여 첨부하면 됩니다.
그후 코드를 직접 입력해도 좋고 잘 모르겠으면 그냥 드래그 앤 드랍이나 Ctrl-C 등으로 테이블 안에 배너를 배열하시면 됩니다.
처음부터 테이블의 크기를 정확히 맞추지 못했다고 실망할것은 없습니다.
그냥 마우스로 대충 잡고 테이블 조절하면 되니까요.
테이블 크기 조절 안되는 웹에디터는 아직 본적이 없습니다.  문제는 테이블에 마춰서 이미지들의 크기가 잘 맞아 떨어지느냐 아니냐인데 저의 메인 블로그의 배너는 대충 사이즈가 맞아 떨어졌지만 지금 보고 계신 블로그의 배너는 서로 배너의 크기가 제각각이라 리사이즈가 필요했습니다.
이것도 html 창에서 정확히 수치를 입력하면 되지만 마우스로 이미지나 오브젝트를 붙잡고 사이즈를 줄여도 되고 편한대로 하면 됩니다.
지금 보고 계신 블로그의 배너는 믹시 배너는 작은걸 조금 키웠고 블로그 코리아 배너는 큰걸 조금 줄여서 이미지가 조금 일그러졌습니다.
메타 사이트들의 소스 이미지를 웹에서 받아오는 것이라 직접 리사이즈 하기가 힘들기도 하고 - 어려운건 아닙니다. 이미지를 자기 서버에 올려서 사용하면 되니까요... - 간단히 예제를 만들어보려고 한 것이니 양해 바랍니다.

뭐 아무튼 이럭저럭 해서 다 배치하면 HTML 창으로 돌아가서 <table 어쩌구 > ~ </table> 하는곳까지 긁어오면 됩니다.
저 예제의 나모 웹에디터 코드는..

<table border="0" width="200" height="100">
    <tr>
        <td width="100" height="100" rowspan="2">

<!----중략---->

    </tr>
</table>

요로코롬되겠네요.

그럼 이걸 블로그의 사이드바 메뉴에 들어가서 사이드바에 태그 입력기를 배치한 다음 태그입력기의 편집을 누르고 코드를 그대로 카피해 넣습니다.
그리고 사이드바에서 위치를 대충 잡고 저장 - 확인 을 누른후 레이아웃을 봅니다.
그리고 또 수정하고 "빈줄표시"같은 아이템을 이용해서 적당히 여백도 주고... 뭐 이런식으로 정리하면 됩니다...

아주 간단하지 않나요?
기초적으로 HTML을 전혀 모르는 사람을 대상으로 적어서 너무 세세하게 적은듯 하여 좀 지루한 면도 있을듯 합니다.
여기에 추가로 하나 팁이 있다면 블로그코리아나 믹시의 배너는 클릭을 하면 자신의 글 목록이 나오게 되어 있습니다.
그러나 올블로그는 무슨 이유에서인지 배너를 누르면 별다른 속성없이 새창에서 올블로그 메인이 뜹니다.
그걸 자신의 글 목록으로 수정하려면
올블로그 검색에서 블로그를 선택하고 자신의 필명을 검색해서 나온 URL을 카피합니다.

그후 믹시나 블로그 코리아 같은 배너의 소스를 참고하여 주소만 싹 고쳐 넣으면 됩니다.위의 오리지널 소스를 아래처럼 바꾸시면 됩니다.  (주소는 이 블로그의 제 글 목록입니다....)


<A href="http://ac.allblog.net/?k=allblog" target=_blank>
<IMG height=30 src="http://images.allblog.net/banners/allblog/allblog_make/80x30/banner002.gif" width=80>


<a target='_blank' title='올블로그 바로가기' href='http://search.allblog.net/?keyword=LieBe%27s+Graffiti&type=100&rssurlidx=265519'>
<img src='http://images.allblog.net/banners/allblog/allblog_make/170x60/banner001.gif'  alt='올블' border='0' / width="165" height="59"></a>


배너 뿐 아니라 다른 것도 얼마든지 응용이 가능합니다
위젯이나 플러그인들도 그냥 같다 붙이면 왼쪽에 척 달라 붙고 오른족에 붙고....막 엉망일텐데 간단히 웹에디터에서 정렬 한번 해주고 그 코드를 태그 에디터에 집어넣으면 끝납니다.
저같은 경우는 거의 가운데 정렬을 했군요.

주의 하실점은 나모 같은 툴은 쓸데없는 코드를 많이 만들고 어떤 툴은 w3c 규약을 잘 안지키고 익스 전용 코드를 만드는 경우도 있습니다.
그래서 마우스로 클릭클릭을 마구 하다가 코드가 엉키면 부하가 걸리거나 익스에서만 정상으로 보이는 코드가 만들어질수가 있습니다.
그래서 웹에디터의 선택이 중요한데 개인적으론 오픈 소스로 배포되어 무료인 NVU 웹에디터를 추천합니다.
아주 가볍고 초심자들에게 필요한 기능은 다 들어있습니다.
뭐 표 하나 그리는데는 어떤 툴이건 관계없겠지만요...




2. 멀티 블로거들을 위한 팁


이건 팁이라기 보단 서비스 소개인데 저 같은 경우엔 메인 블로그에 각각의 블로그를 링크하는 메뉴가 있습니다.
새창으로 보러가기


각각의 플래시 메뉴에서 클릭하면 바로 블로그들로 넘어가게 만들어놓고 각각의 블로그들을 전부 팀 블로그로 설정을 해놨는데 알고 봤더니 티스토리는 하나의 아이디로 5개까지 가능하더군요...OTL

각설하고 저런 경우엔 각각의 블로그를 연결하는 링크가 필요하게 됩니다.
이런 경우에 위의 방법으로 이미지들을 몇개 준비해서 이미지를 클릭하면 링크가 되게 웹에디터에서 설정하고 바로 태그에디터로 사이드바에 붙여도 되고 스킨에 직접 요즘 CSS 무료 템플릿으로 뿌리는 메뉴들을 이용해도 됩니다.
조금만 검색해보면 이쁘고 멋진 무료 메뉴 템플릿들이 정말 많습니다.  (궁금하신 분들은 개인적으로 물어보시길..)

그런데 꼭 그렇게 하지 않아도 위젯 하나로 대충 해결할수 있는 방법이 있습니다.

이 이미지는 제 메인 블로그의 사이드바에 적용시켜논 것인데 스프링 가젯이라고 합니다.
구글로 인수된 피드버너의 협력사인 곳에서 만든 것인데 기능이 참 다양합니다.
그중 RSS 피드를 받아서 보여주는 기능이 있는데 파이프 문자로 "|" 피드를 상당히 많이 추가하여 보여줄수 있습니다. (물론 너무 많이 추가하면 부하가 걸리겠죠...)

참고 사이트 : http://www.springwidgets.com/

가보시면 재미난 위젯들이 참 많고 자신이 직접 툴킷을 다운로드하여 꾸밀수도 있습니다.
물론 어느정도의 기본 위젯의 커스텀화도 가능합니다.

사이드바에 붙여놓고 클릭하면 바로 그 해당 블로그로 링크가 되며 메뉴바로 각각의 피드를 선택할수 있고 (링크 선택이 가능하다는 말..) 상당히 유용하게 쓸수 있습니다.
이미 만들어진 템플릿을 보면 거의 홍보용으로 많이 제작되지만 여러가지 기능들이 있으니 심심하시면 한번 가서 기능들을 찬찬히 훑어보시는것도 좋을듯 합니다.




이상으로 관심은 있지만 HTML에 익숙하지 않아서 블로그 디자인을 마음대로 못하는 분들을 위해서 간단히 적어보았습니다.
사실 블로그의 내용과 컨텐츠가 중요하지 그런게 뭔 상관이냐 싶지만 그래도 보기 좋은 떡이 먹기도 좋다는 말이 있듯이 깔끔하고 자신이 원하는 만큼의 디자인은 나올수 있게 하면 더 좋지 않을까요?
못하는게 아니라 적어도 안한다는 소리는 할수 있는게 좋은거겠죠.....lol

그럼 조금이나마 도움이 되시길 바라며 글을 마칩니다...






14일 오전 2시 11분 수정사항 :
블코 배너의 경우엔 리사이즈하면 클릭이 안되는군요.
소스만 봐선 문제될게 없는듯 한데 잘 모르겠습니다.
블코 배너 같은 경우엔 리사이즈를 하지 않고 사용하는 방법으로 사용하시길 권합니다...





 

저작자 표시 비영리 동일 조건 변경 허락
신고

 

 

   나는 대한민국의 모든 기독교인들을...
  
 한국사회의 아주 특별한 Propaganda
  
 고구마 파는 노인네의 한탄.
  
 How  to listen TRANCE when you...

  
 10 Tunes of the second Half of '2008
 


본 포스트는 아래의 사이트에 발행되며 찿아보실수 있습니다.    클릭하시면 글목록 기능과 함께 추천이 가능합니다.

  1. Favicon of http://wenley.tistory.com BlogIcon 웬리 2008.12.03 11:46 신고

    우와~ 좋은 정보 감사합니다. 일단은 1월 1일 오픈을 목표로 열심히 해보려구요~ ㅎㅎ

    perm. |  mod/del. |  reply.
  2. Favicon of http://potocosmos.com BlogIcon 사진우주 2009.01.16 17:37 신고

    오홋.. 저런곳이~!! 감사해요~~!! 좀 꾸며봐야겠네요^^..;;;
    스프링 위젯은.. 영어 사이트군요..;; 고생좀할듯한..;;;

    perm. |  mod/del. |  reply.
    • Favicon of http://liebe.tistory.com BlogIcon LieBe 2009.01.16 17:52 신고

      셋업 위자드가 있어서 영어싸이트라도 어렵지도 않아요...
      입력칸만 넣어주시면 됩니다..^^

  3. 2009.06.23 17:39

    비밀댓글입니다

    perm. |  mod/del. |  reply.
  4. Favicon of http://butters.tistory.com BlogIcon 버터 2010.09.30 17:22 신고

    정말로 감사합니다!!!!!

    perm. |  mod/del. |  reply.
댓글 입력 폼



티스토리 툴바