HTML 5:) 비주얼스튜디오 코드 기본세팅 웹 편집기 / HTML 독학 / 코딩독학

웹 편집기 기초세팅

비주얼 스튜디오 코드

---

 

HTML의 기본에 이어서 어찌되었든 독학을 하는 초보자의 입장에선 어떤 방법으로든 프로그램을 사용하고, 실제 예시등을 가지고 무엇이든 만들어 보아야 합니다.

 

흔히들 많이 사용하는 비주얼 스튜디오 코드이지만 사용하기에 앞서 조금의 세팅이 필요하기 때문에 누구나 따라하실 수 있게 간단히 작성해 보았습니다

 

 

1. 프로그램 다운로드

code.visualstudio.com/ 

Visual Studio Code - Code Editing. Redefined

상기링크에서 간단히 다운받을 수 있습니다. (당연히 무료입니다)

 

2. 프로그램 설치

처음 설치를 하시면, 해당 사진과 달리 모든 페이지가 영어로 되어 있습니다. (혹시 바로 한글이 되시면 알려주세요)

사진과 같이 한글모드로 변경하기 위해서는 추가 설치가 필요합니다.

 

3. 한글설정

왼쪽 상단의 박스모양을 클릭하시고(확장 아이콘)

사진표시와 같이 검색에 Korean을 검색하신 뒤 install을 클릭하시면, 재부팅을 하라는 안내가 나옵니다.

재부팅을 완료하시면 사진과 같이 한글화 된 비주얼스튜디오 코드를 사용하실 수 있게 됩니다.

 

4. 라이브서버 설치

또 확장란에서 이어서 라이브 서버를 설치 해 주시고,

 

상기의 오픈 인 브라우저도 설치해줍니다.

crtl +alt + o를 누르게 되면, HTML작성 중 크롬, 익스플로러, 엣지 등을 이용해 현재완성된 웹 페이지를 사전에 확인할 수 있게 해줍니다.

 

여기까지 프로그램의 기본세팅을 한 뒤, 작업 폴더를 구분해야합니다.

 

저도 처음에는 그냥 저냥 하면되는줄 알았는데, 알고보니 폴더를 나누고 해당 폴더에 제작하려는 웹에서 사용될 사진, 영상, 오디오 소스 및 css파일을 하나씩 하나씩 정리하는게 매우 중요하더라구요.

 

예를들어 표시와같이 "제출용"이란 폴더를 선택하고 작업을 진행하게되면,

 

폴더 내에서 제가 공부해 보던 html파일들과, 미리 넣어둔 image폴더, audio폴더가 같이 나오게 됩니다.

 

이렇게까지 해서 html의 가장 기초적인 준비는 완료됩니다.

 

추가:) 테마설정

사진과 같이 색 테마 탭을 통해서, 밝은색과 어두운색의 테마를 이용하실 수 있습니다~!

 

여기까지가(?) 아마도 가장 기본적인 비주얼 스튜디오 코드의 기본 시작 세팅일 듯 합니다.

저는 인터넷을 찾아보면서도 보고 있지만, 현재는 이지스퍼블리싱에서 출판한 "Do it!"시리즈의 HTML5 관련 책을 보고 공부를 하고 있습니다.

 

초보자가 접근하기 쉽게 제작 된 책 같고, 다음 책 리뷰에서 소개해 드리도록 할게요~