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

---

개요

저번 글에서는 vscode의 설치와 사용에 대해서 다뤘습니다. 이번 글에서는 vscode에서 사용할 수 있는 확장 프로그램에 대해서 알아보려고 합니다. 정확히는 확장 프로그램 추천입니다. vscode는 가볍지만 확장 프로그램을 통해서 얼마든지 원하는 기능과 환경을 구축할 수 있다는 특징을 갖고 있습니다.

이러한 특징 덕에 WebStorm처럼은 아니지만 IDE에 버금가는 강력한 기능을 갖게 만들 수 있습니다. 코딩, 프로그래밍을 처음 하시는 분들에게 vscode를 추천한 것은 사람들이 많이 쓰기 때문도 있지만 이런 특징 때문도 있다는 점을 알고 계시면 좋겠습니다.

자, 그럼 웹 개발을 위한 HTML 가이드 13편을 시작하도록 합시다.

HTML 개발을 위한 확장 프로그램

vscode에는 정말 많은 확장 프로그램이 존재합니다. 그리고 이러한 것은 많은 사람들이 사용하고 있는 vscode라서 가능한 결과입니다. HTML과 관련된 확장 프로그램도 정말 다양하게 존재합니다. 그 중에서 가장 필요한 것들을 골라서 소개할 생각입니다. 저번 글에서 이미 확장 프로그램을 설치하는 방법에 대해서 다뤘기 때문에 다시 설명하지는 않을 겁니다.

확장 프로그램을 설치하는 방법이 잘 기억이 나지 않으신다면 Visual Studio Code 사용하기 글을 참고하시기 바랍니다.

Auto Complete Tag

크게 보기 (새 창)

첫번째로 소개할 확장 프로그램은 Auto Complete Tag입니다. 이 확장 프로그램은 태그를 직접 입력할 때에 태그를 자동으로 닫아주는 Auto Close Tag 확장 프로그램과 여는 태그와 닫는 태그 중에서 한가지를 수정할 때에 다른 쪽도 수정되게끔 만들어주는 Auto Rename Tag 확장 프로그램을 동시에 설치해주는 확장 프로그램입니다.

이게 설치되어 있으면 HTML 코딩을 할 때 정말 편해집니다.

htmltagwrap

크게 보기 (새 창)

두번째는 특정 텍스트를 선택(범위 지정)한 상태나 특정 태그를 선택한 상태에서 ALT + W를 누르면 새로운 태그로 감싸주는 기능을 제공하는 확장 프로그램입니다. 코딩을 하다가 태그들을 감싸줄 부모 태그가 필요할 때에 자식 태그가 될 태그를 선택하고 단축키를 누르면 부모 태그가 만들어지는 편리한 기능을 제공합니다.

부모 태그가 만들어지면 p태그인데 이름은 바꿔주면 됩니다. 여러번 사용해보면 감이 오실 겁니다.

CSS 관련 확장 프로그램

HTML CSS Support

크게 보기 (새 창)

세번째는 HTML과 CSS를 사용하기 편하게 자동완성 기능을 제공해주는 확장 프로그램입니다. html 파일에 css 파일이 연결되어 있을 경우에 id 값이나 class 값이 이미 정의되어 있다면 html 코딩을 할 때에 id나 class가 필요할 때 미리 정의된 녀석들을 추천해주는 기능을 합니다. 지금 당장은 쓰지 않겠지만 미리 설치해둔다면 좋을 것 같습니다.

IntelliSense for CSS class names in HTML

크게 보기 (새 창)

네번째로 소개할 확장 프로그램은 IntelliSense for CSS class names in HTML입니다. html 파일에 연결된 css 파일에 정의된 클래스들을 미리 읽어들여서 클래스를 지정해줄 때에 편리한 기능을 제공해줍니다. 위에 있는 확장 프로그램과는 또 다른 강력한 기능입니다.

앞으로 HTML과 CSS를 자주 사용하게 되는데 CSS에서는 클래스를 자주 사용하게 됩니다. 디자인을 입힐 때에는 클래스를 주로 사용하거든요. 아무튼 이것도 설치해두면 앞으로 도움이 될 겁니다. 지금 당장 쓰지는 않더라도 말이죠.

CSS Peek

크게 보기 (새 창)

다섯번째 확장 프로그램은 HTML과 CSS를 함께 사용할 때에 html 파일에서 지정한 클래스나 아이디의 스타일을 확인할 때에 편리한 기능을 제공해줍니다. CSS Peek이라는 확장 프로그램입니다. 아무 태그에 클래스나 아이디를 지정하고 지정한 클래스나 아이디를 우클릭하면 정의로 이동, 참조로 이동과 같은 메뉴가 나타납니다. 정의로 이동을 누르면 연결된 css 파일의 해당 클래스로 넘어갈 수 있습니다.

심지어는 html 파일 내에서 css 파일의 일부분을 팝업해서 스타일을 편집할 수도 있습니다. 이건 나중에 CSS 가이드를 할 때에 자세하게 다뤄보도록 하겠습니다. 결론적으로 귀찮게 파일을 뒤적거리지 않아도 된다는 의미죠. 하지만 가끔 먹통이 될 때도 있어서 이 점은 참고하시면 되겠습니다.

Live Server

크게 보기 (새 창)

우리는 앞으로 공부를 하면서 html 파일을 작성할 때에 결과물을 미리 보고 싶을 때가 있을 겁니다. 그럴 때에 사용하는 확장 프로그램 기능이 바로 Live Server입니다. 서버를 띄워서 라이브로 결과물을 확인하면서 코딩을 할 수 있습니다. 자동으로 새로고침이 되기 때문에 개발자는 번거롭게 새로고침을 할 필요가 없습니다.

이 확장 프로그램을 설치하면 vscode의 하단에 Go Live라는 버튼이 생깁니다. 버튼이 없다면 html 파일에서 우클릭을 하고 Open with Live Server를 클릭하면 됩니다. 로컬호스트 5500 포트로 서버가 열립니다.

---

지금까지 간단하게 HTML에 필요한 확장 프로그램을 소개해봤습니다. 위에서 소개한 확장 프로그램 이외에도 다양한 확장 프로그램이 있습니다. 여러분의 입맛에 맞게 살펴보시면 될 것 같습니다. 이 가이드는 HTML 가이드인데 CSS 관련된 확장 프로그램도 같이 추천한 이유는 어차피 나중에 써야하기 때문입니다. 소개한 확장 프로그램이 많지는 않지만 이정도면 HTML을 개발하는데에 있어서 불편함은 없을 것 같습니다.

이번 글은 여기까지입니다. 다음 글은 링크 태그에 대해서 알아보도록 합시다.

---