HTML 2 : 개발자 도구와 코드 에디터

-HTML 개발, 학습을 도와주는 소프트웨어

*1. 개발자 도구란?

: 웹사이트 개발용 도구로,

대부분의 최신 브라우저에는 이가 탑재되어 있다

-HTML CSS 코드 확인,

-모바일 모니터링,

-네트워크 상태 점검,

-스크립트 명령어 확인 등

다양한 기능을 통해 개발자에게 편의를 제공한다

(HTML 학습을 위해서는 일부 기능만 사용!)

*개발자 도구 열기 (크롬 기준)

1) (크롬 브라우저가 열려 있는 상태에서) ‘F12’ 누르기

2) 우측상단 메뉴 설정 > 도구 더보기 > 개발자 도구

3) (매킨토시 경우) option + command + I(아이임)

*실습

-앞선 개발자 도구 열기 방법 3가지 중 하나로 오픈

-’Elements’라는 메뉴 들어가기 (우리가 가장 많이 사용!)

: 현재 내가 펼쳐놓은 페이지의 HTML 소스코드 보여줌

*2. 코드 에디터란?

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

-코드는 결국 텍스트이다.

그러나 이 텍스트를 더 빠르게, 더 편하게 작성하기 위해서는 코드 에디터를 사용하는 것이 좋다

→ 텍스트 자동완성 + 하이라이팅 기능이 추가된 메모장이라고 생각!

*추천 코드 에디터

→ Visual stidio code

-인터페이스 예쁘고, 오픈소스

*실습

1) 폴더 열기

-비스코 화면 왼쪽 맨 위의 익스플로러 > 폴더 열기

-맥북은 command + O

2) 파일을 열고, 왼쪽 빈 공간에 우클릭 > 새 파일

-원하는 이름 입력하여 파일 생성 (index.html)

-그럼 기존의 파일에 생성된 것을 알 수 있음

3) 크롬으로 열기

-아까처럼 폴더 파일을 크롬에 ‘드래그 앤 드롭’