import {
 A, Bold, Details, Dl, H, Message, NoteBottom, NoteTop, P,
 Quote, Score, Youtube, Ul, Ol, Em, Gray, Code, Kbd, Image,
 Q, Strong, Spoiler, Strike, Line, Mark, HtmlGuideMessage, Name,
 Dt, Dd
} from '@/components/Post';

<HtmlGuideMessage />

# 개요
저번 글에서는 **vscode의 설치와 사용**에 대해서 다뤘습니다. 이번 글에서는 **vscode에서 사용할 수 있는 확장 프로그램**에 대해서 알아보려고 합니다. 정확히는 확장 프로그램 추천입니다. vscode는 가볍지만 확장 프로그램을 통해서 **얼마든지 원하는 기능과 환경을 구축할 수 있다는 특징**을 갖고 있습니다.

이러한 특징 덕에 **WebStorm**처럼은 아니지만 **IDE에 버금가는 강력한 기능**을 갖게 만들 수 있습니다. 코딩, 프로그래밍을 처음 하시는 분들에게 vscode를 추천한 것은 사람들이 많이 쓰기 때문도 있지만 이런 특징 때문도 있다는 점을 알고 계시면 좋겠습니다.

자, 그럼 웹 개발을 위한 HTML 가이드 13편을 시작하도록 합시다.

# HTML 개발을 위한 확장 프로그램
vscode에는 정말 많은 확장 프로그램이 존재합니다. 그리고 이러한 것은 많은 사람들이 사용하고 있는 vscode라서 가능한 결과입니다. **HTML과 관련된 확장 프로그램**도 정말 다양하게 존재합니다. 그 중에서 **가장 필요한 것들을 골라서 소개**할 생각입니다. 저번 글에서 이미 확장 프로그램을 설치하는 방법에 대해서 다뤘기 때문에 다시 설명하지는 않을 겁니다.

확장 프로그램을 설치하는 방법이 잘 기억이 나지 않으신다면 [Visual Studio Code 사용하기](/post/2021-09-13-01-vscode-install) 글을 참고하시기 바랍니다.

