Firefox 웹 브라우저와 Web Developer 확장 기능 사용법 (CPL-TR-08-03)

Firefox 웹 브라우저와 Web Developer 확장 기능 사용법

(CPL-TR-08-03)

- 목 차 -

1 다운로드 모질라 공식 홈페이지에서 해당 운영체제에 맞는 버전을 다운로드 받아서 설치한다. 버전 별 다 운로드 경로는 아래 표와 같다. O 정식버전 다운로드 http://www.mozilla.or.kr/ko/firefox/all.html O 베타버전 다운로드 http://www.mozilla.or.kr/ko/firefox/all-beta.html http://www.mozilla.com/en-US/firefox/all-beta.html 본 문서에서는 최신 베타버전인 “Firefox 3.0b4” 한국어 버전을 설치하였다. Firefox는 설치 옵션이 거의 없으므로, 설치 도중 별다르게 신경 쓸 부분이 없다.

2 Web Developer 확장기능 설치

Firefox 웹 브라우저의 장점은 오픈 소스 개발환경과 이로 인한, 다양한 부가 기능이 존재하는 점 이다. 부가 기능은 Firefox의 테마를 수정하거나, 기본 기능에 없는 기능을 추가해 주는 소프트웨 어를 말하며, 대표적으로 “IE Tab (Internet Explorer 탭확장)”, “Adblock Plus”, “No Script”, “Flash Got”, “Web Developer” 등이 있다. 부가 기능은 “https://addons.mozilla.org/ko/firefox” 경로에서 다운로드 받을 수 있으며, 웹 상에서 바로 설치가 가능하다.

설치된 부가 기능을 수정하거나, 새 부가 기능을 설치하려면, “도구 / 부가 기능” 메뉴를 선택한다.

부가 기능 메뉴를 선택하면 설치된 확장 기능과 테마, 플러그인 등을 볼 수 있는 작은 창이 실행 된다.

이 중 “전체 검색” 탭에서 “부가 기능 모음” 또는 “전체 추천 부가 기능 보기” 링크를 클릭하면 Firefox의 부가 기능 웹사이트로 자동 접속이 된다. 부가 기능 웹사이트에는 수 많은 부가 기능이 존재한다. 이 중 본 문서에서는 “Web Developer” 확장 기능을 설치해서 실행해 볼 것이다. 해당 사이트의 좌측 메뉴로부터 “추천 부가 기능” 또는 “확장 기능 / 확장 기능 분류 별로 보기 / 웹 개발 도구”를 선택해서 “Web Developer” 확장 기능을 찾는다.

“Web Developer”라는 제목 글씨를 클릭하면 아래와 같이 Web Developer의 설치 페이지로 연결 이 된다. 2008년 3월 현재 Web Developer의 버전은 1.1.5이다. 부가 기능 세부 페이지에서는 아 래 그림과 같이 설치 가능한 Firefox 버전과 설치하기 링크를 제공한다. 당연히 시스템에 설치된 Firefox 버전과 호환되는 부가 기능만 설치할 수 있다. 다행히 Web Developer 1.1.5는 앞 절에서 설치한 Firefox 버전 3.0b4와 호환된다.

“설치 하기”를 클릭하면 아래 그림과 같이 부가 기능 설치 창이 실행된다. 설치한 부가 기능을 적 용하기 위해서는 Firefox를 다시 시작해야 한다. “Firefox 다시 시작” 버튼을 클릭해서 Firefox를 다 시 시작한다.

Firefox를 다시 시작했다면 아래 그림과 같이 Web Developer 도구를 볼 수 있다.

3 확장기능 테스트

이 절에서는 간단하게 설치한 Web Developer 확장 기능의 사용방법을 살펴 본다. 먼저 Firefox를 실행하여 W3C 공식 사이트에 접속한다. W3C 공식 사이트의 URL은 “http://www.w3c.org”이다.

