본문 바로가기
html

웹 개발자 도구 web developer toolbar 개관

by 지구별에 2014. 8. 22.

 

 

웹 개발자 도구 web developer toolbar 개관

 

 

며칠 전에 웹개발자 도구 web developer toolbar를 소개했었죠.

 

웹 디벨로퍼 툴바(web developer toolbar)는 웹개발자나 웹디자이너 html,css,자바스크립트 등을

 

다루는 분들에게 유용한 도구입니다.

 

오늘은 이 도구를 사용하는 방법에 대해 개략적으로 살펴 볼게요.

 

사전 준비: 파이어폭스, 구글, 오페라 브라우저를 이용하며, 웹 디벨로퍼 툴바가 설치돼 있어야 함.

 

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

 

저는 파이어폭스로 들어가 보았습니다.

 

우선 아무 사이트에 들어가 볼까요?

 

 

 

http://www.websache.de/

 

 

(1)은 화면 상단에 툴바가 설치된 모습입니다

 

(Disable /Cookies/Css/Forms/Images/Information/Miscellaneous/Outline/Resize/Tools/View Source/Options)

 

각각의 탭을 선택하면 그 안에 또 상세하게 분류가 됨.

 

 

(2)는 화면에 대고 마우스 오른쪽을 클릭해서 [요소 검사]  를 클릭하면 하단에 (3)과 (4)번 화면이 뜹니다

 

화면 상단에 설치된 툴바의 여러 기능들을 [요소 검사] 클릭으로 전체적으로 한 눈에 볼 수 있어요

 

 

(3)에는 콘솔/검사기/디버거/스타일 편집기/프로파일러/네크워크 탭이 있고

 

그 아래의 탭도 각각 선택할 수 있어요.

 

(4)번은 (3)에서 나온 화면 중 어떤 것을 선택하면, 그에 대한 상세 사항을 볼 수 있습니다.

 

(규칙/계산됨/글꼴/박스모델)텝을 선택할 수 있음.

 

 

(4)번 상단에 보면  아래와 같은 아이콘이 있습니다.

 

(5) 페이지에서 요소 고르기- 이 아이콘을 클릭 후 웹 사이트에서 원하는 요소를 클릭하면 하단에

html/css에서 관련된 요소를 진하게 표시해 줍니다.


(6) 한쪽에 콘솔 놓기


(7)반응형 웹 디자인 보기


(8)브라우저 창 옆으로 고정-(3),(4)화면을 옆으로 고정함


(9)별도 창으로 보기 -(3),(4)화면을 별도 창으로 보여줌


(10)개발자 도구 닫기

 


 

(1)번 상단 툴바에 있는 내용을 훑어 보면 다음과 같습니다.

 

 

인라인 스타일, 내부 스타일, 외부 스타일을 각각 끄고 테스트해 볼 수 있음.

 

 

html/css 변경 후 바로 적용되지 않을 때 disable cashe (캐시 사용하지 않기)

를 선택하면, 변경 내용이 바로 적용됩니다.

 

 

이미지 요소에 외곽선을 표시할 수 있음.

DIV 요소크기나, 배치 순서, 요소 정보, ID&CLASS 상세 정보 등을  표시할 수 있음.

 

숨겨진 요소를 표시함

Ruler로 요소의 크기를 측정할 수 있음

html 편집

원하는 요소에 외곽선을 표시할 수 있음.

 

 

css, html 유효성 검사

 

소스 보기

 

 

오늘은 웹 디벨로퍼 툴바(web developer toolbar)에 대한 개략적인 내용을 살펴 보았고요

 

다음부터는 활용 중심으로 알아 볼게요

 

 

 

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

 

HTML 기초 (markup, 브라우저 종류/ XHTML, XML, HTML5, DHTML 차이)

 

CSS란? (HTML과 CSS의 차이, CSS 작성법)

 

스크립트, 자바와 자바스크립트, 프로그래밍 언어

 

반응형

댓글