라이브 서버(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'HTML_CSS' 카테고리의 다른 글
| (HTML CSS) float: 3단 레이아웃 만들기 (0) | 2023.11.20 |
|---|---|
| (HTML CSS) 구글 웹폰트 사용하기 (0) | 2023.10.12 |
| (HTML) 교재 소스 다운로드 [HTML5 + CSS3 웹 표준의 정석] (0) | 2023.09.08 |
| (HTML5) 특수문자, 기호 사용하기 (0) | 2023.09.08 |
| HTML5 최신 표준 태그 (0) | 2023.09.07 |