첫번째 HTML 파일

우선 화면에는 vscode가 실행되어 있는 상황일 것이다. 첫 번째 우리의 목표는 알맞은 폴더(디렉터리)에 첫 번째 HTML을 만든 후 웹 브라우저에서 만들어진 HTML을 확인해 보도록 할 것이다.
우선 실행된 vscode를 종료하도록 한다.

작업 폴더 생성

이전 포스트에서 HTML 파일을 작성하는 것이 우리의 목표라고 언급하였으며, 이런 파일들을 모아서 보관할 수 있도록 폴더 또는 디렉터리를 이용한다. 각자 본인의 편한 위치에 작업 폴더를 생성한다. 본 포스트에서는 D:\html 디렉터리를 생성하였다.

Extension (확장) 설치

vs code를 실행 시켜 보도록 하자. 기본적으로 바탕화면에 아이콘이 생성되지 않으므로, 윈도우즈의 경우 시작 버튼을 이용하여 찾아야 할 것이다.

한글 아니면 영어

사용 환경에 따라서 여러분의 vscode가 영어 환경 또는 한글 환경으로 실행 될 것이다. 만일 한글 환경의 운영체제(os: 윈도우즈 또는 맥 또는 리눅스)의 언어 설정에 따라서 처음 실행될 때 우측 하단에 언어팩을 한글로 변경할 것인지 안내가 나타난다.

필자의 경우 영어 환경을 쓰라고 추천한다. 어짜피 기술용어의 대부분이 영어이므로 어떻게든 영어 환경에 빠르게 익숙해 지는 것이 향후에 도움이 되기 때문이다.

Live Server 확장 설치

실행이 되었다면 이제 확장을 설치할 순서이다. 확장은 Extension이라고 하는데, vscode의 원래의 기능에서 다른 기능을 추가 시키는 기능이다. HTML에 대해서 학습을 진행하고 있는 현재 상황에서 작성된 HTML을 웹 브라우저를 통하여 볼 수 있도록 도와 주는 기능인 Live Server Extension을 설치 하도록 한다.

• 메뉴에서 File(파일) -> Preference(기본설정) -> Extensions(확장) 를 선택한다.
• 좌측 상단의 검색창에 Live Server를 입력하여 검색한다.
• 좌측의 검색 결과에서 Live Server를 선택한다.
• 우측의 상세 정보에서 install (설치)를 클릭하여 설치를 진행한다.
• 설치가 완료되면 install 버튼의 상태가 uninstall로 변경되고 installed라는 문구가 나타난다.

첫 HTML 파일

이제 이전에 생성한 폴더/디렉터리를 vscode에서 열어 보도록 한다. 일반적으로 HTML 파일 하나만을 작성하지 않고, 여러개의 HTML로 웹사이트가 구성되므로 vscode도 기본적으로 파일 하나가 아니 폴더를 지정하여 열도록 한다.

• File -> Open Folder 를 선택한다.
• 이전에 생성한 D:\html\ 폴더를 선택한다.
• 좌측에는 폴더가, 우측에는 작업을 하는 파일이 위치하게 된다.

파일 작성

새로운 파일 작성을 위해서 좌측의 디렉터리 창에서 우측 클릭후 새파일을 선택하여 새파일을 생성한다. 새파일이 생성되면 이름을 지정하게 되어 있으므로 입력하도록 한다.
우측의 넓은 편집창에 아무것도 없는 공백의 문서가 생성 되었을것이다. 우선은 파일 작성을 해보는것이 목적이므로 파일에 아래와 같이 코딩 해보도록 하자.

this is first example.

컨트롤키와 S 를 눌러서 저장 하도록 한다.

확장을 통해 확인

파일 작성이 아무것도 아니라는것을 확인 했을 것이다. 이제 vscode 창의 제일 우측, 제일 하단의 "Go Live" 라는 글자를 클릭하여 보자. 웹브라우저가 연결되면서. 입력한 글이 표출 될것이다. 처음이니 너무 실망은 하지 말도록 한다. 어짜피 포토샵을 배우던 캐드를 배우던 사각형부터 그려보지 않는가?

탐색기를 통해 확인

Live Server 확장 기능을 통해서 결과를 확인 하였지만. 탐색기를 열어 아까 저장한 파일을 더블 클릭하여 보자 웹 브라우저의 주소창에 표시되는 방식은 조금 다르지만, 결과를 확인 할 수 있을것이다.