본문 바로가기
유용한_팁/블로그_팁

파이어버그로 티스토리 스킨 미리 수정하기

by 씨디맨 2009. 9. 20.
320x100
블로그 스킨을 수정해주는 작업을 최근에 하고 있습니다. 그런데 어떤식으로 미리 확인을 해보는지 궁금해하는 분들이 계셔서 간략하게 글을 적어볼까 합니다.

Firefox 는 현재 세계적으로 점유율 2위의 많은 부가기능과 강력한 기능으로 사랑받는 인터넷 브라우저 중 하나입니다.
Firefox 의 부가기능 중 하나인 Firebug 를 이용해서 스킨을 미리 고쳐보는 방법에 대해서 소개해보겠습니다.

Firebug 설치



제가 Firebug 를 알게된것은 윤초딩님이 소개해준 Firefox의 부가기능 Firebug 에서 입니다.
Firefox 를 설치 또는 무설치판을 이용해서 켠 뒤, 윤초딩님의 파이어폭스 확장기능 웹개발자필수 firebug 편 을 확인하셔서 설치합니다.


Firebug 의 원리는 ?





Firebug 의 원리는 클라이언트컴퓨터(사용자컴퓨터) 에 받아진 블로그의 내용을 이용해서 HTML / CSS 를 미리 수정해 볼 수 있게 하는것입니다. 수정을 하더라도 실제로 운영하는 스킨에 변형을 하는것이 아닌만큼 Firebug 로 수정을 했더라도 다시 블로그에 접속해보면 원래대로 돌아와있음을 알 수 있습니다. 즉, 임시폴더로 받아진 내용을 기반으로 미리 스킨을 수정해보는 것입니다.


Firebug 사용방법




오른쪽하단의 벌래모양의 아이콘을 누르면 Firebug 를 활성화 할 수 있습니다. 아이콘도 이름도 참 센스있게 잘 고른거같네요. bug 를 쏙쏙 찾아서 미리 수정해볼 수 있습니다.


 


1. 검사아이콘을 먼저 누릅니다.
2. 블로그 스킨중에서 검사하고 싶은 부분에 마우스를 올립니다. 올린뒤 마우스 우측 버튼을 한번 눌러줍니다.

이렇게 하면 하단에 블로그의 HTML 내용이 보이며 그 항목에서 상속된 CSS 항목이 오른쪽에 나타나게 됩니다.


이외에도 HTML / CSS 메뉴에서 편집을 누르면 모든 코드를 보는상태에서 수정을 하고 실시간으로 변화하는 모습을 볼 수 있습니다.



Firebug 로 잘못된부분 실제로 수정해보자




임의로 제 테스트블로그에 댓글다는 부분의 CSS 를 틀리게 넣어놓았습니다. 그림을 보시면 댓글입력하는 부분의 오른쪽 부분이
조금 이상하죠 ? 댓글은 <textarea></textarea> 인데 이 textarea 의 width 가 너무 넓어서 오른쪽이 잘못되어 있는 모습입니다.

검사아이콘을 누른뒤, 댓글부분에 마우스를 가져가서 코드를 확인 후 오른쪽부분의 CSS 항목에서 상속된 width 를 확인합니다.
590px 는 너무 넓군요. 숫자부분을 클릭후 숫자를 임의로 입력해도 되며, 키보드의 ↑,↓ 를 눌러서 조절해볼 수 있습니다.




수정하고 싶은 부분의 항목을 키보드로 조절해서 실시간으로 바뀌는 모습을 보면서 조절을 합니다.



Firebug 마무리



Firebug 는 블로그 서버에서 해석되어진 뒤, 클라이언트 컴퓨터에 받아진 임시폴더의 내용을 바탕으로 수정되는것이기에 다른 사람들의 블로그에도 접속 후 마음껏 미리 조절해볼 수 있습니다. 그사람 스킨이 망가지거나 하는 일은 없으니 미리 수정도 해보면서 공부도 가능하겠죠.

자신의 스킨을 수정할 때는, Firebug 로 수정한 내용을 기억해두었다가 실제 스킨의 코드를 수정해주면 됩니다. 다만, Firebug는 실제코드와 내용이 좀 다를 수는 있습니다. 티스토리 블로그 스킨에는 수많은 치환자가 쓰입니다. 그 치환자는 말그대로 치환된 문자를 보여줍니다. Firebug 에서 확인하는 내용은 치환된 내용이니 치환자를 확인할 수 는 없습니다. 이외에도 몇몇 부분은 조금 다르게 나타날 수 있습니다. 또, 스킨에 이미지파일을 새로 올린뒤 Firebug 에서 상대경로로 수정해보면 바로 적용은 안될 수 도 있습니다. 이럴때는 절대경로로 먼저 사용 후 잘 되는걸 확인한 뒤, 실제로는 상대경로로 수정하는 방법을 쓰면 좋습니다.

실제 CSS
#sidebar p {
color: #fff;
}

Firebug 로 본 CSS
#sidebar p {
-x-system-font: none;
color: #FFFFFF;
}

스킨을 수정할때, 계속 CSS 내용을 확인하면서 넣고 넣고 하면서 확인하는건 사실 쉬운일이 아니죠. Firebug 를 이용하면 한술 수월하게 작업을 진행할 수 있습니다.

앞으로 간단하지만 정말 도움이 되는 CSS 관련 팁들을 적어볼까 합니다. 제가 공개하는 코드를 자신의 스킨에 Firebug 로 미리 적용해보고, 어울리는지 확인해본뒤, 실제로 자신의 스킨에 적용해봐도 좋겠죠 ^^

스킨과 연관된 문서들


2009/02/12 - [Useful Tips] - 더블클릭으로 블로깅을 편하게
2009/04/21 - [Useful Tips] - 티스토리 블로그 스킨 분석해보자 - 처음편
2009/07/23 - [Useful Tips] - 티스토리 블로그 스킨 분석해보자 - 둘째편
2009/08/16 - [Useful Tips] - 블로그 서식 꾸미기 #1 (동영상)
2009/09/01 - [Useful Tips] - 블로그 서식 꾸미기 #2 - 플래쉬 소제목 활용하기 (동영상)

스킨 수정해 드립니다


2009/09/11 - [Hardware/Tuning/Lab] - 블로그 스킨 수정해 드립니다.



스킨공부에 도움이 될 책들



댓글