VSCode 사용하기 (HTML/CSS/JS)

1. 웹은 어떻게 만들어지나?

웹(WEB)은 기본적으로 HTML과 CSS, 그리고 JavaScript로 이루어져있다. HTML은 웹의 뼈대를 구성하고, CSS는 웹을 시각적으로 꾸며주며, JavaScript는 웹의 동작 기능을 구현해주는 역할을 한다.

2. 웹을 만들 때 자주 쓰이는 툴?

VSCode(Visual Studio Code) - MicroSoft사에서 개발한 에디터이다. 아래 링크에 접속해서 쉽게 다운로드 받을 수 있다. 본인의 운영체제에 맞는 버전을 다운받아서 사용하면 된다.
https://code.visualstudio.com/download

3. VSCode 사용을 조금 더 편리하게!

설치하고 나서 실행하면 위 사진처럼 익스텐션(Extensions; 추가기능)을 설치할 수 있는 버튼이 있다.

익스텐션 버튼을 클릭하면 설치하고싶은 익스텐션을 검색할 수 있다. 여기서 검색해서 자신에게 필요한 익스텐션을 손쉽게 설치할 수 있다. 그냥 Install 버튼을 클릭하기만 하면 된다. 아래 목록은 많은 사람들이 사용하는 추천 익스텐션 목록들이다. 읽어보고 자신에게 필요한 것들을 설치하면 된다.

3.1. open in brower / Publisher: TechER

작성 중인 코드를 브라우저에서 실행해 볼 수 있게 해준다.

3.2. Live Server / Publisher: Ritwick Dey

Live Server는 가상 서버를 이용해, 작성한 HTML 코드를 실시간으로 확인할 수 있다.

3.3. Auto Rename Tag / Publisher: Jun Han

HTML 태그는 시작 태그와 종료 태그로 구성되어있는데, 이 기능을 사용하면 시작 태그나 종료 태그 둘 중 하나를 수정했을 때 다른 쪽은 자동으로 수정되도록 해준다.

3.4. HTML to CSS autocompletion / Publisher: solnurkarim

HTML 문서에서 class 속성으로 작성한 값을 연결된 CSS 파일에서 자동완성되도록 지원해준다.

3.5. HTML CSS Support / Publisher: ecmel

CSS 파일에서 작성한 클래스나 아이디 선택자 값을 연결된 HTML 문서의 id 속성과 class 속성값으로 적을 때 자동완성을 지원한다.

3.6. Code Runner / Publisher: Jun Han

JavaScript 코드의 실행을 VSCode 내부에서 할 수 있게 지원해준다.

3.7. Korean Language Pack for Visual Studio Code

VSCode 메뉴와 설명을 한글로 변경해준다. 초보자들 입장에서는 한글이 더 편리할 것이라 생각할 수도 있다. 하지만 온라인에서 코딩과 관련된 자료들이 영어로 된 것들이 많아서, 이를 참고하려면 영문으로 쓰는 것이 오히려 더 편리한 경우가 많다. 따라서 실무에서는 영문으로 쓰는 경우가 더 많기 때문에 한글 패치는 추천하지는 않는다. 영어에 유독 약한 사람들에게만 추천한다. 되도록이면 처음부터 영문 버전에 익숙해지도록 하자.