[HTML5] 비주얼스튜디오코드 사용하는 방법과 HTML 실행하는 방법, 다운로드

도움이 되셨으면 공유하기!

앞으로 HTML5, 자바스크립트, CSS를 배우기에 앞서, 비주얼스튜디오 사용하는 방법과 바로 HTML 실행하는 방법, 다운로드에 대해서 알아보도록 할건데요.

우선 다운로드는 마이크로소프트 회사 홈페이지에서 다운하실 수있습니다. 과정은 아래의 이미지를 참고해주시면 되며, 링크는 여기를 참고해주세요.

[HTML5] 비주얼스튜디오코드 사용하는 방법과 HTML 실행하는 방법, 다운로드
[HTML5] 비주얼스튜디오코드 사용하는 방법과 HTML 실행하는 방법, 다운로드

현 기기에 맞춰서 다운로드해주시면 되는데요. 맥북 사용자이신 분들은 맥OS를, 윈도우 데스크톱에서 이용하고 있으신 분들은 윈도우 64버전을 누르시면 됩니다.

[HTML5] 비주얼스튜디오코드 사용하는 방법과 HTML 실행하는 방법, 다운로드
[HTML5] 비주얼스튜디오코드 사용하는 방법과 HTML 실행하는 방법, 다운로드
[HTML5] 비주얼스튜디오코드 사용하는 방법과 HTML 실행하는 방법, 다운로드
[HTML5] 비주얼스튜디오코드 사용하는 방법과 HTML 실행하는 방법, 다운로드

바탕화면에다가 바로 아이콘을 추가하시고 싶으신 분들은 ‘바탕 화면에 바로가기 만들기‘를 체크해주는 쪽이 좋습니다.

파일지정하기

앞으로 HTML 및 JS, CSS파일을 저장해둘 저장 폴더가 필요합니다. 그대로 드래그 앤 드롭을 하셔도 되며, 제가 알려드리는 내용에 따라 해주셔도 됩니다.

[HTML5] 비주얼스튜디오코드 사용하는 방법과 HTML 실행하는 방법, 다운로드
[HTML5] 비주얼스튜디오코드 사용하는 방법과 HTML 실행하는 방법, 다운로드
[HTML5] 비주얼스튜디오코드 사용하는 방법과 HTML 실행하는 방법, 다운로드

위 과정을 모두 해주시면, 좌측에 보시면 여러분들이 저장한 폴더명이 보이실 것입니다. 이제부터, HTML 및 CSS, JS 등의 파일들을 생성하실 수있는데요.

비주얼스튜디오코드를 통해 HTML 파일 만들어보기

[HTML5] 비주얼스튜디오코드 사용하는 방법과 HTML 실행하는 방법, 다운로드

폴더명 우측에 있는 첫번째 아이콘을 클릭하시면, 파일을 생성할 수있습니다. (두번째 아이콘은 폴더를 생성하실 수있습니다.)

[HTML5] 비주얼스튜디오코드 사용하는 방법과 HTML 실행하는 방법, 다운로드

저는 예시로 index.html이란 파일을 생성하였습니다. 여러분들도 아무렇게나 이름을 지정하셔도 좋고, 아니면 저처럼 index.html이라고 만들어주셔도 됩니다. (html 확장자는 반드시 입력해주셔야 합니다. 입력하지 않으면, 해당 파일이 html이라는 것을 인식하지 못합니다.)

[HTML5] 비주얼스튜디오코드 사용하는 방법과 HTML 실행하는 방법, 다운로드

다 만들어주셨으면, 여러분들이 지정한 폴더에 위 이미지처럼 html 파일이 생성된 것을 확인할 수있습니다. 그럼, 앞으로 html 코드 작성할 일만 남아있겠네요!

CSS와 JS파일 생성하기

마찬가지로, 위 과정에서 하셨던 확장자 부분에 html 대신, css 혹은 js라고 입력해주시면 되겠습니다. 예를들어, 저는 index.html이라고 파일을 생성하였고, css, js로 변경하고 싶은 경우에는 index.css 혹은 index.js라고 바꿔주면 되겠죠.

php 역시 이를 활용하시면 됩니다만, 로컬호스트 환경에서 작동시키기 위해서는 php와 아파치 파일을 별도로 설치해주셔야 됩니다. 하는 방법은 추후에 포스팅하도록 하겠습니다.

비주얼스튜디오코드를 통해 HTML 코딩방법

[HTML5] 비주얼스튜디오코드 사용하는 방법과 HTML 실행하는 방법, 다운로드

좌측에있는 파일을 클릭하시면, 우측에 코드작성하는 페이지를 확인하실 수있습니다. 여기다가 여러분 마음대로 코드작성하시면 됩니다.

[HTML5] 비주얼스튜디오코드 사용하는 방법과 HTML 실행하는 방법, 다운로드
[HTML5] 비주얼스튜디오코드 사용하는 방법과 HTML 실행하는 방법, 다운로드

참고로, 단축기 적용이 가능합니다. ! (느낌표)를 입력하시고 엔터를 누르시게 되면 자동으로 HTML5 문서라고 선언해줄 수있습니다. 만약 느낌표 했음에도 자동으로 코드가 나오지 않는다고 하시는 분들은 지워보시고 재입력 후 엔터를 해보도록 하세요. 그럼 되실 것입니다.

