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

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

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] - 블로그 스킨 수정해 드립니다.

스킨공부에 도움이 될 책들