웹 개발자 도구 web developer toolbar 개관

웹 개발자 도구 web developer toolbar 개관

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

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

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

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

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

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

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

(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)에 대한 개략적인 내용을 살펴 보았고요

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