HTML_CSS

Visual Studio Code(VSC)에서 Live Server 설치 및 사용하기

코딩ABC 2023. 9. 21. 09:31
반응형

라이브 서버(live server)는 비주얼스튜디오 코드에서 HTML 파일을 작성할 때 편리한 기능을 제공합니다.

 

Live Server 설치

1. 비주얼스튜디오 코드를 시작합니다.

2. 왼쪽의 확장 기능을 선택하고, “Live Server”를 입력해서 설치합니다.

Visual Studio Code(VSC)에서 Live Server 설치 및 사용하기

 

 

화면의 우측 하단에 “Go Live”가 나타나는 것을 볼 수 있습니다 – Live Server가 실행되고 있습니다.

Visual Studio Code(VSC)에서 Live Server 설치 및 사용하기

 

 

3. HTML 파일을 생성해 보겠습니다.

맨 먼저 폴더를 선택합니다 작업 폴더가 없으면 폴더를 한 개 생성해서 이 폴더를 선택합니다.

파일을 선택하는 것이 아니라 작업할 폴더만 선택하는 것입니다.

Visual Studio Code(VSC)에서 Live Server 설치 및 사용하기

 

반응형

 

4. HTML 파일 생성하기

새 파일을 선택하고, 파일명을 입력합니다.

Visual Studio Code(VSC)에서 Live Server 설치 및 사용하기

 

빈 화면에서 “html:5”를 입력하거나 아래와 같이 선택합니다.

Visual Studio Code(VSC)에서 Live Server 설치 및 사용하기

 

기본 코드가 자동으로 생성되는 것을 볼 수 있습니다.

이 기능은 라이브 서버를 이용하지 않더라고 가능합니다.

“!”를 입력하고 [Tab] 키를 눌러도 됩니다.

Visual Studio Code(VSC)에서 Live Server 설치 및 사용하기

 

5. 결과 확인하기

HTML을 작업하고, 아래와 같이 결과를 확인할 수 있습니다.

이 기능도 라이브 서버를 이용하지 않고 “Ctrl_F5”키를 이용해서 실행할 수 있습니다.

Visual Studio Code(VSC)에서 Live Server 설치 및 사용하기

 

웹 브라우저에서 HTML 파일이 실행되는 것을 확인할 수 있습니다.

Visual Studio Code(VSC)에서 Live Server 설치 및 사용하기

 

 

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
반응형