[DIY스킨] 움직이는 사이드바

Infomation/Computer 2007.06.20 08:00
네이버 블로그에서 티스토리로 이사중에 티스토리의 스킨의 모든 코드를 내마음데로 바꿀수도 있다는것을 알았다. 이런이런 또 발동이다.
남들과 같은것은 참을수 없는 나의 성격. 뭔가 하나라도 남들과는 달라보여야 한다.!!
디자인이 안되면 기술로 승부하자!

그 첫손질로 오른쪽에 위치한

사이드바의 위치를 드래그 & 드랍으로 마음껏 위치이동하고 싶다.

사용자 삽입 이미지

옮기고 싶은 사이드바



그래서 눈을 부릅뜨고 아래 소스코드를 열심히 뒤지다가 눈깔이 빠질까 두려워 좀 편리한 도구를 쓰기로 결심한다.
사용자 삽입 이미지

[관리메뉴의 스킨>스킨선택>편집하기를 누르면 위와같은 스킨의 소스 편집창이 보인다.]

그 편리한 삽질도구의 선두주자 두명을 소개하고자 한다. 그 첫째는 MS에서 제공하는 IEDevToolBar
불여우(FireFox - 이하 파폭)의 플러그인중 하나인 Firbug (동영상).
그중 나는 주로 Firebug를 사용한다. 왠지 더 편하다.-_-;

파폭에서 F12를 눌러 firbug를 Enable시킨 후 Inspect를 클릭하고 화면에 커서를 가져가면 각각의 요소에대한 태그 정보가 적나라하게 나타난다.
사용자 삽입 이미지

파폭의 firebug 실행화면



찾았다. 사이드바의 <div>태그의 id는....sidebar...-_-a
조금 허무하다..;

아무튼 목적하는바를 달성했으니 step2로 gogo싱~

step2. 이제 핵심 소스를 포함시킬 차례다.

invalid-file

자바스크립트 소스

이 블로그에 포함시키는 소스는 최범균씨가 쓴 AJAX PROGRAMMING 기초부터 중급까지라는 책에서 소스를 조금 얻어서 사용했음을 밝힌다. 또한 내 나름데로 수정도 많이 가해졌다.
마음껏 가져가서 사용해도 무방하지만 출처를 속이지는 말길 바란다.^-^*


자 이제 스킨편집창으로 돌아가서. *skin.html 영역의 스킨을 자세히 보면 <head>...</head>이라는 부분이 보인다. 이 헤드 태그 사이에 자바스크립트를 삽입해야 한다. 위 소스코드를 다운로드 받아서 노트패드나 editplus등등의 편집기를 이용해서 열어보면 어지러운  자바스크립트가 보인다.
여기서 수정해야 할 부분은 아랫부분이다.

window.onload=function(){
        var drag1=new ajax.dnd.SimpleDragSource("sidebar");
}

소스코드의 제일 아랫부분에 위 코드가 위치한다.
위에서 단지 고칠곳은 "sidebar" 이곳.
이곳에 setp1에서 찾은 사이드바의 div id를 넣어준 후
 소스를 스윽~긁어서 복사한다. 그리고 스킨편집창의 *skin.html에서 </head> 태그 바로 윗줄에 붙여넣기 하자.

다.됬.다!

이제 한번 저장하기를 누른후 블로그로 돌아가서 마우스를 꾹~누지르고 이동해보자!!
오오~~사이드바가 움직이는게 보이시는가~!+_+

그런데 이런 뭔가 좀 이상하다....

그렇다. 마우스 커서가 화살표 모양이다. 보통 창을 움직이는것을 뜻하는 마우스 포인터는 십자가 모양이지 않은가?? 이건 딱 이렇다고 정해진것은 아니나... 오래전부터 MS의 빌아저씨가 그렇게 만들었으므로 우리의 뇌릿속엔 이미 이렇게 박혀있다.

step3. 마우스 커서의 스타일을 한번 병경시켜보자.

다시 스킨편집 페이지로 돌아가자. 그리고 편집창에서 소스코드를 눈 부릅뜨고 잘 찾아보자~라고 무식한 방법 쓰지 말고..;;
Ctrl+F를 누르면 글자를 찾을수 있으니 이것을 이용하여 sidebar div를 찾아보자.
이런한 태그가 보이는가~?
<div id ="sidebar" style="cursor:move">
......
</div>


div태그 옆에 빨간 글씨의 속성을 지정해주면 마우스커서가 십자가 모양으로 변할것이니~~

다음시간에는 큰 사진도 문제 없다! 메인창 넓이를 마음데로! 라는 주제로 글을 써볼까 합니다.
특시 사진을 즐겨 찍으시는 분들...
큰사진을 올리면 사진이 사이드가 잘려버리는 큰 사태가 발생하여 2단 스킨만을 사용하고 계신분들을 위해..
이런분들도 3단 스킨을 맘놓고 편히 사용하라는 뜻에서 적어보고자 합니다.
신고
크리에이티브 커먼즈 라이선스
Creative Commons License

'Infomation > Computer' 카테고리의 다른 글

누구냐 넌?  (6) 2007.12.08
블로그에 MSN메신저 달기  (1) 2007.12.07
[flickr] 플리커와 테터툴즈 연동!!  (0) 2007.12.02
[DIY스킨] 움직이는 사이드바  (2) 2007.06.20


티스토리 툴바