VSCode 웹 개발 시작하기 - Live Server로 만드는 '니' 첫 번째 웹 페이지

VSCode LiveServer

 

HTML 웹 개발을 진행할 때는 웹 브라우저에서 실시간으로 결과를 확인하며 작업하는 것이 가장 정확합니다.

아직 설치하지 않았다면, 이전 글에서 설명한 Live Server 설치 방법을 참고하세요.

HTML 초보자를 위한 VSCode 확장 추천

---

간단한 HTML 페이지를 작성해보자.

바탕화면에 만든 HTML 폴더를 VSCode에서 'Open Folder' 버튼을 통해 열어줍니다.

Open HTML Folder

 

첫 번째 새 파일 아이콘을 클릭하여 index.html 파일을 생성합니다.

새 파일

VSCode index.html 만들기

 

index.html 파일을 선택한 후, 오른쪽 코딩 창에 "Hello World!"를 입력합니다.

이후, Ctrl + S를 눌러 저장합니다.

Hello World! 입력

 

그리고 우측 하단의 'Go Live' 버튼을 클릭합니다.

(Live Server 단축키: Alt + L, Alt + O)

Go Live

Go Live 실행

 

웹 브라우저가 실행되면,

드디어 '니' 첫 번째 웹 페이지가 완성된 것을 볼 수 있습니다.

Hello World HTML

 

앞으로도 HTML 기능을 정확하게 테스트하기 위해 직접 브라우저에서 실행하며 작업을 진행합니다.