HTML 스니펫 으로 편하게 코딩하는법 | HTML Snippets 설치와 사용법 | 비주얼 스튜디오 코드 익스텐션
HTML 코드을 작성하려면 문서의 기본 구조부터 작성해야 한다.
<HTML> ... 이렇게 시작되는 내용이다. 템플릿 파일을 복사해서 사용하는 방법도 있지만 비주얼 스튜디오에서 기본적으로 제공하는 자동완성 기능과 HTML Snippets Extension 을 사용하면 몇개의 타이핑으로도 완성이 가능하다.
우선 비주얼 스튜디오를 열고 파일을 하나 만든다.
-> (파일명).html
비주얼 스튜디오 코드는 파일의 확장자 html 을 확인하고 이 파일이 html 파일임을 인식한다.
html 을 입력하면 자동완성이 뜬다. 여기서 html : 5 를 선택하면 기본 구조를 만들어 준다.
가장 기본적인 문서의 골격을 만들었다. 여기서 html lang="en" 을 "ko"로 바꾼다. 문서의 기능에는 상관이 없지만 검색엔진이 en 은 영문 페이지로 인식하고 ko는 한글 페이지로 인식한다. ko 페이지를 해야 한글 검색에 노출에 최적화된다.
기본 meta 데이터들의 설정은 수정하거나 추가하면 될 것이다. 위의 문서는 html5 의 기본 템플릿이다.
더 쉬운 방법이 있다. ! 을 입력하면 동일한 html5 문서가 생성된다. html5가 최신 버전으로 다른 버전을 사용할 것이 아니라면
! 한글자로 완성된다.
자동완성 기능이 없었다면 coding 안했을 거라는 사람도 있다;;;
!이렇게 하고 esc를 클릭하면 드롭다운 창이 사라지는데 !의 앞에 커서를 놓고 Ctrl + Space 키를 입력하면 다시 자동완성 창을 사용할 수 있다.
* HTML Snippets (자동완성)
여기까지도 매번 타이핑해야 하는 수고스러움을 덜어주는데 HTML 문서에 코딩을 할 때 도와주는 확장(extension) 기능이 있다. 확장기능은 기본 설치는 안되있으므로 비주얼 스튜디오 코드의 확장 프로그램을 설치해야 한다.
file - preference - extension (파일, 설정, 확장) 메뉴에 들어가거나 왼쪽읜 네모친 아이콘을 클릭한 후 html snippets 로 검색하여 설치한다. 영문 버전은 install 이다. 설치횟수가 430만에 달한다.
설치가 되었으면 한번 비주얼 스튜디오를 종료 한 후 다시 실행시킨다.
div 입력하여 자동완성을 입력하면 바로 <div></div> 시작과 종료 태그가 생성이 된다. 여기까지는 비주얼 스튜디오 코드가 기본으로 제공하는 것과 비슷하다. 진짜 파워풀한 기능은...
이것이다! div*태그의 개수
* 곱하기 연산자로 한번에 5개 10개건 만들 수 있다!
리스트 같은 태그를 만들 때 유용하다. 순식간에 리스트를 만들 수 있다.
이런 기능이 없을 때는 불이나게 키보드를 입력했었다. 옆에서 보면 컴퓨터를 매우 잘하는 것 처럼 보였을 지도 모르지만 힘들게 타이핑을 오래하면 손목증후군에 시달리게 된다. 요새는 뭐든 적게 입력해서 높은 퍼포먼스를 내는 가성비가 좋아야 한다.
a 를 한 글자 눌러서 보면 아래와 같이 자동완성 리스트가 나온다.
* class 와 id로 div 태그 만들기!
이것도 자주 사용하게 될 기능인데 타자 수를 줄여주는 기능이다.
.myclass -> tab
- 클래스 div를 자동완성한다.
#myclass -> tab
- 아이디 div를 자동완성한다.
이런식으로 작업을 하면 메인 페이지의 구조를 짜는데 몇초도 걸리지 않는다.
과거의 코더들은 이것들을 일일히 다 입력해야 했을 것이다. 템플릿을 사용할 수도 있겠지만 하나씩 생각하면서 입력하는 느낌과는 또 다르다.
물론 다 현업에서는 다 아는 노하우다.
그렇지만 이제 코딩을 처음 시작하거나 다른 언어를 사용하다가 HTML을 새롭게 배우는 사람에게는 도움이 될 수 있다.
HTML5의 등장 이후 HTML로 코딩을 처음 시작하는 비율도 늘고 있다. 엄밀히 말하면 자바스크립트에 코딩의 기능이 들어있지만 HTML 도 당당한 언어다. (hypertext markup language)
필자도 최근에 HTML5를 공부하면서 알게된 것들이다. HTML/CSS 책 한권을 다 볼 때까지 이걸 모르고 기본 기능만으로 타이핑을 했는데 hmtl은 그냥 타이핑을 하면 매우 지루하다. 또 타이핑 시간이 길어질수록 맥이 끓기고 헤메기 쉽다.
단축키도 효율이 좋지만 코드 스니펫을 사용하면 아예 코드를 완성해주기 때문에 쾌적한 코딩을 할 수 있다.
