Visual Studio Code[VS Code]라는 통합개발툴(IDE)이 2015년에 공개되어 역사가 길지는 않지만 2023년 지금은 Visual Studio와 Eclipse와 함께 개발자들이 가장 많이 사용하는 통합개발툴이 되었다. 이 VS Code로 웹 개발을 할 때 처음 HTML템플릿을 손수 타이핑 하는 사람들을 보았기 때문에 이렇게 편한 기능을 소개하게 되었다.
VS Code HTML템플릿 자동완성 첫번째
VS Code에서 HTML템플릿 자동완성 하는 2가지 방법 모두 간단하다. ‘!’를 입력하거나 ‘HTML’을 입력하거나 이다. 첫번째 방법은 ‘!’를 이용하여 VS Code에서 HTML 템플릿을 간단하게 자동완성 시키는 방법을 알아보겠다.
먼저 .html 파일을 생성하게 되면 아무것도 없는 빈 파일이 생성된다. 여기서 이 방법을 모르는 사람들은 html 기본 태그를 직접 작성하게 되지만 이 빈 화면에서 ‘!’ + 엔터를 하게 된다면 편하게 기본 템플릿이 자동으로 입력이 된다.
아주 편하게 기본적인 HTML 코드가 입력된 것을 확인할 수 있다. 두번째 방법도 이와 비슷하게 아주 간편한 방법이지만, 나는 ‘!’를 이용하여 아주 쉽고 빠르게 HTML 기본 템플릿을 입력하는 편이다. 만약, HTML 템플릿을 새롭게 생성해야 한다면 말이다.
VS Code HTML템플릿 자동완성 두번째
두번째 방법도 첫번째 방법과 비슷하게 아주 간단하게 HTML템플릿을 작성할 수 있다. 이런 기능들 때문에 편하게 사용할 수 있어서 많은 개발자들이 VS Code를 이용하는 것으로 예상할 수 있다.
첫번째 방법과 같이 .html 파일 생성하게 되면 빈 파일이 생성되는데 첫번째 방법에서는 ‘!’ + 엔터를 이용하여 자동으로 HTML템플릿을 완성했지만, 두번째 방법으로는 ‘html’ + 엔터를 이용하여 ‘html:5’를 선택하면 첫번째 방법과 같이 HTML템플릿이 자동으로 완성되는 것을 확인할 수 있다.
‘html’을 입력했다면 두번째 ‘html:5’를 선택한다.
이 처럼 아주 간편한 방법으로 Visual Studio Code라는 IDE에서 HTML 템플릿을 자동으로 쉽게 작성할 수 있는 2가지 방법에 대하여 알아보았다. 웹 개발자가 되기 위하여 처음으로 시작하는 HTML을 하나하나 적어가며 외워야할 수도 있겠지만, 나는 이런 간편한 방법으로 시작해도 문제가 없다고 생각이 든다.
개발자는 항상 편하고 심플하게 내가 원하는 것을 개발할 수 있는 것이 진정한 개발자라고 생각이 든다. 중요한걱 꺽이지 않는 마음이라고 하였는가, 정말 인내심을 가지고 처음부터 개발의 맛을 찾아가보길 바란다.
요약 [VS Code] HTML 템플릿 자동완성 2가지 방법
- .html 빈 파일 생성 후 ‘!’ + 엔터로 기본 템플릿을 자동완성 시킨다.
- .html 빈 파일 생성 후 ‘html’을 작성하여 ‘html:5’ 선택으로 기본 템플릿을 자동완성 시킨다.