HTML 비주얼 스튜디오 코드 설치

앞서 메모장으로 HTML을 만들어 기본구조를 세우는 것을 보셨을 겁니다.

그러나 앞으로 길어질 HTML코드에 메모장은 작업대로서 매우 부족합니다.

당장 오타를 확인하기가 매우 어렵죠.

그래서 시중에는 수많은 HTML 편집기들이 있습니다만, 여기서는 비주얼 스튜디오 코드를 소개 / 설치를 진행하려 합니다.

MS사에서 만든 다목적 텍스트 에디터라고 생각하시면 됩니다.

기본 텍스트에서 프로그래밍까지 거의 대부분의 언어들을 취급하지만 IDE가 없기에 테스트 실행이 불가능하다는 단점이 있습니다.

물론 HTML은 웹 브라우저(인터넷 익스플로저, 크롬 등)만 있으면 땡이니 크게 관련이 없습니다.

Visual Studio Code 설치를 위해 아래의 하이퍼링크로 접속하여 프로그램을 다운로드 받습니다.

링크

클릭 시 원본으로 볼 수 있습니다.

다운로드에 설치하는 것 까지는 따로 설명드릴 필요가 없으니 생략합니다

물론 이런 창이 뜨면 취향껏 체크하시면 됩니다.

저는 기타의 3번째 항목을 제외한 모든 항목에 체크하고 설치했습니다.

"PATH에 추가"를 선택하신 경우 컴퓨터를 다시시작해야 적용되니 참고하세요.

클릭 시 원본으로 볼 수 있습니다.

설치완료 후 실행 시 다음과 같은 화면이 뜰 것 입니다.

저는 빈 화면이지만 새로 설치하신 분은 인터페이스가 영어인데다가 환영페이지가 반겨줄겁니다.

상단의 탭에 보시면 끌 수 있으니 꺼주시고 왼쪽 아이콘 중에 5번째 아이콘을 클릭해줍시다.

마켓 플레이스 입니다.

이곳에서는 크롬 확장기능마냥 에디터에 다양한 확장기능을 추가할 수 있는 공간입니다.

처음 설치하시는 분들은 왼쪽의 "사용" 상자란이 텅텅 비어있을겁니다.

우선 인터페이스가 영어라 알아보기 힘드니 먼저 한글 인터페이스부터 설치하도록 합시다.

왼쪽 상단의 검색란에 "korean"을 입력 후 하단에 나열되는 리스트 중 맨 위의 항목에 Install 버튼을 클릭해줍시다.

위 사진은 이미 설치한 상태라 설정버튼이 뜹니다.

이후 우측하단에 뜨는 Restart Now 버튼을 누르면 한글적용이 완료됩니다.

이제 한결 보기 편해졌으니 바로 간단하게 프로젝트를 새로 작성해보도록 합시다.

왼쪽 아이콘 리스트 중 맨 위 아이콘을 클릭해서 빈 화면으로 돌아갑니다.

최상단의 "파일" 탭을 클릭하여 새 파일을 생성합니다.

빈 텍스트 파일로 Untitled-1이라는 파일명으로 생성됩니다.

이제 다시 "파일" 탭을 클릭하여 이번엔 "다른 이름으로 저장..."을 클릭합시다.

위와 같은 작은 새 창이 뜹니다.

크게 어려울 것 없이 앞전에 해봤던 느낌으로 .txt를 .html로 바꾸시거나 파일형식을 클릭하여 HTML을 찾아 선택하시면 됩니다.

파일이름은 원하시는 대로, 저장할 경로는 적당한데다 선택 후 "저장" 버튼을 클릭합니다.

<>모양이 바뀌고 아래에는 파일 경로가 새로 생겼습니다.

실제로 저 경로를 따라가 열어보면 html파일이 새로 생겼음을 확인할 수 있습니다.

테스트를 위해 앞전에 썼던 Html 기본구조 글에서 만들어봤던 코드를 그대로 적용시켜 봅시다.

클릭 시 원본으로 볼 수 있습니다.

코드 입력 후 저장하여 파일을 열면 정상적으로 결과가 뜨는 것을 확인할 수 있습니다.

글이 길어지니 나누어야겠네요...

다음에는 비주얼 코드에서 Html 편의 확장기능들을 소개시켜주겠습니다.