웹개발자 도구, 웹 디벨로퍼 툴바 설치/제거 방법

 

 

[html/css]웹개발자 도구, 웹 디벨로퍼 툴바 설치/제거 방법

 

오늘은 웹개발자나 웹디자이너에게 유용한 도구를 소개하려고 합니다

 

바로 웹 디벨로퍼 툴바(Web Developer Toolbar) 인데요.

 

html이나 css 언어를 다루는 분들은 이미 사용하고 계시는 분도 많을 테지만

 

저는 최근에 설치해서 사용해 보았습니다..

 

웹 디벨로퍼 툴바는 정말 다양한 기능이 있지만, 제가 주로 사용해 본 기능들을

 

나열하자면 이렇습니다:

 

 

css 편집, html 편집, css 보기, inline 스타일 끄기, embeded 스타일 끄기

div 크기 표시하기, img 외곽선 표시, div 외곽선 표시, id/class 상세 표시하기,

요소(element) 정보 표시하기, 요소 크기 표시하기, 유효성 검사하기

 

 

 

즉, 웹 디벨로퍼 툴바는 웹 사이트 분석 도구이기도 하고, 편집 도구, 혹은 오류를 측정할 수 있는 도구라고

 

할 수 있겠네요~

 

오늘은 Web Developer Toolbar 설치와 제거 방법을 알아 보고

 

다음 시간엔 활용법을 하나씩 알아볼게요

 

 

※준비 사항※

 

웹 디벨로퍼 툴바는 Chrome, Firefox, Opera 브라우저에 기반한 확장 프로그램이므로

 

이 브라우저가 설치 돼 있어야 사용할 수 있습니다. (모두 무료)

 

*구 인터넷익스플로러 버전에서 아래 사이트로 가면 올바로 표시되지 않을 수 있어요*

 

 

구글 크롬 다운로드 사이트

http://www.google.co.kr/intl/ko/chrome/

 

파이어폭스 다운로드 사이트('한국어'로 선택하고, 운영체제를 선택하세요)

https://www.mozilla.org/en-US/firefox/all/

 

 

오페라 다운로드 사이트

http://www.opera.com/ko

 

  

웹 디벨로퍼 툴바 추가하는 방법

 

STEP 0. 위의 브라우저를 다운받은 후 설치 합니다.

 

STEP 1. 아래 사이트에 접속하여, 해당 브라우저에 알맞은 버튼을 클릭해주세요.

 

http://chrispederick.com/work/web-developer/

 

크롬은 1, 파이어폭스는 2, 오페라는 3.

 

 

 

 

[구글 크롬에 웹 디벨로퍼 툴바 추가하기]

 

STEP 2. [DOWNLOAD FOR CHROME]을 누르면 아래 화면이 나오는데 상단에 [무료]버튼을 누릅니다.

 

 

 

 

아래 팝업창이 뜨면 [추가]버튼을 누릅니다.

 

 

 

설치 완료 후 구글 크롬 상단 오른쪽에

 

톱니바퀴 모양(빨간 동그라미 표시)을 클릭하면 웹 디벨로퍼 툴바의 여러 기능들이 나옵니다.

 

 

 

 

[파이어 폭스에 웹 디벨로퍼 툴바 추가하기]

 

STEP 2. [DOWNLOAD FOR FIREFOX] 버튼을 클릭하면 아래 화면이 나옵니다.

 

여기에서 [Firefox에 추가] 클릭해 주세요.

 

 

 

 

 

 

소프트웨어 설치 팝업창이 나오면 [설치]를 클릭합니다.

 

설치 후 브라우저를 끄고 재실행하면 상단에 탭이 생성된 것이 보입니다.

 

 

 

 

오페라는 제가 설치해 보지 못해 생략하겠습니다~

 

 

 

구글 크롬에서 웹 디벨로퍼 툴바 제거하기

 

화면 상단  버튼-> 도구 -> 확장 프로그램 클릭 합니다.

그럼 아래 화면이 나오는데요, Web Developer 오른쪽에 있는 쓰레기 아이콘을 클릭하면 제거됩니다. 

 

 

 

 

파이어 폭스에서 웹 디벨로퍼 툴바 제거하기

 

화면 상단  버튼-> 부가 기능 클릭

 

그럼 아래 화면이 나오는데요, web developer 오른쪽에 [제거] 버튼을 누르면 지워집니다.

 

 

다음 시간엔 웹 디벨로퍼 툴바(web developer toolbar) 활용법도 알아볼게요~

 

 

 

 

웹 개발자 도구 web developer toolbar 개관

 

지구별 안내서 네이버 오픈캐스트 활용법

 

네이버는 이렇게 한다! HTML/CSS 코딩 컨벤션