이글은 초보자분들을 위한 글입니다. 블로그 스킨을 사용은 하고 싶고, 블로그 스킨을 수정은 하고 싶은데 어느곳에 어떤 스타일이 적용이 되어 있는지 모르시는 분들에게 하나의 방법을 알려드립니다.

일단 아주 초보적인 것 부터....
브라우져 
많이들 사용하고 계시는것이 익스플로러입니다. 이와 같은 동작을 하는 브라우져로는 크롬,파이어폭스,오페라,사파리,웹마....등등 아주 많이 있습니다.

그중에 블로그 스킨수정을 할수 있는것은 유명한 파이어버그라는 것이 있씁니다.
물론 크롬이나 오페라,사파리,익스플로러에서도 html, css, js 코드등을 볼수는 있습니다만 가장 유명하고 강력한것이 파이어폭스에 파이어버그라는 확장기능입니다.

서론접고 파이어폭스가 없는분은 파이어폭스를 다운로드해서 설치하시고 그다음 파이어버그 확장기능을 설치하시기 바랍니다.
여기서 제가 만든 포터블 파이어폭스도 이야기를 해야겠죠^^; 

파이어폭스와 파이어버그를 다 설치했다고 가정합니다.
파이어폭스를 실행하고 F12 를 클릭하시면 아래와 같은 화면을 보실수 있을겁니다.
제 블로그에 접속한 모습입니다.


일단 원하는곳에 스타일이 어떻게 적용이 되어있는지 알려면 선택하는 과정을 알아야겠지요.
사이드바의 너비가 어떤지 한번 볼까요???
파이어폭스의 왼쪽부분을 보시면 사각형의 화살표가 있는것이 있습니다.(이미지참고)
그 네모를 일단 클릭합니다.


그리고 마우스를 움직여보면 색이 변경이 되는것을 알수 있습니다.
이때 원하는 부분 즉 사이드바 부분을 클릭을 합니다.
마우스를 사이드바 부분에 올렸을때 스샷입니다.
선택영역에 파랑색 테두리가 쳐지는것을 보실수 있을겁니다.


마우스로 사이드바 부분을 클릭하면 아래 파이어버그 부분이 변경된것을 보실수 있을겁니다.
왼쪽으로는 html 코드가 보이고 오른쪽으로는 css 코드가 보일겁니다.


한번 수정을 해볼까요???
color에 #222222 라고 적힌부분을 클릭하면 수정할수 있는 모드로 변경이 됩니다.


이걸 다른것으로 수정하시면 즉시 변경되어 보여집니다.
이것은 실질적으로 변경되는것이 아니라 임시로 그렇게 보여지는겁니다.

한가지더 color 앞부분에 둥근원이 사선으로 그어진것을 보실수 있을겁니다.
그걸 클릭하면 그곳에 적용된 스타일이 없어집니다.
한번 볼까요?

클릭하기전

둥근모양을 클릭했을때



스타일이 해제가 되어서 링크앞에 있던 블릿이 없어진것을 보실수 있을겁니다.

마찬가지로 다른 모든 부분을 이런식으로 클릭해서 수정해서 미리보기를 하실수 있습니다.
신고

댓글

  1. 2011.01.19 00:20 신고 BlogIcon 데빌씨  댓글주소  수정/삭제  댓글쓰기

    스킨을 수정하는데 아직 초보라서 어느곳에 어느 스타일이 적용되어있는지 잘 몰랐는데 이렇게 좋은게 있었네요. 저같은 초보자한테는 딱 좋은 정보인것 같습니다. 글 잘봤습니다 감사합니다 :)

  2. 2011.01.20 14:41 신고 BlogIcon 재아  댓글주소  수정/삭제  댓글쓰기

    파이어버그 좋습니다~~

    스킨 작업하거나 스킨 수정 부분에 많이 도움이 되죠!