## Auto Complete Tag
![Auto Complete Tag 확장 프로그램](https://drive.google.com/uc?export=view&id=19swUqhmw3Vfb618i63TyZ7ZHARlSrIVN)

첫번째로 소개할 확장 프로그램은 **Auto Complete Tag**입니다. 이 확장 프로그램은 **태그를 직접 입력할 때에 태그를 자동으로 닫아**주는 **Auto Close Tag** 확장 프로그램과 여는 태그와 닫는 태그 중에서 한가지를 수정할 때에 **다른 쪽도 수정되게끔 만들어**주는 **Auto Rename Tag** 확장 프로그램을 동시에 설치해주는 확장 프로그램입니다.

이게 설치되어 있으면 HTML 코딩을 할 때 정말 편해집니다.

## htmltagwrap
![htmltagwrap 확장 프로그램](https://drive.google.com/uc?export=view&id=1fBEZ-vJv39AcK8JIWomsxq9ZLISzf5Ac)

두번째는 특정 텍스트를 선택(범위 지정)한 상태나 특정 태그를 선택한 상태에서 <Kbd>ALT + W</Kbd>를 누르면 새로운 태그로 감싸주는 기능을 제공하는 확장 프로그램입니다. 코딩을 하다가 태그들을 감싸줄 부모 태그가 필요할 때에 자식 태그가 될 태그를 선택하고 단축키를 누르면 부모 태그가 만들어지는 편리한 기능을 제공합니다.

부모 태그가 만들어지면 `p`태그인데 이름은 바꿔주면 됩니다. 여러번 사용해보면 감이 오실 겁니다.

## CSS 관련 확장 프로그램
### HTML CSS Support
![HTML CSS Support 확장 프로그램](https://drive.google.com/uc?export=view&id=11LJjRw2XESjgj5Sc8ZG4XGl0JxPXM3JT)

세번째는 HTML과 CSS를 사용하기 편하게 **자동완성 기능을 제공**해주는 확장 프로그램입니다. **html 파일에 css 파일이 연결되어 있을 경우**에 id 값이나 class 값이 이미 정의되어 있다면 html 코딩을 할 때에 **id나 class가 필요할 때** 미리 정의된 녀석들을 **추천**해주는 기능을 합니다. 지금 당장은 쓰지 않겠지만 미리 설치해둔다면 좋을 것 같습니다.

### IntelliSense for CSS class names in HTML
![IntelliSense for CSS class names in HTML 확장 프로그램](https://drive.google.com/uc?export=view&id=1F94Pn3idrn0YwP05nkNXvlDqGtZqNvrH)

네번째로 소개할 확장 프로그램은 **IntelliSense for CSS class names in HTML**입니다. html 파일에 연결된 css 파일에 정의된 **클래스들을 미리 읽어**들여서 **클래스를 지정해줄 때에 편리한 기능을 제공**해줍니다. 위에 있는 확장 프로그램과는 또 다른 강력한 기능입니다.

앞으로 HTML과 CSS를 자주 사용하게 되는데 CSS에서는 **클래스를 자주 사용**하게 됩니다. 디자인을 입힐 때에는 클래스를 주로 사용하거든요. 아무튼 이것도 설치해두면 앞으로 도움이 될 겁니다. 지금 당장 쓰지는 않더라도 말이죠.

### CSS Peek
![CSS Peek 확장 프로그램](https://drive.google.com/uc?export=view&id=10AecQ-lRpJTLLxiOtnzLwx5bPuiFOfrv)

다섯번째 확장 프로그램은 HTML과 CSS를 함께 사용할 때에 html 파일에서 지정한 **클래스나 아이디**의 스타일을 **확인할 때**에 편리한 기능을 제공해줍니다. **CSS Peek**이라는 확장 프로그램입니다. 아무 태그에 클래스나 아이디를 지정하고 지정한 클래스나 아이디를 우클릭하면 **정의로 이동**, **참조로 이동**과 같은 메뉴가 나타납니다. 정의로 이동을 누르면 **연결된 css 파일의 해당 클래스로 넘어갈 수** 있습니다.

심지어는 html 파일 내에서 **css 파일의 일부분을 팝업해서 스타일을 편집할 수도** 있습니다. 이건 나중에 CSS 가이드를 할 때에 자세하게 다뤄보도록 하겠습니다. 결론적으로 귀찮게 파일을 뒤적거리지 않아도 된다는 의미죠. 하지만 가끔 먹통이 될 때도 있어서 이 점은 참고하시면 되겠습니다.

## Live Server
![Live Server 확장 프로그램](https://drive.google.com/uc?export=view&id=19666Tcf1u4lltaYbdN1HIfFlV4-XqkOb)

우리는 앞으로 공부를 하면서 html 파일을 작성할 때에 **결과물을 미리 보고 싶을 때**가 있을 겁니다. 그럴 때에 사용하는 확장 프로그램 기능이 바로 **Live Server**입니다. **서버를 띄워서 라이브로 결과물을 확인하면서 코딩**을 할 수 있습니다. **자동으로 새로고침**이 되기 때문에 개발자는 번거롭게 새로고침을 할 필요가 없습니다.

이 확장 프로그램을 설치하면 vscode의 하단에 **Go Live라는 버튼**이 생깁니다. 버튼이 없다면 html 파일에서 우클릭을 하고 **Open with Live Server**를 클릭하면 됩니다. 로컬호스트 **5500 포트**로 서버가 열립니다.

<Line />

지금까지 간단하게 HTML에 필요한 확장 프로그램을 소개해봤습니다. 위에서 소개한 확장 프로그램 이외에도 **다양한 확장 프로그램이 있습니다.** 여러분의 입맛에 맞게 살펴보시면 될 것 같습니다. 이 가이드는 HTML 가이드인데 CSS 관련된 확장 프로그램도 같이 추천한 이유는 어차피 나중에 써야하기 때문입니다. 소개한 확장 프로그램이 많지는 않지만 이정도면 HTML을 개발하는데에 있어서 불편함은 없을 것 같습니다.

이번 글은 여기까지입니다. 다음 글은 **링크 태그**에 대해서 알아보도록 합시다.

저번 글에서는 vscode의 설치와 사용에 대해서 다뤘습니다. 이번 글에서는 vscode에서 사용할 수 있는 확장 프로그램에 대해서 알아보려고 합니다. 정확히는 확장 프로그램 추천입니다. vscode는 가볍지만 확장 프로그램을 통해서 얼마든지 원하는 기능과 환경을 구축할 수 있다는 특징을 갖고 있습니다. 이러한 특징 덕에 WebStorm처럼은 아니지만 IDE에 버금가는 강력한 기능을 갖게 만들 수 있습니다. 코딩, 프로그래밍을 처음 하시는 분들에게 vscode를 추천한 것은 사람들이 많이 쓰기 때문도 있지만 이런 특징 때문도 있다는 점을 알고 계시면 좋겠습니다. 자, 그럼 웹 개발을 위한 HTML 가이드 13편을 시작하도록 합시다. vscode에는 정말 많은 확장 프로그램이 존재합니다. 그리고 이러한 것은 많은 사람들이 사용하고 있는 vscode라서 가능한 결과입니다. HTML과 관련된 확장 프로그램도 정말 다양하게 존재합니다. 그 중에서 가장 필요한 것들을 골라서 소개할 생각입니다. 저번 글에서 이미 확장 프로그램을 설치하는 방법에 대해서 다뤘기 때문에 다시 설명하지는 않을 겁니다.

웹 개발을 위한 HTML 가이드 13편 - VSCode 추천 확장 프로그램

import {
 A, Bold, Details, Dl, H, Message, NoteBottom, NoteTop, P,
 Quote, Score, Youtube, Ul, Ol, Em, Gray, Code, Kbd, Image,
 Q, Strong, Spoiler, Strike, Line, Mark, HtmlGuideMessage, Name,
 Dt, Dd
} from '@/components/Post';

<HtmlGuideMessage />

# 개요
우리는 지금까지 알게 된 태그는 별로 없지만 연습을 하기 위해 메모장으로 코딩을 했습니다. 물론 계속 메모장으로 코딩을 해도 상관 없지만 상당히 불편하다는 것을 느꼈을 겁니다. 이 부분은 취향에 따라 차이가 있지만 보통의 경우 편리한 기능을 제공해주는 텍스트 에디터를 사용합니다.

텍스트 에디터의 종류는 다양합니다. 프로그래밍 언어에 따라서 인기가 있는 에디터가 있기도 합니다. 다양한 에디터들 중에서 오늘 우리가 알아볼 텍스트 에디터는 **비주얼 스튜디오 코드(Visual Studio Code)**라는 녀석입니다. 마이크로소프트에서 만든 텍스트 에디터인데 사용자가 많아서 많은 확장 프로그램들이 만들어지고 있습니다. 이제 이 녀석에 대해서 알아봅시다.

시작하기 전에 메모장을 사용하면서 굳이 불편함을 느끼지 않았다면 메모장을 계속 써도 상관은 없습니다. 본인의 선택입니다.

# 비주얼 스튜디오 코드
비주얼 스튜디오 코드(Visual Studio Code)는 줄여서 **vscode**라고도 많이 부릅니다. 사용하는 사람이 많기 때문에 정보를 찾는데에 있어서 어려움이 없습니다. 당연하게도 vscode보다 뛰어난 에디터도 있습니다. 가장 먼저 떠오르는 것은 **WebStorm**이라는 녀석입니다. 근데 이 녀석은 **유료**입니다. 그 대신에 진짜 어마어마한 기능을 갖고 있습니다.

이제 막 프로그래밍에 입문한 사람들에게 에디터를 유료로 사용해라! 라고는 할 수가 없기 때문에 vscode를 사용하는 겁니다. 물론 vscode 자체만으로도 어렵지 않게 프로그래밍이 가능합니다. 아무튼, 이제부터 vscode에 대해서 알아볼 겁니다. 설치부터 시작해서 기본적인 사용 방법을 함께 알아보도록 합시다.

**제가 윈도우이기 때문에 윈도우를 기준으로 설명합니다!**

## 설치하기
프로그램을 사용하기 위해서는 가장 먼저 설치를 해야합니다. 설치를 위해서 검색을 해봅시다. 구글에다가 **vscode**라고 검색합니다. 그러면 가장 위에 보이는 사이트가 있습니다. 이 사이트로 들어가줍시다.

![구글에 vscode를 검색하고 보이는 사이트로 들어간다.](https://drive.google.com/uc?export=view&id=1SssmgxNgRyx4vY0HUfMLbdrTsmKHsmRh)

사이트에 들어간 다음에 할 것은 간단합니다. 바로 눈 앞에 보이는 **파란색 다운로드 버튼을 클릭**하는 겁니다. 아마도 **운영체제에 맞게끔 다운로드 파일이 다운로드** 될 겁니다. 아무튼 다운로드를 하고난 다음에는 설치 프로그램을 실행하면 됩니다.

![사이트에 들어가면 여러분의 눈 앞에 다운로드 버튼이 보인다. 클릭하자.](https://drive.google.com/uc?export=view&id=1V42E-S2hqw3UQlB-VY2L_wS8BwKSUI4o)

대충 아무 곳에다가 파일을 다운로드하고, 실행합니다. 설치 자체는 다음 버튼을 계속 누르면 됩니다. 그래도 혹시 모르니까 아래의 이미지들과 같이 체크가 되어있는지 확인하시면 되겠습니다.

![동의합니다를 눌러준다.](https://drive.google.com/uc?export=view&id=19cu6-jOMOdRu6lykNdxNliK7aJp55SQe)
![이 네가지가 체크되어있는지 확인하자.](https://drive.google.com/uc?export=view&id=1eGAZu_q1lccMyb-QcJc6_-xIk_jrGyO_)
![설치 버튼을 눌러준다.](https://drive.google.com/uc?export=view&id=1uCl9rRFSDRiAQ97_QpLnVsy2UI75HwvO)
![설치가 되는 모습이다.](https://drive.google.com/uc?export=view&id=1GX0tpVlAbSOehgf24aQ9JV_yAcXS3wy-)

설치를 다 하고 실행하면 아래와 같은 모양의 프로그램이 실행됩니다.

![비주얼 스튜디오 코드의 모습이다.](https://drive.google.com/uc?export=view&id=1TzLeW76Rd6uyQsmIC0U4fTUmow0aHGvK)

제가 쓰던 환경에서 설정을 잠시 없앤 상태에서 찍은 이미지지만 방금 막 프로그램을 설치하고 실행한 여러분들과는 조금 다를 겁니다. 달라도 상관 없습니다. 설정이야 알아서 꾸며서 쓰면 되거든요. 이제 설치는 완료되었습니다. 기본적인 설정을 해보도록 합시다.

## 한글 설정
**vscode는 한글을 지원**하지만 처음에 설치하면 한글이 아닙니다. 그래서 **한글 설정을 해줘야** 합니다. 아주 간단하게 한글 설정을 할 수 있습니다. 좌측의 아이콘들 중에서 사각형 네개가 그려져 있는 아이콘을 클릭하시면 **확장 프로그램**을 검색할 수 있습니다.

지금 다루는 확장 프로그램에 대한 내용은 다음 글에서 계속 다룰 것이기 때문에 기억해둡시다. **vscode를 강화시키는 아주 중요한 기능**입니다.

![확장 프로그램 아이콘을 클릭해보자.](https://drive.google.com/uc?export=view&id=1leIC_ns_EKINHKcKC6xpLS6bt7xe2ul9)

생긴게 갑자기 달라졌는데 개의치마세요! 저는 사용하던 테마가 있을 뿐입니다.

아무튼 확장 프로그램 아이콘을 클릭했으면 **검색**을 합시다. **korean**이라고 검색만 해도 아래와 같은 아이콘을 갖고 있는 확장 프로그램을 발견할 수 있습니다. 저는 이미 설치되어있어서 제거라는 버튼이 있지만 여러분은 되어있지 않을 겁니다. 설치 버튼을 눌러서 과감하게 설치하고나면 한글 설정이 완료됩니다.

![한글 설정을 할 수 있는 확장 프로그램이다.](https://drive.google.com/uc?export=view&id=13NkfcEaui6tTI582W-mcl54C8yCWiz37)

## 기본적인 사용법
한글 설정도 마쳤으니 이제는 **vscode의 간단한 사용법**에 대해서 알아봅시다. 우리가 당장 프로그래밍을 하기 위해 필요한 것들을 우선 살펴보는 게 좋겠습니다. 간단하게 설정에 들어가서 설정을 하는 방법이나 쉽게 HTML 코딩을 하는 방법에 대해서 알아봅시다.

### 작업 폴더 설정하기
![폴더 작업을 하지 않은 상태의 모습.](https://drive.google.com/uc?export=view&id=14qKIZeE3JoHREbtDhZ4qclHh3Gt1ML1E)

여러분이 vscode를 설치하고 사용하려고 보면 파일을 건드릴 수가 없습니다. 정확히는 건드릴 파일이 없죠. 왜냐면 **작업 폴더 설정**을 하지 않았기 때문입니다. 그래서 우리가 사용하던 작업 폴더를 지정해줄 필요가 있습니다.

폴더 설정 방법에는 여러가지가 있습니다. 첫번째 방법은 아래의 이미지처럼 **작업 폴더를 vscode의 파일 탐색기에 드래그**해서 vscode에서 사용할 수 있게 여는 겁니다.

![폴더를 드래그해서 폴더 설정하기.](https://drive.google.com/uc?export=view&id=1jbSeig8jOhpMlox_D2ZeBKX8HzoO51XU)

두번째는 **폴더 열기** 버튼을 눌러서 직접 작업 폴더를 찾아 적용시키는 겁니다.

세번째 방법은 작업 폴더에서 터미널<Gray>(cmd나 파워쉘 같은)</Gray>을 열고 <Code>code .</Code>를 쳐서 vscode를 작업 폴더에서 여는겁니다. 아래의 이미지 처럼요. code 는 vscode를 의미하는 것이고 그 뒤의 .은 현재 폴더를 의미합니다. 즉 작업 폴더에서 vscode를 열겠다. 라는 의미인 것이죠.

![터미널을 이용해서 열기.](https://drive.google.com/uc?export=view&id=1RipMDzJJTWPwbz8uBi-GAXRZNaUGsSaV)

저는 세번째 방법을 더 좋아하고 자주 이용합니다. 굳이 설정이랄 것도 없고 항상 저렇게 열기 때문에 따로 설정해줄 필요가 없거든요. 아무튼 이렇게 설정을 마치고나면 본격적인 코딩이 가능해집니다.

![폴더 설정을 마친 모습이다.](https://drive.google.com/uc?export=view&id=1WjzUIAH-SNsOW5070fLPlA8BaHoCAHj8)

### 파일 탐색기 다루기
![vscode의 파일 탐색기의 모습이다.](https://drive.google.com/uc?export=view&id=1vqy6tSdU9D1qochvDOUjkmuVMvrDHppc)

vscode를 켜면 왼쪽에 보이는 아이콘 메뉴들 중에서 파일 모양처럼 생긴게 **파일 탐색기** 부분입니다. 여러분의 프로젝트 폴더의 내부 파일들이 보이고 이를 직접적으로 조작할 수 있는 부분이죠. 파일 탐색기에서 파일을 만들면 실제로 디스크에도 파일이 생기는 겁니다.

파일을 어떻게 만들고, 폴더를 어떻게 만드는지 알아봅시다. 아주 간단합니다.

프로젝트 폴더 내에 파일이나 폴더가 아무것도 없을 때에는 <Bold>탐색기에 커서를 대고 있거나 탐색기의 부분이 활성화되어 있을 때에 생기는 아이콘들을 이용</Bold>해서 파일을 만들 수 있고 <Bold>그냥 허공에 우클릭을 하면 나타나는 메뉴를 통해서</Bold> 파일이나 폴더를 만들 수 있습니다.

![탐색기가 활성화되면 상단에 아이콘이 뜬다.](https://drive.google.com/uc?export=view&id=1DmvEClbdnP4u6mDlHVePjbTR-2PFrbAy)
![탐색기를 우클릭하면 메뉴가 뜬다.](https://drive.google.com/uc?export=view&id=191Hzu8b3x0jdFrC83hI0z6P1SCki31n2)

이렇게 아이콘을 누르거나 메뉴를 이용해서 폴더나 파일을 만든 후에는 <Bold>이름을 입력</Bold>해주면 됩니다. 파일 이름을 입력하지 않으면 파일의 생성은 취소됩니다. 파일 이름을 입력해줍시다.

특정 폴더의 안에서 파일이나 또 다른 폴더를 만들기 위해서는 <Bold>탐색기에서 해당 폴더를 클릭한 상태</Bold>에서 탐색기 상단의 아이콘을 누르거나 폴더를 우클릭해서 새 폴더 혹은 새 파일 메뉴를 클릭하면 되겠습니다.

파일의 이름을 바꾸려면 파일을 클릭한 상태에서 <Kbd>F2</Kbd>를 누르면 됩니다. 윈도우에서 파일 이름 바꿀 때에 사용하는 단축키와 같습니다. 여기까지가 아주 기본적인 파일 탐색기 이용 방법입니다. 하다보면 적응 될 겁니다. 사용해봅시다!

### 설정 이용하기
vscode는 가볍지만 어떤 설정을 하느냐에 따라서 천차만별의 기능을 갖게 됩니다. 설정을 통해서 여러분의 개성을 표현할 수도 있습니다. 설정창으로 들어가는 방법에는 좌측 하단의 톱니모양 아이콘을 클릭하고 설정을 누르는 방법과 <Kbd>CTRL + ,</Kbd>을 누르는 방법 등등이 있는데 단축키를 이용해서 들어가는 게 가장 빠릅니다.

![설정창에 들어간 모습이다.](https://drive.google.com/uc?export=view&id=1B1HUOwzG1GmjWFjIKlpaO-klpvV9GK4K)

이 설정창에서 많은 것들을 바꿀 수가 있습니다. 확장 프로그램에 대한 설정도 여기서 바꿀 수 있습니다. 만일 여러분이 코딩에 좀 익숙하다면 직접 **JSON파일**을 건드려서 설정을 할 수도 있습니다.

![json파일을 직접 건드리는 방법도 있다.](https://drive.google.com/uc?export=view&id=1CXez0KjgaB0MsD4fkiAtrQABZzu6c-9L)

설정에서 폰트 정도는 바꿔주는 게 여러분의 정신건강에 좋을 수 있습니다. 폰트 중에서도 모든 글자의 폭이 같은 폰트를 사용하면 더 좋습니다. 현재 제가 사용하는 폰트는 **Cascadia Code**라는 폰트 입니다.

### Emmet 사용하기
HTML 코딩을 할 때에는 **Emmet**의 기능을 이용하는 게 정말 편리합니다. 하나 하나 태그를 치는 것보다는 태그의 이름을 치고 **탭을 눌러 자동으로 완성**하는 게 상당한 편의성을 제공해줍니다. Emmet에 대한 디테일한 사용법은 나중에 따로 올려보겠습니다. 이번 글에서는 간단하게만 알아봅시다.

```text
!
```

비어있는 html 파일에서 **느낌표**만 치고 **탭**을 누르면 아래와 같은 기본 골격이 만들어집니다. 여기서 조금만 수정하면 되겠죠.

```html
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>

</body>
</html>
```

```text
div
```

```html
<div></div>
```

**div**를 치고 **탭**을 누르면 `div`태그가 완성됩니다. 홀로 닫는 태그의 경우에는 닫는 태그가 없어도 되기 때문에 홀로 닫는 태그가 만들어집니다.

```text
div>p
```

```html
<div>
 
</div>
```

이런식으로 하면 **부모태그와 자식태그** 관계의 태그를 완성할 수 있습니다. **>**를 이용해서 상위, 하위 구조를 만들어낼 수 있는 겁니다. 중요한건 **탭**을 누르는 겁니다.

```text
h2{제목}+p{문단}
```

```html
<h2>제목</h2>
문단
```

태그 이름뒤에 **중괄호**를 붙이고 중괄호의 **안에 내용**을 입력하고 **탭**을 누르면 여는 태그와 닫는 태그의 안에 내용이 들어가게 됩니다. **+**를 이용하면 **형제 관계**에 있는 태그를 완성할 수 있습니다.

이렇게 간단하게만 알아봐도 Emmet의 기능은 짱짱하다는 것을 알 수 있습니다. 이처럼 Emmet을 사용하면 아주 편하게 HTML 코딩이 가능합니다.

<Line />

이번 글에서는 vscode에 대해서 알아보는 시간을 가져봤습니다. vscode를 설치하고, 실행하고 설정을 건드리는 방법이나 Emmet을 사용하는 방법에 대해서 살펴봤죠. vscode도 지금은 낯설겠지만 계속 만져보다보면 익숙해질 것이라고 생각합니다.

다음 글에서는 **설치하면 좋은 확장 프로그램**에 대해서 다뤄보도록 하겠습니다. 이번 글은 여기까지입니다. 다음 글에서 봅시다.

우리는 지금까지 알게 된 태그는 별로 없지만 연습을 하기 위해 메모장으로 코딩을 했습니다. 물론 계속 메모장으로 코딩을 해도 상관 없지만 상당히 불편하다는 것을 느꼈을 겁니다. 이 부분은 취향에 따라 차이가 있지만 보통의 경우 편리한 기능을 제공해주는 텍스트 에디터를 사용합니다. 텍스트 에디터의 종류는 다양합니다. 프로그래밍 언어에 따라서 인기가 있는 에디터가 있기도 합니다. 다양한 에디터들 중에서 오늘 우리가 알아볼 텍스트 에디터는 비주얼 스튜디오 코드라는 녀석입니다. 마이크로소프트에서 만든 텍스트 에디터인데 사용자가 많아서 많은 확장 프로그램들이 만들어지고 있습니다. 이제 이 녀석에 대해서 알아봅시다. 시작하기 전에 메모장을 사용하면서 굳이 불편함을 느끼지 않았다면 메모장을 계속 써도 상관은 없습니다. 본인의 선택입니다.

“ VS Code ” 태그 관련 포스트 2건

웹 개발을 위한 HTML 가이드 13편 - VSCode 추천 확장 프로그램

웹 개발을 위한 HTML 가이드 12편 - Visual Studio Code 사용하기