W3C 공식 사이트에서 사용된 CSS 코드를 살펴 보기 위하여 Web Developer 도구에서 “CSS 버튼 ( )”을 클릭하여 “Edit CSS” 메뉴 항목을 선택한다. “Edit CSS” 항목의 단축키인 “Ctrl+Shift+E” 을 사용할 수도 있다. 여기서 리눅스 환경의 Firefox와 실행결과가 조금 차이 난다. 리눅스 상에서 실행해보면 별 문제 없이 CSS 편집 창이 실행되지만, 윈도우즈 환경에서는 “Frame들로 구성된 페이지는 지원하지 않 는다.”라는 영문 메시지를 보게 된다. (본인이 봤을 때에는 윈도우 코드의 버그인 것 같다.) 이런 경우, Firefox의 “프레임 보기” 기능을 이용하여 해당 프레임만 따로 불러들인 후, “Edit CSS” 항목 을 실행하면 된다. 오류가 난 웹사이트에 마우스 우측 버튼을 클릭하여 “현재 프레임 / 이 프레임만 보이기”를 선택 한다.

프레임을 선택이 끝나면 현재 주소의 맨 끝에 ‘?’가 추가된다. (눈으로 보기에도 별 다른 변화를 찾을 수 없고, 리눅스 환경에서 실행한 Firefox나 Microsoft Internet Explorer를 사용하여 테스트해 보면 Frame 페이지가 아니다.)

다시 “Edit CSS” 항목을 실행하면 현재 웹 페이지의 스타일 시트를, CSS 파일 별로 볼 수 있다.

“Edit CSS” 기능은 실시간으로 현재 페이지의 스타일을 변경해서 적용해 볼 수 있기 때문에 상당 히 유용한 기능이다. 몇몇 인지도가 높은 사이트들을 돌아다니면서 해당 사이트의 스타일시트 활 용방법들을 살펴보고, 또 수정해 보는 것은 상당히 흥미로운 작업이 될 것이다.

다음 소개할 기능은 마우스 포인터의 현재 위치에 사용된 태그를 실시간으로 보여주는 기능이 다. ”Information 버튼 ( )”을 클릭한 후, “Display Element Information” 메뉴항목을 선택 한다. 역시 단축키인 “Ctrl+Shift+F”를 사용할 수도 있다.

“Display Element Information” 항목을 실행하면 Web Developer 도구 밑에 작업 표시줄 같은 것 이 하나 생기면서 현재 마우스 포인터의 위치에 사용된 태그들을 보여준다. 마우스 포인터를 변 경하면 이 부분의 태그들이 바뀌는 것을 볼 수 있다. 원하는 태그가 나왔을 때, 마우스 버튼을 클 릭하면 해당 태그에 대한 구체적인 정보가 노란색 글 상자에 표시된다.

마지막으로 소개할 기능은 CSS 코드보기 기능과 HTML 소스보기 기능이다. CSS 코드보기 기능은 현재 웹 페이지에서 사용하는 모든 스타일 시트 코드를 CSS 파일 별로 정리하여, 하나의 HTML 페이지로 보여주는 기능이고, HTML 소스보기 기능은 현재 웹 페이지의 HTML 코드를 보여주는 기능으로 Firefox의 기본 기능이다. CSS 코드보기 기능은 “CSS 버튼 ( )”을 클릭한 후, “View CSS” 항목을 선택하거나, 단축키 “Ctrl+Shift+C”를 눌러서 실행할 수 있다. 다음 그림은 W3C 공식 사이트에서 CSS 코드보기 기능 을 실행한 예이다.

HTML 소스보기 기능은 “View Source 버튼 ( )”을 클릭한 후, “View Source” 항목을 선 택하거나, 단축키 “Ctrl+Shift+U” 또는 “Ctrl+U”를 눌러서 실행할 수 있다. 다음 그림은 W3C 공식 사이트에서 HTML 소스보기 기능을 실행한 경우이다.

이상으로 Firefox 웹 브라우저와 Firefox의 Web Developer 확장 기능을 그림 위주로 소개하였다. 다소 진부한 내용이었지만 소프트웨어를 사용해보기도 전에 설치 자체를 꺼려하는 학생들을 고려 하여 몇 자 적어보았다.

이 땅의 모든 웹 프로그래머들이 표준을 준수하여, 표준만 지원한다면 어떤 웹 브라우저를 사용 하더라도 동일한 서비스를 받을 수 있는 컴퓨팅 환경을 고대하며 짧은 글을 마친다.