VSCode 웹 프로젝트 생성 및 실행하기 (+핸드폰 화면 미리보기)

 

VSCode를 이용하여 html 파일을 만들고

문장을 출력해보는 실습을 해보겠습니다.

 

 

---

1. 상단 메뉴 에서 [파일 -> 폴더열기] 를 선택한 후, 프로젝트를 저장할 폴더를 생성 또는 선택해줍니다.

 

2. TEST라는 폴더를 선택하면 이렇게 작업 폴더로 선택됩니다.

 

3. [파일->새 파일] 선택 후 HTML 파일을 생성합니다.

 

4. index.html 파일을 만들어 주었습니다.

* 여기서 중요한 점은 폴더를 만든 후 파일을 만든다는 점입니다. 순서 기억하기!

 

---

 

코드 작성

 

VSCode는 생성된 파일 확장자를 보고 관련 기능을 제공해줍니다.

가장 자주 사용하는 상용구 코드를 불러오려면 두번째 [html:5] 를 클릭해줍니다.

 

한국어 사용, hello rozy 출력

이렇게 기본 구조를 불러온 후 언어를 변경해주고, body 부분에 원하는 문구를 입력해줍니다.

 

 

---

 

라이브 서버/크롬 개발자 도구로 프로젝트 테스트

 

라이브 서버와 크롬 개발자 도구로 프로젝트 결과를 볼 수 있습니다.

테스트 방법은 두가지가 있습니다.

 

* 첫번째 방법 : 우측 하단에서 [Go Live] 클릭

---

* 두번째 방법 : 편집 창에서 마우스 오른쪽 클릭하여 [Open with Live Server] 클릭

 

* 만약 라이브 서버가 설치되지 않았다면 참고

Visual Studio Code 라이브 서버 설치 , 사용 방법

Visual Studio Code 라이브 서버 설치 , 사용 방법

 

---

실행 화면

 

짠

 

만약 모바일 버전으로 보고싶다면

개발자 모드를 실행(=F12클릭)하여 [Toggle device toolbar] 클릭한 후, 

Dimensions 에서 원하는 기종을 선택해서 핸드폰 화면 미리보기를 볼 수 있습니다.

---

 

라이브 서버 종료

 

우측 하단 [Port : 5500] 부분을 클릭하면 port 가 close 되어 종료됩니다.