Emmet(에밋)이란?
Emmet은 HTML과 CSS의 작성의 시간을 아주 빠르게 단축 시켜주는 에디터 확장기능입니다.
타이핑 몇자를 적으면 자동으로 나머지 코드들을 자동생성해주는 기능입니다.
코디을 아주 빠르게 할 수 있는 자동완성기능입니다.
사용법은 입력하고 키보드 Tab키를 누르면 끝!
보통 유명한 에디터에서 Emmet이란 기능/플러그인을 지원하며,
visual studio code에서는 별다른 설정없이 바로 사용할 수 있습니다.
바로 사용 사례들을 살펴보겠습니다.
visual studio code에서 Emmet사용법
1. 먼저 visual studio 에서 html 파일을 만들어 줍니다.
test.html 파일로 만들어보겠습니다.
2. !를 타이핑후 키보드의 Tab키를 눌러줍시다.
3. 그러면 아래와 같이 Emmet Abbreviation 이라고 뜹니다.
4. 이때 엔터를 누르면 아래와 같이 html5기본 html 템플릿이 자동생성됩니다!
키보드 딱 두번만(!, tab) 눌렀는데 이렇게 방대한 코드를 바로 생성해주다니
생산력을 완전 높여줄것처럼 보이지 않나요?
다른 사용법은 또 어떤것들이 있는지 살펴보겠습니다.
Emmet 주요 사용법
1. 하위 태그 : >
div>ul>li 를 타이핑한 후, Tab을 입력하면 아래와 같이 생성됩니다.
2. 형재요소 : +
div+p+bq 를 타이핑한 후, Tab을 입력하면 아래와 같이 생성됩니다.
3. +와 >의 조합
+와 >를 같이 사용할 수도 있습니다.
div+div>p>span+em 를 타이핑한 후, Tab을 입력하면 아래와 같이 생성됩니다.
4. 상위로 이동 : ^
div+div>p>span+em^bq를 타이핑한 후, Tab을 입력하면 아래와 같이 생성됩니다.
^를 많이 쓸수록 더 상단으로 끌어올릴 수 있습니다.
div+div>p>span+em^^^bq를 타이핑한 후, Tab을 입력하면 아래와 같이 생성됩니다.
5. 여러개 한번에 생성 : *
ul>li*5를 타이핑한 후, Tab을 입력하면 아래와 같이 생성됩니다.
6. 그룹화: ()
div>(header>ul>li*2>a)+footer>p 를 타이핑한 후, Tab을 입력하면 아래와 같이 생성됩니다.
7. ID 와 CLASS : #, .
태그명 뒤에 #{아이디} 를 입력하면 아이디 값을 태그안에 넣어주고,
.{클래스명}을 입력해주면 클래스를 태그안에 넣어줍니다.
div#header+div.page+div#footer.class1.class2.class3 를 타이핑한 후, Tab을 입력하면 아래와 같이 생성됩니다.
8. 속성값 : []
td[title="Hello world!" colspan=3] 를 타이핑한 후, Tab을 입력하면 아래와 같이 생성됩니다.
여기까지 자주 사용할것같은 것들을 정리해보았습니다.
CSS등 다른 자동완성도 많이 있는데요, 기회가 된다면 다음에 더 알아볼 수 있도록 하겠습니다.
혹시 더 상세한 내용을 알고 싶으신분은 공식문서를 찾아보면 더 자세한 내용 확인이 가능합니다.
emmet 공식문서 : https://docs.emmet.io/abbreviations/syntax/
총평
이렇게 좋은 자동완성기능이 있었다니 대단한 생산성향상 툴입니다.
새로운 프레임워크, 라이브러리 들만 살펴보다가 우연히 알게 되었는데, 이걸 이제라도 알아서 다행입니다.
이제 처음 다뤄보는거라 기존과 비슷하게 시간이 걸리는 부분도 있지만,
익숙해지면 엄청난 생산성향상이 있을것 같습니다.
프레임워크중에 template engine을 emmet 기반으로 하는것도 있었던거 같은데,
잘익혀두면 요긴하게 쓰고 나중에는 더 좋은 프레임워크를 사용하게 될때 필수적인 요소가 되지 않을까 싶습니다.
Emmet이란, visual studio code에서 emmet 쓰기, code generator, 코드 자동완성, 에밋
#emmet,#visualstudio,#generator,#code,#editor,#auto,#자동완성,#코드,#snippet,#스니펫,#에밋
What is Emmet, writing emmet in visual studio code, code generator, code auto-completion, Emmet
What is Emmet?Emmet is an editor extension that greatly reduces the time of writing HTML and CSS.This is a function that automatically generates the rest of the code by typing a few characters.This i
devscb.com
댓글