들어가기 앞서,
- 코드를 작성하면서 바로바로 페이지에 반영되는 모습을 확인할 수 있게 임시로 로컬 서버를 오픈할 수 있다. 이를 가능하게 해주는 확장기능이 Live Server 기능이다. (실제 제품은 실제 호스팅 서버에 업로드해야한다.)
Live Server 설치
Extensions에서 live server를 검색하면 첫 번째로 나오는 Live Server라는 확장기능을 설치한다.
Live Server 사용
오른쪽 하단에 Go Live가 추가된 것을 확인할 수 있을 것이다.
기본 코드에 Hello world!를 찍는 위 html 코드를 작성한 후 go live를 클릭하면 go live부분이 Port로 바뀌고
위와 같은 페이지가 출력되는 것을 확인할 수 있다.
이제 코드를 수정하고 저장하면 바로바로 이 페이지에 반영되어 눈으로 확인이 가능하다.
'Front-end' 카테고리의 다른 글
| reset.css 브라우저 스타일 초기화 (0) | 2022.01.09 |
|---|---|
| codepen으로 코드 테스트 (0) | 2022.01.09 |
| Beautify 코드 정리 기능 (0) | 2022.01.06 |
| <html>, <head>, <body> (0) | 2022.01.06 |
| 상대경로, 절대경로 (0) | 2022.01.05 |
