1. 홈페이지 접속
Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.
code.visualstudio.com
2. 다운로드 및 설치
오른쪽 상단의 "다운로드"를 클릭하면 아래와 같은 창이 뜬다.
컴퓨터 환경에 맞게 다운로드를 하고 설치를 하면 된다.
* Mac m1 같은 경우는 " AppleSilicon " 을 클릭해서 다운받고 설치하면 된다.
3. Live Server 설치하기
Live Server는 html 파일이 저장될 때마다 출력을 해줘서 실시간으로 미리보기를 할 수 있는 편리한 기능이다.
왼쪽에 테트리스 같은 네모난 블록을 클릭하고,
검색창에 " liver server "을 검색해주면 맨 위에 보라색의 Liver Server 가 검색된다.
install 을 눌러주고
이 상태면 설치 완료!
4. Live Server 실행하기
코드창의 빈 공간에서 오른쪽 마우스 버튼을 누르고,
Open with Live Server 를 클릭하면 실행이 되게 된다.
(단축키: mac- command+L+O / window- alt+L+O)
원래 코드에서 <body> 태그 안에 문자를 추가해주고 저장을 눌러보면,
코드를 입력하고 저장을 해주면 즉각적으로 변경되는 것을 볼 수 있다.
'Front-End > HTML 5' 카테고리의 다른 글
| [프론트엔드][html5] 6. 글자태그 (0) | 2021.06.29 |
|---|---|
| [프론트엔드][html5] 5. html 파일 생성/출력, 주의사항 (0) | 2021.06.28 |
| [프론트엔드][html5] 4. 콘텐츠 (0) | 2021.06.28 |
| [프론트엔드][html5] 3. html 기본구조, 주석 (0) | 2021.06.28 |
| [프론트엔드][HTML5] 1. HTML5 소개 (0) | 2021.06.27 |
