Visual Studio Code(VSC)에서 Live Server 설치 및 사용하기
라이브 서버(live server)는 비주얼스튜디오 코드에서 HTML 파일을 작성할 때 편리한 기능을 제공합니다.
Live Server 설치
1. 비주얼스튜디오 코드를 시작합니다.
2. 왼쪽의 확장 기능을 선택하고, “Live Server”를 입력해서 설치합니다.
화면의 우측 하단에 “Go Live”가 나타나는 것을 볼 수 있습니다 – Live Server가 실행되고 있습니다.
3. HTML 파일을 생성해 보겠습니다.
맨 먼저 폴더를 선택합니다 – 작업 폴더가 없으면 폴더를 한 개 생성해서 이 폴더를 선택합니다.
파일을 선택하는 것이 아니라 작업할 폴더만 선택하는 것입니다.
4. HTML 파일 생성하기
“새 파일”을 선택하고, 파일명을 입력합니다.
빈 화면에서 “html:5”를 입력하거나 아래와 같이 선택합니다.
기본 코드가 자동으로 생성되는 것을 볼 수 있습니다.
이 기능은 라이브 서버를 이용하지 않더라고 가능합니다.
“!”를 입력하고 [Tab] 키를 눌러도 됩니다.
5. 결과 확인하기
HTML을 작업하고, 아래와 같이 결과를 확인할 수 있습니다.
이 기능도 라이브 서버를 이용하지 않고 “Ctrl_F5”키를 이용해서 실행할 수 있습니다.
웹 브라우저에서 HTML 파일이 실행되는 것을 확인할 수 있습니다.
6. 라이브 서버를 이용하면 경로를 지정할 때, 서버에서 동작하는 것처럼 절대경로를 사용할 수 있습니다.
| images/a.jpg -- 상대 경로 ../images/a.jpg -- 상대경로 /images/a.jpg -- 절대경로 |
첫 문자가 '/'로 시작하면 절대경로 표기입니다. 서버에서 실행되지 않으면 HTML에서 절대경로를 사용할 수 있습니다.
접속하
홈 디렉토리(또는 루트 디렉토리)에 "index.html"을 생성하면, 서버처럼 연결해서 실행할 수 있습니다.
http://127.0.0.1:5500
또는
http://127.0.0.1:5500/index.html