HTML 시작 전 개발자 환경 구축하기
● JavaScript Code 설치
https://code.visualstudio.com/ 접속 > 설치 파일 다운로드 후 설치
※ VS code 설치 후 한국어 적용
1. 확장 아이콘 선택 > 검색 : Korean > Korean Language Pack for Visual Studio Code > install
2. F1 > Configure Display Language 입력 > locale 값 : 한국어 선택 > VS code Restart >> 한국어 적용 확인
※ 비주얼 스튜디오코드 설정
1. 뷰바의 하단에 있는 톱니바퀴 아이콘(관리) > 색 테마 > 밝게 선택
※ 비주얼 스튜디오코드 글꼴 설정
1. 뷰바의 하단에 있는 톱니바퀴 아이콘(관리) > 설정 > Editor
2. Editor : Font Size > 글꼴 크기 변경 (Noto Sans Mono CJK KR)
Editor : Font Familly > 글 서체 변경
※ 비주얼 스튜디오코드 탭 설정
1. 뷰바의 하단에 있는 톱니바퀴 아이콘(관리) > 설정 > Editor
2. Editor : Tab Size 항목 > 4에서 2로 변경
※ 비주얼 스튜디오코드 자동저장 설정
1. 뷰바의 하단에 있는 톱니바퀴 아이콘(관리) > 설정 > Files
2. Files : Auto Save 항목 > 'afterDelay' 변경 (:코드 변경 있으면 무조건 저장하겠다는 뜻)
※ 비주얼 스튜디오코드 코드 줄바꿈 설정
1. 뷰바의 하단에 있는 톱니바퀴 아이콘(관리) > 설정 > Editor
2. Editor : Word wrap 항목 > 'On' 변경
※ ESLint (문법 및 코드 스타일을 검사해주는 도구) 설치
1. 뷰바의 확장 아이콘 > VS code 확장 마켓플레이스에 'ESLint' 검색 > 설치 [install]
※ Open in Browser (HTML 파일을 VS Code에서 브라우저로 실행) 설치
1. 뷰바의 확장 아이콘 > VS code 확장 마켓플레이스에 'Open-in-Browser' 검색 > 제작자 이름 "Coderfee" 선택 >
설치 [install]
2. VS Code에서 HTML 파일을 불러와 [Ctrl+Alt+o]를 누르면
상단에 브라우저를 선택하는 목록이 뜨고 브라우저를 선택해 실행함
※ Live Server (새로고침 없이 수정된 코드를 반영) 설치
1. 뷰바의 확장 아이콘 > VS code 확장 마켓플레이스에 'Live server' 검색 > 설치 [install]
● JS Code 에서 'html' 입력 후 'html:5' 선택 시 기본 코드가 자동으로 작성됨
'국비지원 JAVA 풀스택 과정 > HTML+CSS3' 카테고리의 다른 글
[HTML+CSS3] CSS3 스타일 (0) | 2022.09.22 |
---|---|
[HTML+CSS3] 추가 입력 양식 태그 (HTML) (2) | 2022.09.21 |
[HTML+CSS3] 웹 컨텐츠를 담는 태그 (HTML) (2) | 2022.09.20 |
[HTML+CSS3] 하이퍼링크 (2) | 2022.09.19 |
[HTML+CSS3] HTML 기본문서 개념 (0) | 2022.09.16 |