티스토리 블로그 스킨수정의 동반자 "파이어폭스", "파이어버그"
티스토리 스킨을 수정하다보면 화면을 보면서 수정했으면 좋겠다는 생각이 드는데요.
이때 선택할 수 있는건 지금까지는 웹 개발 프로그램인 "어도비 드림위버" 였습니다.
하지만 소스를 다운받고 업로드하는 번거로움과 프로그램도 무겁고 모르는 기능도 많아 잘 사용하지 않게 되었습니다.
"난 그냥 화면만 보면서 HTML을 수정하면 되는데..."
이때 알게 된게 파이어폭스.
익스플로러와 크롬은 소스보기만 지원되지만 파이어폭스는 [선택한 소스 보기 기능]이 지원됩니다.
[선택한 소스 보기] 기능만으로도 충분히 도움될거라 생각했는데,
파이어폭스의 부가기능을 이용하면 HTML이나 CSS를 변경했을때의 미리화면을 실시간으로 확인할 수 있습니다.
부가기능의 이름은 "파이어버그"
1. 파이어폭스 설치하기
① 파이어버그를 설치하기 위해선 먼저 파이어폭스를 설치하신 뒤에 파이어폭스를 실행합니다.
http://www.mozilla.or.kr/ko/
② 창의 왼쪽 위에 메뉴를 클릭하고 [부가 기능]을 클릭합니다. (또는 Ctrl+Shift+A)
③ 창의 오른쪽 위에 있는 검색바에 "firebug"를 입력하고 엔터키를 누릅니다.
④ 검색된 목록 첫번항목에 "Firebug"가 나오면, 오른쪽에 있는 [설치하기] 버튼을 클릭합니다.
⑤ 설치가 끝난 뒤에는 파이어폭스를 재시작 해야만 설치가 완료됩니다. "다시 시작"을 클릭합니다.
2. 소스 보기 / 수정하고 실시간 미리보기
① 설치가 완료되고 파이어폭스가 재실행되면 창의 오른쪽 위, 종료버튼[X] 바로 밑에 벌레모양의 아이콘이 생깁니다.
클릭하면 창 하단부에 파이어버그 표시됩니다. 왼쪽에는 현재창의 HTML 오른쪽에는 CSS가 표시됩니다.
② 파이어버그의 두번째 버튼를 클릭하고 커서를 블로그 창에 갔다대면 해당부분의 HTML소스와 CSS가 표시됩니다.
③ 하단의 HTML과 CSS를 수정하면 실시간으로 화면에 반영됩니다.
여기서 소스를 수정해도 블로그에는 반영되지 않습니다. 소스를 확인하고 블로그에서 직접 소스를 수정해주세요.
