코드 편집기 VSCode 설치하기
코드 편집기의 종류에는 아톰, 비주얼스튜디오코드(VSCode), 서브라이 텍스트, 이클립스 같은 코딩에 특화된 에디터가 있습니다. 물론 윈도즈 메모장이나 리눅스 vi에디터를 사용하는 개발자도 있습니다. 여기서는 사용자가 가장 많은 윈도즈 운영체제의 비주얼스튜디오코드(VSCode)를 설치하여 사용하고자 합니다.
비주얼스튜디오코드는 마이크로소프트에서 제공하는 에디터로 프리 소프트웨어입니다. 윈도우즈가 아닌 리눅스나 매킨토시 운영체제에서도 사용이 가능합니다.
VSCode 홈페이지에 접속
VSCode 홈페이지 주소는 https://code.visualstudio.com/ 입니다. 이곳에서 VSCode를 다운로드하여 설치합니다. 윈도즈 운영체제라면 바로 다운로드합니다.
다른 운영체제를 사용한다면 다음과 같은 선택 항목을 통해 해당 운영체제를 택해 다운로드합니다.
프로그램 설치
다운로드 폴더로 이동해서 설치 파일을 클릭하여 프로그램을 설치합니다.
설치 폴더는 기본으로 지정합니다. 물론 다른 폴더를 지정하여 설치할 수 있습니다. 그럴 경우는 '찾아보기' 버튼을 클릭하여 폴더를 지정해줘야 합니다.
추가 작업 선택
추가 작업을 선택합니다. 기본 옵션에서 제외할 것과 추가할 것을 알아봅니다.
 |
 |
| 추가 작업의 기본 옵션 | 추가 작업의 옵션 변경 |
설치 버튼을 누르면 설치가 시작됩니다.
설치가 완료되면 바로 실행할 수 있습니다.
최초 설치된 화면에서 테마를 선택할 수 있습니다. 기본 테마는 'Dark'입니다. 'Light'는 하얀 바탕, 'Dark'는 검은 바탕입니다. 거기에 '고대비(高對比)' 화면이 곁들인 네 가지가 있습니다.
테마를 더 자세히 보려면 'See More Themes...' 버튼을 클릭하여 다른 테마를 고를 수 있습니다.
VSCode 확장 프로그램 설치하기
VSCcode에는 코드 작성에 유익한 확장 프로그램(Extension)이 많습니다. 이를 잘 활용하면 코드 생산성을 높일 수 있습니다. 한글 확장프로그램(Korean Language Pack for Visual Studio Code / Microsoft)을 설치하면 메뉴와 설명을 한글로 변경합니다.
왼쪽 툴바의 확장 아이콘을 선택하면 확장 프로그램을 설치할 수 있는 검색창이 나옵니다. 검색창에 'korean'을 입력하면 한글과 관련된 확장 프로그램을 찾을 수 있습니다.
마켓플레이스에서 필요한 확장 프로그램을 추가 하겠습니다.
라이브 서버 확장 프로그램(Live Server / Ritwick Dey)은 작성한 HTML 코드를 실시간으로 확인할 수 있는 확장팩입니다. 코드를 작성하고 저장하면 Live Server와 연동된 HTML 문서가 실시간으로 반영되어 실행 결과를 확인할 수 있습니다.
자신의 코딩 작업에 필요한 확장 프로그램을 찾아 설치할 수 있습니다. 검색창 위에 필터링 아이콘을 통해 자세하게 구분하여 찾아 설치할 수도 있습니다.
HTML 태그는 시작 태그와 종료 태그로 구성됩니다. 이 두 태그는 항상 쌍을 이뤄야 하는데 만약 한쪽 태그를 변경하면 쌍을 이루는 다른 쪽 태그도 변경해야 합니다. 이 작업을 자동으로 해주는 확장 프로그램이 Auto Rename입니다.
간단한 소스 코딩하기
초기 설정을 마쳤으니 간단한 코딩을 하겠습니다. 열려진 폴더에 'index.html' 파일을 생성하고 코딩을 시작합니다. 첫 줄에 'html'을 타이핑했더니 자동으로 완성할 내용을 보여줍니다. 'html:5'를 선택합니다.
body 태그 안에 '안녕하세요'를 입력하고 웹브라우저에 어떻게 표현되는지 확인하게요. 편집창에서 마우스 오른쪽 키를 클릭하고 'Open wiht Live Server'를 선택합니다.
웹브라우저가 열리면서 '안녕하세요'가 출력되는 것을 확인했습니다.
라이브 서버 확장 프로그램은 소스에서 변경된 내용을 바로 브라우저에서 확인할 수 있습니다. 물론 저장을 끝낸 뒤에.
정리
비주얼스튜디오코드는 마이크로소프트에서 무료로 제공하는 서비스입니다. 막강한 편집 기능을 갖추고 있는 멀티플랫폼(운영체제 구별 없이) 개발 프로그램입니다. 유료 프로그램인 비주얼스튜디오(Visual Studio)와 비교하면 VSCode는 에디터 핵심 기능을 담고 있습니다. 코딩, 컴파일, 디버깅 기능이 그것입니다.
'HTML' 카테고리의 다른 글
| 코딩에 에디터가 필요할까 (0) | 2022.12.04 |
|---|---|
| 작성된 코드를 FTP로 서버에 올리기 (0) | 2021.09.25 |
| 비주얼 스튜디오와 비주얼 스튜디오 코드 (0) | 2021.09.22 |
| 웹이 무엇인가요? (0) | 2021.09.22 |
| 티스토리 블로그 프로젝트 (0) | 2021.09.22 |