[HTML+CSS3] 개발자 환경 구축

HTML 시작 전 개발자 환경 구축하기

● JavaScript Code 설치

https://code.visualstudio.com/ 접속 > 설치 파일 다운로드 후 설치

VS Code 화면

※ 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' 선택 시 기본 코드가 자동으로 작성됨

자동으로 작성된 코드