비주얼 스튜디오 코드 설치하고 기본 설정하기
비주얼 스튜디오 코드 내려받기
웹 브라우저에서 비주얼 스튜디오 코드 홈페이지(https://code.visualstudio.com/)에 접속하면 아래 그림과 같은 화면이 나타납니다. 자신의 운영체제에 맞게 다운로드 링크가 만들어지기 때문에, [Download for Windows] 버튼을 클릭하여 설치 파일을 내려받으시면 됩니다.
비주얼 스튜디오 코드 설치하기
설치 과정에서 특별하게 다른 설정을 할 필요가 없기 때문에, 진행순서에 따라 [다음]과 [설치]버튼을 눌러서 설치를 마칩니다.
비주얼 스튜디오 코드 실행해 보기
설치를 마친 후 비주얼 스튜디오 코드를 실행하면 [Welcome] 탭과 함께 비주얼 스튜디오 코드가 시작됩니다. 처음에는 도움이 되지 않기 때문에 [Welcome] 탭의 X를 눌러 닫아줍니다.
시작 페이지는 기본적으로 비주얼 스튜디오 코드를 실행할 때마다 표시되는데, 화면 왼쪽 아래에 있는 'Show welcome page on startup' 의 체크 박스를 해제하면 다시 보이지 않습니다.
비주얼 스튜디오 코드의 기본 언어 바꾸기 (영어->한글)
비주얼 스튜디오 코드를 처음 설치하면 메뉴가 영어로 설정되어 있습니다. 프로그램의 기본 언어를 한글로 바꾸어보도록 하겠습니다.
확장 기능에서 한글 언어 팩 찾고 설치하기
비주얼 스튜디오 코드의 왼쪽 사이드바에서 확장 아이콘을 누르세요. 그리고 화면 왼쪽 상단에 보이는 확장 기능 검색 창에 'korean'을 입력합니다. 검색 결과 중에서 'korean language pack for visual studio code'를 누르면 오른쪽 창에 확장 기능을 소개하는 설명에 표시됩니다. <install>을 눌러서 설치하시기 바랍니다.
비주얼 스튜디오 코드 재시작하기
선택한 확장 기능을 설치하면 [Restart now]가 표시됩니다. 이 버튼을 누르면 비주얼 스튜디오 코드를 종료했다가 다시 실행됩니다.
비주얼 스튜디오 코드의 바뀐 화면 확인하기
비주얼 스튜디오 코드가 다시 열리면 위의 그림과 같이 메뉴가 모두 한글로 바뀌어 보기가 쉽습니다.
간단한 웹 문서 만들기
비주얼 스튜디오 코드를 설치하고 기본 설정을 마쳤으니 간단한 웹 문서를 만들어 보도록 하겠습니다.
html 문법은 추후에 살펴볼 예정입니다.
1단계 : 새 파일 선택하기
비주얼 스튜디오 코드를 실행하고 메뉴에서 [파일->새 파일] 선택한다.
오른쪽에 새로운 편집 창이 열리면서 Untitled-1이라는 탭이 생깁니다. 파일 이름과 형식을 저장하지 않은 상태입니다.
2단계 : html 코드 입력하기
편집 창에 다음과 같은 html 태그를 입력해 보겠습니다. <html>이나 <head>처럼 < > 기호로 묶인 부분을 태그라고 합니다. 웹 브라우저에는 태그 사이에 작성한 내용이 나타나고 태그 자체는 나타나지 않습니다. 웹 문서를 작성하면서 들여쓰기 할때에는 'spacebar'나 'tab'키를 사용하면 됩니다. 아래의 내용은 tab 으로 들여쓰기를 한 소스 코드 입니다. 똑같이 입력해보시기 바랍니다.
3단계 : 파일 저장하기
입력을 마쳤다면 메뉴에서 [파일->저장]을 선택하거나 ctrl+s 를 눌러 파일을 저장합니다. 이때 저장할 파일의 위치를 지정해야 합니다. code라는 폴더를 만들어 파일을 저장하세요. index.html로 저장해봅시다. (필히 확장자가 들어가야합니다.)
code라는 폴더로 들어가, index.html 파일을 더블 클릭 해보면 왼쪽과 같은 창이 뜨는 것을 확인 할 수 있습니다.
오늘은 시작 단계이므로 이정도까지만 하고 마무리 하도록 하겠습니다.
'일상정리' 카테고리의 다른 글
| [코딩초보3]HTML 파일 만들기 (0) | 2022.07.21 |
|---|---|
| [코딩초보2]HTML 기본 문서 만들기 (0) | 2022.07.20 |
| 섬유기사 취득방법 (2014년 필기시험문제 포함) (0) | 2022.07.20 |
| Klip 클립 NFT 무료 에어드랍 AIRDROP (22.07.08) (0) | 2022.07.08 |
| KODEX 미국달러선물인버스2X 매수추천 (22.07.07) (0) | 2022.07.08 |