블로그 스킨변경을 편리하게.. 파이어폭스 부가기능 Firebug

2011. 7. 24. 21:10 블로그 (티스토리)

Google Ads

티스토리 스킨을 변경하면서 유용하게 사용하고 있는 프로그램 하나 소개하겠습니다. Firebug라는 녀석인데 글자의 색깔을 바꿀려고 외계어 같은 CSS파일을 뚫어지게 처다 보고 있는 분들한테 상당한 유용한 툴입니다.

1. Firebug 기능소개
2. Firebug 다운로드 및 설치

1. Firebug 기능소개
Firebug를 설치하면 파이어폭스 우측의 하단에 ①과 같이 풍뎅이? 모양의 아이콘이 생깁니다. 이 풍뎅이 모양의 아이콘을 클릭하면 Firebug의 작업창이 나타납니다. ②의 아이콘을 클릭하고 커서를 움직이면 커서가 위치하고 있는 부분의 소스코드정보가 표시됩니다. 여기서는 ③번 검색창을 클릭하니 ④번 skin.html과 ⑤번 style.css의 정보가 표시되었습니다. ⑤번 옆에 파란색 글씨를 보면 파일이름과 몇번째 줄에 있는지를 친철하게 표시해 줍니다.

아래의 소스코드정보의 원하는 곳을 클릭하면 숫자나 문자를 입력할 수 있게 됩니다. 여기서는 검색창의 박스의 색깔을 red로 입력하니 검색창 박스가 붉은 색으로 변하였습니다.

이와 같이 Firebug는 수정하고 싶은 부분의 위치를 초보자도 쉽게 알 수 있으며 수정될 모습을 쉽게 알 수 있습니다. 이 Firebug는 실제로 해당 사이트가 수정되는 것은 아니고 수정될 모습을 보여주는 툴입니다. Firebug를 이용해서 수정하고 싶은 부분을 알아 내고 값을 변화 시켜 가면서 어떻게 변하는지를 확인하고 나중에 실제 파일 skin.html과 style.css을 적용시키면 빠른 시간에 확실하게 변경시킬 수 있습니다.

2. Firebug 다운로드 및 설치

Firebug는 파이어폭스의 부가기능이므로 우선은 파이어폭스(Firefox)라는 웹브라우저가 있어야 합니다. 파이어폭스는 아래의 사이트에서 무료로 다운로드해서 설치합니다.

▷ 파이어폭스 다운로드 ◁

http://www.mozilla.or.kr/ko/

파이어폭스를 시작한 후 아래의 사이트로 접속해서 " Firefox에 추가 " 를 클릭하면 Firebug가 설치됩니다. 설치가 완료되면 파이어폭스를 재시작하라는 메세지가 나타나며 파이어폭스를 재시작합니다.

▷ Firebug 설치 ◁

https://addons.mozilla.org/ko/firefox/addon/firebug/