도움말을 보려면 아래 사이트에 접속하면 된다. 비록 영어로 되어 있지만 크롬 번역기를 이용하면 된다.
Documentation for Visual Studio Code
Find out how to set-up and get the most from Visual Studio Code. 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
나중에 당연히 알게 되겠지만 위 사이트로 접속하여 extensions로 들어가서 필요한 것들을 추가하면 VScode를 아주 유용하고 편리하게 사용할 수 있다. 많이들 설치하는 extension은 다음과 같다.
1. Material Theme : 배경 색상
2. Material Icon Theme : 아이콘 바꿔주기
3. Prettier - Code formatter : 자동 저장하게 할 수 있고, 탭키도 2칸만 되도록 할 수 있다.(Ctrl + ,)
4. Bracket Pair Colorizer : 코드에 색깔 지정하여 괄호마다 색이 다르게 바뀜
5. Indent Rainbow : 들여쓰기 부분이 색깔이 하이라이트됨
6. Auto Rename Tag : HTML 편집할 때 앞의 태그를 바꾸면 뒤의 태그가 자동으로 바뀌어 편리함
7. CSS Peek : css를 바로 찾을 수 있게 해줌(Ctrl 누른 상태로 클릭하면 css 찾아서 보여줌)
8. HTML CSS Support : css 자동완성기능
9. Live Server : 설치 후 명령팔레트에서 Open with Live Server를 short key를 누르면 새로운 브라우저가 나오고 html을 수정해서 저장하면 바로 반영된다.
10. Markdown Preview : 내부에 이미 반영되어 있으며 마크다운 파일이 어떻게 보여지는지 확인해 볼 수 있다.
VScode 설치 방법
1. 공식 사이트(https://code.visualstudio.com)에 접속한 후 자신의 운영체제에 맞춰 파일을 다운로드 받는다.
2. 다운로드 받은 파일을 실행하여 설치한다.
3. 설치 후 다음과 같은 실행화면을 볼 수 있다.
한글 사용하기
1. Ctrl + Shift + P로 커맨드 팔레트를 실행한 후 language로 검색해서 Configure Display Language를 선택
3. 한국어 선택
3. 재시작
간단한 프로그램 웹페이지 만들기
1. VScode를 실행한다.
2. 왼쪽 상단의 "파일" 메뉴에서 "새 텍스트 파일"을 선택하거나, 단축키 Ctrl+N을 눌러 새 파일을 생성한다.
3. 다음 코드를 입력한다.
- ht 만 입력한 후 Enter키를 누르면 <html></html>이 자동으로 나타난다.
- Enter를 누른 후 head+body를 입력한 후 탭키를 누르면 <head></head><body></body>가 나타난다.
- body 태그 안에 h1+ol>li*3을 입력한 후 탭키를 누르면 <h1></h1><ol><li></li><li></li><li></li></ol>이 나타난다.
- h1태그 안에는 Web, li태그 안에는 각각 html, css, js를 입력한다.
참고) lorem이라고 입력한 후 탭키를 누르면 샘플 텍스트가 자동으로 입력된다.
편집 및 기능 익히기
1. 들여쓰기 - 영역선택 후 탭키
2. 내어쓰기 - 영역선택 후 Shift + 탭키
3. 주석 - Ctrl + / 를 누르면 각 언어에 맞는 주석이 설정된다. 다시 누르면 해제된다.
4. 찾기와 바꾸기 - Ctrl + F를 누르면 원하는 단어를 찾을 수 있고 찾기 앞의 > 부분을 누르면 바꾸기도 가능하다.
5. 폴더 열기 - 폴더(프로젝트)별로 관리할 때 사용하면 편리하다. 탐색기 형태로 나타나며 그 위에서 새파일 만들기가 가능하다.
6. 화면 나누기 - 파일을 2개 이상 열려 있는 경우 제목부분을 드래그&드롭으로 상하좌우로 나누거나 원상복귀할 수 있다.
7. 파일 찾기 - Ctrl + p를 이용하면 파일 일부분으로 원하는 파일을 찾을 수 있다.
8. 왼쪽 돋보기 아이콘을 이용하면 내용 기반으로 파일을 찾을 수 있고 그 밑의 바꾸기를 이용하면 한번에 내용을 바꿀 수도 있다.
9. 메뉴-파일-기본설정-설정을 통해 다양한 설정 변경을 할 수 있다.
- Ctrl + = : 창의 확대, Ctrl + - : 창의 축소
- Word Wrap : 줄바
- Ctrl + B : 사이드 바 감추기/보이
- 보기 - 명령어 팔레트(Ctrl+Shift+P)
10. Ctrl+K+S : 바로가기키(단축키 )
실행하기
1. 왼쪽 아이콘 중 실행 및 디버그 아이콘을 눌러 실행시킬 수 있다. html인 경우 파일 제목 하단에 브라우저를 선택할 수 있도록 되어 있으며 파이썬인 경우 확장 프로그램을 설치하면 실행시킬 수 있다.
2. html 의 경우 VScode 밖에서 보여진다. 안에서 보여지도록 하기 위해서는 확장기능을 설치해야 한다. HTML의 경우 HTML preview를 찾아서 설치한다. 왼쪽 아이콘 중 탐색기를 누른 후 html파일을 마우스 오른쪽 버튼으로 누르면 Open Preview를 선택할 수 있다. 그리고 파일의 내용을 바꿔보면 Preview의 내용도 바뀌는 것을 볼 수 있다.
댓글