CSS 스타일 분석 파이어버그 사용하기

혹시 티스토리 스킨 변경이나 스타일 시트를 변경하실때 어떻게 하시나요? 변경을 하고 업로드하고 어떻게 나오는지 확인하고 이렇게 하고 계신다면 정말 힘들게 작업을 하시는 건데요.

제가 알려드리는 방법은 이렇게 CSS변경을 하고 어떻게 바뀌는지 즉각적으로 알 수 있는 방법입니다.

이번시간에는 CSS 스타일 분석 방법으로 파이어버그를 이용한 방법을 알려드리겠습니다.

물론 파이어 버그 외에도 크롬에도 똑같은 기능이 있습니다. 제가 파이어버그에 더욱 편해서 이걸 쓰고 있는것이구요.

우선 파이어폭스를 설치를 해주세요. 설치법은 간단해서 따로설명은 안드리겠습니다.

다음으로 플러그인을 설치를 해주셔야 하는데요. 이름은 파이어버그 입니다. 이 플러그인이 너무 막강해서 퍼블리셔분들은 이것만 이용한다고 합니다.

파이어버그 우측의 옵션에서 [부가기능] 메뉴로 들어가주시기 바랍니다. 부가기능으로 플러그인 확장을 할 수 있습니다.

다음과정으로 검색어로 [firebug]로 검색하시면 제일첫 프로그램으로 나타납니다. 바로 설치하기 버튼으로 설치를 해주세요.

설치가 끝나셨으면 벌레? 모양을 클릭하여 주시면 아래쪽에 콘솔창이 생기며, 선택커서로서 지정할 CSS구조를 선택할 수 있습니다. 선택 구분커서, HTML,CSS동 구조등을 바로 파악할 수가 있어서 너무나 편리한데요 간단하게 나마 기능을 알려드리겠습니다.

우선 간단하게나마 설명을 드리겠습니다. 아래쪽 콘솔창의 선택커서로서 내용이나 단락을 선택하면 해당되는 CSS가 나오구요. 수치를 임의로 바꿔가면서 테스트 해볼 수 있습니다.

선택구분 커서로서 우측상단의 login 쪽을 선택해보았습니다.

자동으로 영역이 잡히면서 선택이 되는데요. 전 a태그를 골라서 거기에 관련된 CSS의 색상을 보시기 쉽게 바꾸었습니다.

여기에서 바꾸는 값들은 새로고침 한방이면 다시 제대로 돌아가니 부담없이 바꾸어 주셔도 됩니다. DOM 구조를 따라가다보니 a태그가 나왔고, 색상은 기본 검은색으로 잡혀있는데 이걸 빨강색으로 바꾸어볼께요.

CSS의 경우 상속이 있어서 한번 바꾸면 전부 바뀔 수도 있는데 제가 표기한 녹색부분의 a태그들이 영향을 받게 됩니다.

색상을 구분하기 쉽게 빨간색으로 변경하였습니다. a태그에 관련된 부분들이 전부 바뀌는 걸 볼 수가 있습니다.

손이가는데로 이곳저곳 선택을 하면서 임의로 바꾸어 보시기 바랍니다. 이걸 연습하시기전에는 HTML5/CSS3는 간단하게나마 공부를 해주시면 더욱 이해가 빠르실듯합니다.

여기까지 CSS 스타일분석 파이어버그를 이용한 방법을 알아보았는데 크롬이나 익스도 기능이 있기는 합니다만 미흡한 부분들이 있습니다. 여유가 되면 그런부분도 비교해서 포스팅해보겠습니다.

티스토리툴바