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

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

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



스킨공부에 도움이 될 책들




이 글은 "씨디맨" 의 동의 없이 전문 재배포 금지. 링크 및 트랙백은 허가 없이 무제한 허용 *  [자세히보기]

질문 또는 댓글을 남겨 주세요.

질문글은 무조건 답변 드리겠습니다. 이곳에 질문을 올려주세요.
이 글과 연관이 없는 급한 질문은 빠른 질문/답변을 이용해 주세요!

댓글 입력 폼

s;s s;s

     이미지 업로드

  1. 2009.09.20 10:25

    비밀댓글입니다

    perm. |  mod/del. |  reply.
  2. 2009.09.20 10:37

    비밀댓글입니다

    perm. |  mod/del. |  reply.
  3. 필넷 2009.09.20 11:45

    파이어버그가 이런 용도로 사용하는 것이군요. 몇번 들어보긴 했는데..
    잘 배우고 갑니다. ^^

    perm. |  mod/del. |  reply.
  4. 눈길에 발자욱 2009.09.20 15:05

    컴맹인 저는 파이어 폭스의 버그인줄로.

    perm. |  mod/del. |  reply.
  5. kensaku 2009.09.20 16:59

    와앗!!! 이런 방법이 있었군요... 스킨 미리보기 귀찮았는데 다음에 해봐야 겠습니다!!!

    perm. |  mod/del. |  reply.
  6. 2proo 2009.09.20 22:04 신고

    아... 이렇게 사용하는것이군요. 멋진데요?
    시디맨2님 도움을 정말 많이 받았어요 ㅎㅎ
    감사합니다~

    행복한 한 주 시작하시길 바랍니다~~~~~~ ^^

    perm. |  mod/del. |  reply.
  7. 좋은사람들 2009.09.21 00:08

    저는 크롬의 요소검사를 보고 수정하는데.. 파이어버그는 미리 수정한걸 볼수가 있네요~ 와우~

    perm. |  mod/del. |  reply.
    • 씨디맨 2009.09.22 11:35 신고

      크롬은 어떻게 돌아가나 저도 포터블 띄우고 해봤는데요. 요소랑 다 잘나오긴한데 수정은 안되던것같았어요. 맞는지모르겠네요. 저도 크롬 많이 사용해본건 아니라서 속도하나는 짱인 크롬 ㅎ 파이어버그는 실시간으로 변경되는걸 볼 수 있어서 좋은거같아요.

      perm. |  mod/del. | 
  8. 대구사랑 2009.09.21 08:26

    오, 드디어 파이어버그 강좌가...
    수고 많으세여. 힘찬한주 시작해여.^^

    perm. |  mod/del. |  reply.
    • 씨디맨 2009.09.22 11:35 신고

      더 자세히 쓰려고했지만 이정도만 ㅋ; 그때 보내드렸던 동영상은 아주 상세히 한거예요 ㅎ

      perm. |  mod/del. | 
  9. 구차니 2009.09.21 09:41

    저도 파이어에그(응?)의 버그인줄로 착각을 ㅋㅋ

    perm. |  mod/del. |  reply.
  10. 2009.09.21 10:46

    비밀댓글입니다

    perm. |  mod/del. |  reply.
    • 씨디맨 2009.09.22 11:36 신고

      음.. 제가 조금 살펴보고 알려드려도 될까요 ?

      perm. |  mod/del. | 
    • 2009.09.22 18:36

      비밀댓글입니다

      perm. |  mod/del. | 
    • 씨디맨 2009.09.22 21:01 신고

      원본 스킨도 문제가 있다는 말씀이시죠? 테스트 블로그는 있기는한데요. 제가 그 원본 스킨을 어디서 구해야할지 모르겠네요. 스킨을 다운로드한뒤 cdmanii@nate.com 으로 보내주실 수 있나요 ? 아니면. 그 스킨을 어디서 받을 수 있는지 알려주시면 알 수 있을것같습니다. /location 에 안나오는 이유는 실제로 관련글이 없거나 또는 치환자가 빠졌을 가능성이 있어보이거든요.

      perm. |  mod/del. | 
    • 2009.09.23 07:52

      비밀댓글입니다

      perm. |  mod/del. | 
    • 씨디맨 2009.09.23 11:32 신고

      메일로 답변 드릴께요 ~

      perm. |  mod/del. | 
  11. JiNi 2009.09.21 11:38

    이것이 바로 그것이군요. 신기하네요.
    그런데 이런 비법 공개하니 마술사가 신기한 마술 비법을 스스로 공개한 것 같아요.
    그래도 씨디맨님 저는 여전히 존경합니다.

    perm. |  mod/del. |  reply.
    • 씨디맨 2009.09.22 11:37 신고

      공개하니 맘이 조금 시원해지네요. 근데 이게 다는 아니예요 ㅎ CSS 는 험난하다는 ㅋ

      perm. |  mod/del. | 
  12. 드자이너김군 2009.09.21 14:41 신고

    파폭에는 정말 유용한 플러그인이 많이 있는것 같아요 . 잘쓰면.. 블로깅 라이프를 정말 편하게 해주더라구요~

    perm. |  mod/del. |  reply.
    • 씨디맨 2009.09.22 11:37 신고

      그러게요. 파폭하면 부가기능이 먼저 생각날 정도니까요. 참 여러사람이 자꾸 만들어서 올리니 다양하고 좋은게 많은거같아요 ㅎ

      perm. |  mod/del. | 
  13. 2009.09.24 02:03

    비밀댓글입니다

    perm. |  mod/del. |  reply.
    • 씨디맨 2009.09.25 09:49 신고

      제 생각으로는 좀 비우는게 사실 더 좋아요. 본문이 이미 넓기에 사이드바의 비중은 크지 않거든요.

      반대로 사이드바에 너무 많이 넣으면 본문이 안그래도 넓은데 포커스가 사이드바로 가지않는데 뭔가 너무 사이드바에 많아서 혼란스러워 보일 수 있습니다. 태그도, 위젯다 가능하면 안다는게 좋겠죠. 그리고 SMS 는 글자보다는 배너도 괜찮아요. ^^

      perm. |  mod/del. | 
  14. demun 2009.09.27 12:29

    파이어버그 정말 유용한 기능입니다.
    저처럼 html,css를 잘 모르는 사람한테는 더욱 좋죠^^

    사용법 잘 봤습니다. 모르는 사람은 역시 사용법부터 봐야죠^^
    다음 애드클릭스팁에 이어서 잘 봤습니다.

    perm. |  mod/del. |  reply.
  15. 2010.08.20 08:38

    비밀댓글입니다

    perm. |  mod/del. |  reply.