개발자 도구, 코드 에디터

개발자 도구

개발자 도구란?

웹 브라우저는 기본적으로 개발자 도구가 탑재되어 있다.

웹 사이트 개발용 도구로 HTML CSS코드 확인할 수 있으며 , 모바일 모니터링, 네트워크 상태 점검, 스크립트 명령어 확인 등 다양한 기능을 통해 개발자에게 편의를 제공해줌

 

개발자 도구 확인 법

웹 사이트 접속 후 F12키를 누르면 개발자 도구를 볼 수 있다.

 

크롬 기준 점 세개 → 도구 더보기 → 개발자도구 로 확인 가능



이 개발자 도구를 활용해서 각종 웹사이트들의 HTML, CSS코드들을 확인해 볼 수 있다.

Elements로 확인 가능

Elements는 사용자가 띄워 놓은 웹사이트의 소스코드를 보여준다.

 

코드 에디터

코드 에디터란?

프로그래머가 프로그램 소스 코드를 편집하기 위해 사용하는 소프트웨어

코드는 결국 텍스트이기 때문에 이 텍스트를 빠르고 , 편하게 작성하기 위해서는 코드 에디터를 사용하는 것이 좋다.

html 에디터들은 많지만 주로 Visual Studio Code를 많이 사용한다.

오픈소스 프로그램

다양한 확장기능과 높은 인지도로 인해서 초보자도 접근 용이 한 장점을 가지고 있다.

 

Visual Studio Code 설치 

https://code.visualstudio.com/

링크 접속

Visual Studio Code - Code Editing. Redefined

출처 : https://code.visualstudio.com/

 Download for Windows 클릭 후 설치 진행해서 실습 진행

 

html VS code 기본 세팅

파일 생성 후 새 파일 눌러서 원하는 파일 이름 작성뒤 확장자를 .html로 적어주면 html 파일이 생성된다.

파일 생성 후 코드창에 !치면 기본 html 구조 코드가 자동으로 작성된다