Outsider's Dev Story

Stay Hungry. Stay Foolish. Don't Be Satisfied.
RetroTech 팟캐스트 44BITS 팟캐스트

FireScope :: HTML,CSS 레퍼런스 Firebug 애드온

어저께 "SitePoint Reference :: 괜찮은 HTML, CSS, Javascript 온라인 레퍼런스"에 대해서 포스팅을 했는데 마지막에 언급했던 SitePoint Reference에서 제공하는 Firebug 플러그인인 FireScope에 대해서 얘기하려고 한다.

Firebug는 파이어폭스에서 익스텐션으로 사용하는 웹개발툴인데 FireScope는 이 Firebug의 애드온으로 붙는다. 당연히 파이어폭스(2 이상)에서만 쓸 수 있고 Firebug(1.2 이상)가 설치되어 있어야만 사용이 가능하다. 파폭의 익스텐션은 설치가 간단하니까 생략하고 설치가 완료되면 아래 화면 처럼 Reference라는 탭이 새로 생긴다.

Firebug의 Reference탭 화면

SitePoint Reference 사이트에서 볼 수 있는 레퍼런스를 파이어버그 탭에서 바로 사용할 수 있다. 파이어버그를 사용한다면 편의성 면에서 레퍼런스 사이트를 따로 띄어놓고 사용하는 것보다 훨씬 편하다는 것은 당연하다. Javascript는 아직 베타판이기 때문인지 FireScope에서는 아직 HTML과 CSS만 지원하고 있다. 검색창을 통해서 바로 검색가능하며 유용한 브라우져 호환성여부도 확인할 수 있고 more를 누르면 Reference웹페이지로 연결이 된다. 왼쪽에 W3C로 아이콘이 표시되는 것은 파란색은 표준이란 의미이고 느낌표 표시는 더이상 권장되지 않는 요소라는 뜻이다.

HTML과 CSS탭의 새로추가된 메뉴화면

HTML 구조와 CSS를 볼수 있는 탬에서 우너하는 항목에서 마우스 오른쪽 클릭을 하면 FireScope를 설치하기 전에는 볼 수 없었던 "Look up"과 "Show Code Example"라는 2개의 메뉴가 추가된 것을 볼 수 있다. Look up을 하면 선택된 항목에 대해서 위에서 살펴보았던 Reference탬에서 바로 검색해서 표시해 준다. HTML이나 CSS를 Firebug로 분석하면서 바로 검색해 볼 수 있다는 면에서 유용하다.

Code Example 화면

"Show Code Example"를 클릭하면 HTML탭에서는 보통 레이아웃이나 스타일이 표시되는 오른쪽 프레임에 위의 화면처럼 선택한 항목의 예시코드를 보여준다. 이 예제코드는 Reference탬에서 검색된 항목을 클릭하는 형태로도 볼 수 있다.

HTML에서 선택한 엘리먼트의 레퍼런스를 보여주는 화면

또한 HTML에서 엘리먼트를 선택한 상태에서 Reference탭으로 넘어오면 위 화면처럼 선택된 엘리먼트와 그에에 대한 속성과 스타일에 대한 설명을 한눈에 파악하여 볼 수 있다.


기능으로 보면 많은 기능은 아니지만 레퍼런스라는 것을 Firebug라는 툴에 아주 잘 녹아놓은 듯한 느낌이다. 단순히 레퍼런스 탭 정도를 제공할 수 있음에도 불구하고 HTML과 CSS탭과의 유기적인 연동을 통해서 레퍼런스 문서를 참고하는 것 자체가 아주 자연스럽게 이루어 질 수 있도록 되어 있다.
2009/02/04 23:43 2009/02/04 23:43