[Front-End] Visual Studio Code로 HTML 웹사이트 만들기

Visual Studio Code에서 HTML 파일 만들기

STEP1) Visual Studio Code를 다운로드한다.

(나는 예전에 다운로드하았었기 때문에 다시 다운로드하지 않았다.)

STEP2) 상단의 메뉴바에 "File"을 선택하고, "Open Folder..."를 클릭한다.

STEP3) 원하는 폴더를 고른 후에 "폴더 선택"을 클릭한다.

STEP4) 왼쪽에 EXPLORER 아래에 선택했던 폴더가 있을 것이다. 마우스를 올려보면 아이콘이 뜨고, "New Folder"를 클릭한 후 폴더를 하나 더 만들어 준다.

STEP5) 그대로 STEP4처럼 마우스를 올리고 아이콘이 뜨면 "New File"을 클릭한 후에 파일명을 "이름.html"이라고 짓는다. html이라고 치면 나오는 "html:5"를 엔터 하면 HTML 상용구가 자동 완성된다. 이곳에 원하는 대로 코딩하면 됨!

 

브라우저에서 HTML 파일 열기

STEP0) 작성하던 html 파일을 저장한다.

STEP1) 왼쪽 EXPLORER에서 html 파일을 마우스 우클릭하고 "COPY PATH"를 클릭한다.

STEP2) 원하는 브라우저를 열고, 주소창에 복사한 경로를 붙여 넣는다.

(복사한 주소는 로컬 주소이므로 작업하는 로컬에서만 사용 가능하다.)

 

⤷ Visual Studio Code 튜토리얼 영상

code.visualstudio.com/docs/introvideos/basics

Getting started with Visual Studio Code