[HTML] 개발 환경 설정하기

<용어 정리>

* 개발 환경 설정 

: 코드를 작성하고 실행하기 위해 여러 프로그램이 필요한데, 이러한 프로그램을 설치하고 준비하는 과정

 

* 확장 프로그램 (Extension)

: 코드 작성에 도음이 되는 유익한 프로그램 

 

1) Live Server : 가상 서버를 이용해 작성한 HTML 코드를 실시간으로 확인할 수 있는 확장 프로그램 

2) Auto Rename Tag : HTML의 처음과 끝 코드 중 하나만 수정했을 때, 나머지 하나도 똑같이 수정해주는 프로그램

3) HTML to CSS autocompletion : HTML 문서에서 class 속성으로 작성한 값을 연결된 CSS 파일에서 자동 완성 지원. 

4) HTML CSS Support : CSS 파일에서 작성한 클래스나 아이디 선택자 값을 연결된 HTML 문서의 id 속성과 class 속성값으로 적을 때 자동완성 지원

5) Code Runner : 자바스크립트 코드의 실행 VSCode 내부에서 할 수 있게 지원. 

6) Korean Language Pack for Visual Studio Code: 메뉴와 설명을 한글로 변경 

 

<!-- 위의 1번에서 5번 설치 완료 -->

 

* 웹의 실무 코드 에디터(Code Editor - 코드를 작성할 수 있는 환경) 

: Atom, Sublime Text, Brackets, Visual Studio Code 

 

이렇게 설치를 마무리하면 아래와 같이 index.html 파일 만들기 

: 기본적으로 index.html 파일을 만들어야 함. 웹 브라우저는 주소에 명시적으로 파일을 요청하지 않으면 가장 먼저 index.html 파일을 요청함. 

 

기본적으로 html 확장자를 만든 파일에서 ! 를 치고 enter를 치면 아래와 같은 기본 세팅이 나온다. 

Ctrl + Shift + p를 누르고 live server : open with live server를 누르면 바로 웹 페이지 실행결과가 나온다. 

body 부분에 나의 첫 번쨰 웹 페이지를 입력해보면 아래와 같다.