웹문서를 제작한 후에는 반드시 웹브라우저를 통해서 내가 만든 웹문서 정상적으로 작동되는지 확인하게 됩니다. 하지만 대부분은 내가 의도하지 않은 디자인 형태로 화면에 출력됩니다. 숙련된 개발자라도 복잡한 구조로 진행된 웹문서를 한 번에 코딩한다는 것을 불가능합니다. 처음에는 한 요소를 코딩하고 브라우저를 확인하고, 조금 숙련되면 몇 가지 요소를 코딩하고 확인하는 작업을 반복하게 되는 것이죠
css와 자바스크립트가 포함되면 더 복잡하게 되며 필수적으로 웹브라우저의 개발자 도구라는 것을 통해 화면의 디자인과 동작이 정상구동되는지 에러는 없는지 확인하게 됩니다. 개발자 도구는 웹문서 작업에 필수 요소라 할 수 있습니다.
개발자 도구의 실행 방법은 3가지 정도로 할 수 있습니다.
- 브라우저 설정 및 제어 버튼을 통한 방법
- 마우스 우클릭 방법
- 단축키 방법
1. 브라우저 설정 및 제어 버튼
2. 마우스 우클릭
3. 단축키 F12키를 눌러도 됩니다.
개발자 도구가 실행되면 기본적으로 우측에 html 문서의 소스와 해당 html 요소의 style이 구분된 화면이 그림처럼 나타납니다. 디자인 시에는 이 2개의 영역을 계속적으로 보면서 작업을 하게 됩니다.
이 외에도 개발자 도구를 활용하면 여러 가지 문제를 확인하면서 작업할 수 있습니다만 html 요소 영역과 스타일 영역을 확인하면서 작업한다는 것이 가장 기본이 되겠습니다.
728x90