작성한 코드 저장 후, 출력해보기

자동완성

[HTML5] 비주얼스튜디오코드 사용하는 방법과 HTML 실행하는 방법, 다운로드

우선 간편하게 코딩을 하기위해서 자동완성어를 알아두시면 좋습니다. 우선 위 이미지에 보면 다양한 자동완성 명령어들이 있는데요.

1번은 여러분들이 작성하고싶은 태그명칭을 입력하신후 바로 엔터를 눌러주시면, <태그명></태그명> 태그가 바로 출력됩니다.

2번은 <li></li> 태그를 한번에 3개를 생성하겠다는 의미입니다.

3번은 p 태그 안에 입력할 내용을 넣으시면 p태그 + 입력한 내용이 출력됩니다.

4번은 div 클래스명을 container이란 태그로 생성하겠다라는 의미입니다. 그리고, 바로 아래에 있는 div>ul>li의 경우는 div 하위요소를 ul로 만들어주겠다이며, 또 ul 안에 li를 생성하겠다라는 의미입니다.

코드 작성

[HTML5] 비주얼스튜디오코드 사용하는 방법과 HTML 실행하는 방법, 다운로드

그냥 아무거나 입력해봤습니다. 그럼 한번 출력을 해보도록 하겠습니다. (알트 > F > S 순서대로 눌러주시면바로 저장할 수있습니다.)

출력하기

[HTML5] 비주얼스튜디오코드 사용하는 방법과 HTML 실행하는 방법, 다운로드
[HTML5] 비주얼스튜디오코드 사용하는 방법과 HTML 실행하는 방법, 다운로드

저장한 파일을 더블클릭하시게되면, 내가 작성한 코드를 로컬호스트 환경에서 바로바로 확인이가능합니다.

비주얼스튜디오코드를 통해 HTML 파일 바로 실행하는 방법

[HTML5] 비주얼스튜디오코드 사용하는 방법과 HTML 실행하는 방법, 다운로드

일일이 저장한 파일을 확인하는 것은 귀찮을 수 있습니다. 그럼, 바로바로 라이브로 확인할 수있는 플러그인을 사용하시면 되는데요.

이 외에도 다양한 방법이 있습니다만, 저는 Live Server란 플러그인을 통해서, 적용 실행하는 편입니다. 1번 부분 탭을 누르시고, 2번 검색란에다가 Live Server라고 검색하신뒤, 3번에 보이시면, 인스톨을 해주시면 됩니다. 이후, 비주얼스튜디오코드를 꺼주시고 재실행 부탁드립니다.

[HTML5] 비주얼스튜디오코드 사용하는 방법과 HTML 실행하는 방법, 다운로드

우측 하단에 보시면 Go Live란 아이콘이 노출되시면, 잘 적용된 것입니다. 만약 껏다켰음에도 나타나지 않는다면, 비주얼스튜디오 자체를 재설치하고, 플러그인도 재설치해보도록 하세요.

[HTML5] 비주얼스튜디오코드 사용하는 방법과 HTML 실행하는 방법, 다운로드

클릭하시게 되면, 앞으로 어떤 프로그램을 열 것인지의 대한 팝업창 하나가 나타날 것입니다. 크롬으로 하셔도 익스플로러로 하셔도 관계는 없습니다만, 익스의 경우는 불편한점이 한두가지가 아니기때문에 크롬브라우저를 추천드리는 바입니다.

라이브서버의 장점으로는 내가 파일을 저장할때마다 바로바로, html 파일에 적용이된다는 것인데요. 일일이 파일을 열어주거나 새로고침할 필요가 없어진 셈입니다.

비주얼스튜디오코드 테마 색상 변경해보기

[HTML5] 비주얼스튜디오코드 사용하는 방법과 HTML 실행하는 방법, 다운로드

테마의 검정 색상이 싫으신 분들도 계실 수 있으니, 알아두시면 여러모로 좋을 수도 있을 것 같습니다. 우선 플러그인 페이지로 다시 돌아오셔서, 검색창에다가 theme란 검색어를 입력하시면 다양한 테마들이 나타납니다.

예를들어, 윈터 이즈 커밍 테마의 경우는 다크블루 색상을 지원하고 있으며, 이외에도 노란색 보라색 등 다양하게 있습니다. 하나하나 알아보시면서 설치 후 적용해보시면 좋을 것 같습니다.

마치며

이 외에도 매우 다양한 플러그인들이 있습니다. 예를들어, html css 서포트라던지, 스니펫 기능이라던지 등 일일이 하나하나 셀수없을 정도입니다. 끝!

1 개의 코멘트

회신을 남겨주세요

귀하의 의견을 입력하십시오!
여기에 이름을 입력하십시오.

관련 콘텐츠

티스토리 블로그 스킨 예쁘게 꾸미는 방법!

티스토리 블로그를 꾸미는 방법은 매우 간단합니다. 우선은 두 가지 방법을 통해서 꾸며볼 수있는데, 첫번째는 HTML 편집을 통한 방법과 두번째는...

More Articles Like This