xhtml 코딩 작업물의 구조를 알아보기 쉽게 도와주는 파이어폭스의 확장기능인 파이어버그에 대해서 알아보겠습니다.
파이어버그를 쓰면 블로그 본문의 글자를 바꾸고 싶은데 어디를 바꿔야하는지, 제목의 색은 어디서 바꿔야할지, 본문의 넓이는 어디를 수정해야하는지 쉽게 알수있습니다. 일일이 구조를 확인하고 css파일을 뒤질 필요가 없이 간단하게 수정할 위치를 파악할수 있습니다.
일단은 파이어폭스의 최신 버전과 파이어버그를 다운로드 받아 설치하도록 합시다.
설치한 파이어폭스를 실행하고 구조를 파악하고 싶은 블로그로 이동한뒤
오른쪽 아래에 보이는 초록색 버튼을 더블크릭하면 파이어버그를 활성화 시킬수 있습니다.
메뉴가 꽤 많이 보이는데 우리에게 필요한건 간단한것 몇개 뿐이니 벌써부터 복잡해할 필요없어요.
파이어버그에 보이는 메뉴중 Inspect를 선택하면 마우스를 화면에 옮길때마다 푸른색 박스가 따라다니게 됩니다. 원하는 부분을 선택하면 해당 부분이 어떤 HTML로 구성되어있고 어떤 style로 디자인되어있는지 아래에 나타나게 됩니다.
우리가 필요로 하는건 Style탭에 나오는 정보들입니다.
'파피용.'이란 제목 부분에 어떤 CSS 속성들이 적용되었는지 어떤 css 파일의 몇번째 줄에 표기되어있는지 정보가 다 나오고 있습니다. 원하는 부분을 좀더 쉽고 빠르게 찾아내어 수정할수 있다는 얘기지요 :)
예시에선 마우스가 오버된 상황이라 a:hover 속성이 적용되어있으며, a:link, a:visited 속성이 덮여버린것을 확인하실수 있습니다.
제목 부분의 색상과 크기를 수정하고 싶으시다면 style.css 파일을 열어 17번째, 19번째 줄을 수정하면 되는겁니다.
비슷한 기능을 지원하는 IE Dev Toolbar도 있습니다만 firebug 쪽이 좀더 구체적으로 css속성과 속성이 어디에 위치하는지 보여주기 때문에 이쪽을 더 추천합니다.
아주 유용하고 완성도 높은 툴인데 무료!입니다. 멋진 세상이에요. :)
파이어버그를 쓰면 블로그 본문의 글자를 바꾸고 싶은데 어디를 바꿔야하는지, 제목의 색은 어디서 바꿔야할지, 본문의 넓이는 어디를 수정해야하는지 쉽게 알수있습니다. 일일이 구조를 확인하고 css파일을 뒤질 필요가 없이 간단하게 수정할 위치를 파악할수 있습니다.
일단은 파이어폭스의 최신 버전과 파이어버그를 다운로드 받아 설치하도록 합시다.
오른쪽 아래에 보이는 초록색 버튼을 더블크릭하면 파이어버그를 활성화 시킬수 있습니다.
메뉴가 꽤 많이 보이는데 우리에게 필요한건 간단한것 몇개 뿐이니 벌써부터 복잡해할 필요없어요.
파이어버그에 보이는 메뉴중 Inspect를 선택하면 마우스를 화면에 옮길때마다 푸른색 박스가 따라다니게 됩니다. 원하는 부분을 선택하면 해당 부분이 어떤 HTML로 구성되어있고 어떤 style로 디자인되어있는지 아래에 나타나게 됩니다.
요렇게~
우리가 필요로 하는건 Style탭에 나오는 정보들입니다.
'파피용.'이란 제목 부분에 어떤 CSS 속성들이 적용되었는지 어떤 css 파일의 몇번째 줄에 표기되어있는지 정보가 다 나오고 있습니다. 원하는 부분을 좀더 쉽고 빠르게 찾아내어 수정할수 있다는 얘기지요 :)
예시에선 마우스가 오버된 상황이라 a:hover 속성이 적용되어있으며, a:link, a:visited 속성이 덮여버린것을 확인하실수 있습니다.
제목 부분의 색상과 크기를 수정하고 싶으시다면 style.css 파일을 열어 17번째, 19번째 줄을 수정하면 되는겁니다.
비슷한 기능을 지원하는 IE Dev Toolbar도 있습니다만 firebug 쪽이 좀더 구체적으로 css속성과 속성이 어디에 위치하는지 보여주기 때문에 이쪽을 더 추천합니다.
아주 유용하고 완성도 높은 툴인데 무료!입니다. 멋진 세상이에요. :)
