Fast HTML markup with Emmet in VisualStudio

빠른 HTML 마크업을 위한 Emmet

약 2년 전에 Emmet 을 알고 난 후, 언젠가 써봐야지 하고 잊고 지내다가 갑자기 생각나서 급하게 포스트를 작성한다. Emmet 단어가 기억이 나질 않아서 구글에 간접 검색을 수차례 한 끝에 겨우 찾아냈다... 역시 생각나면 블로그에 바로 글 쓰는 것이 좋구나 다시 한 번 느낀다.

Emmet?

Emmet 은 HTML 을 빠르게 작성하기 위한 툴이다. 눈으로 직접 보는 것이 이해하는 데 가장 빠르다. 아래 비디오를 보자. 

https://emmet.io/ 공식사이트에 가면 아래와 같은 가짜 비디오를 볼 수 있다. (textarea 에 스크립트 걸어놓은 거라 가짜 비디오다 )

Emmet 은 확장성이 뛰어난 Plugin 이다. 실로 다양한 플랫폼에서 사용할 수 있다. 나는 이번에 비쥬얼스튜디오에서 사용해보기로 했다. 한번 검색해볼까?

VisualStudio 2013

Tool -> Extensions and Updates 로 간 후

Emmet 을 검색하니 나온다. 사실 공식 홈페이지에도 VisualStudio Extension 있다고 소개되어 있다. 바로 설치해주고 VisualStudio 를 재시작한다.

Emmet 메뉴가 상단에 보인다.

메뉴들 중에 실제로 쓸만한 것은 Ctrl + 1 뿐인 것 같다.

이렇게 입력하고, 맨 커서 위치를 스크린샷과 같이 맨 마지막에 위치시킨 후 Ctrl + 1 을 누르면

순식간에 이렇게 생성해준다. 극적인 연출을 위해서 a 태그 50개를 만들어 보았다. 실제로 퍼블리싱 작업하다보면 10~15개 정도는 복사/붙혀넣기 하는 경우가 있는데, 꽤 유용할 것 같다고 생각한다. 완벽하게 익숙해지기만 한다면...

주요 문법

일반 마크업

div

결과
<div></div>

일반 마크업 + 아이디 부여

div#geniusdm

결과




<div id="geniusdm"></div>

일반 마크업 + 클래스 부여

div.geniusdm

결과


<div class="geniusdm"></div>

일반 마크업 + 일반 텍스트 부여

div{geniusdm}

결과




<div>geniusdm</div>

일반 마크업 + 갯수 지정

div{geniusdm}*5

결과


<div>geniusdm</div>


<div>geniusdm</div>


<div>geniusdm</div>


<div>geniusdm</div>


<div>geniusdm</div>

일반 마크업 + " + " 로 마크업 연결

div#geniusdm+div.geniusdm

결과


<div id="geniusdm"></div>


<div class="geniusdm"></div>

일반 마크업 + 속성 부여

div#geniusdm[data="geniusdm tistory"]

결과


<div id="geniusdm" data="geniusdm tistory"></div>

일반 마크업 + 속성 ( 아이디, 클래스 포함 ) 에 숫자 마스킹하기

ul>li.item$$$$$$$*10

결과


<ul>
	<li class="item0000001"></li>
	<li class="item0000002"></li>
	<li class="item0000003"></li>
	<li class="item0000004"></li>
	<li class="item0000005"></li>
	<li class="item0000006"></li>
	<li class="item0000007"></li>
	<li class="item0000008"></li>
	<li class="item0000009"></li>
	<li class="item0000010"></li>
</ul>

일반 마크업 + 속성 ( 아이디, 클래스 포함 ) 에 숫자 마스킹하기 - 역방향 -

ul>li.item$$$$$$$@-*10

결과


<ul>
	<li class="item0000010"></li>
	<li class="item0000009"></li>
	<li class="item0000008"></li>
	<li class="item0000007"></li>
	<li class="item0000006"></li>
	<li class="item0000005"></li>
	<li class="item0000004"></li>
	<li class="item0000003"></li>
	<li class="item0000002"></li>
	<li class="item0000001"></li>
</ul>

자세한 것은 https://docs.emmet.io/abbreviations/syntax/ 이곳에서 확인 가능하다.

Fast HTML markup with Emmet in VisualStudio

I had bumped into Emmet like 2 years ago and I thought that I was going to use this beautiful syntax someday and it just came so unbidden into my mind that I decided to post this. The word ' Emmet ' was right out of my mouth but I couldn't recall, so I googled it for a while and I finally found it. It'd always better to take a note whenever you can or just post an article right away.

Emmet?

Safe to say it's a tool for fast HTML markup. It's always better to look at the code right away. Take a look at this video below.

You're gonna see this fake video at https://emmet.io/. ( it's technically not a video because it's javascript working on a textarea )

This is pretty much a good plugin. It can be implemented in so many platforms as you can see above. I want to install it in VisualStudio this time. Is it going to be there in VisualStudio extensions market?

VisualStudio 2013

Go to Tool -> Extensions and Updates 

And typed Emmet and searched it, I found one ! Actually, the website already displays the VisualStudio Extension. Install it and restart the IDE.

You can see the menu EMMET on the top.

Practical, one and only usage will probably be Ctrl + 1 I guess...

Type the syntax in the html sheet and hit Ctrl + 1 will result in....

like this in the blank of an eye !! To clearly show you the differences and its magic, I just made 50 <a> tags. There're times when you have to copy and paste to make 10~15 lines of the same <a> tags while publishing, hence this syntax will be very useful and practical for you.... as long as you become very familiar with this syntax.

Syntax tour

normal markup

div

Result
<div></div>

normal markup + assign id value

div#geniusdm

Result




<div id="geniusdm"></div>

normal markup + assign class value

div.geniusdm

Result


<div class="geniusdm"></div>

normal markup + put normal text

div{geniusdm}

결과




<div>geniusdm</div>

normal markup + auto generate N items

div{geniusdm}*5

Result


<div>geniusdm</div>


<div>geniusdm</div>


<div>geniusdm</div>


<div>geniusdm</div>


<div>geniusdm</div>

normal markup + concat other markups with " + " 

div#geniusdm+div.geniusdm

Result


<div id="geniusdm"></div>


<div class="geniusdm"></div>

normal markup + assign attribute

div#geniusdm[data="geniusdm tistory"]

Result


<div id="geniusdm" data="geniusdm tistory"></div>

normal markup + masking numbers on an attribute ( including id and class )

ul>li.item$$$$$$$*10

Result


<ul>
	<li class="item0000001"></li>
	<li class="item0000002"></li>
	<li class="item0000003"></li>
	<li class="item0000004"></li>
	<li class="item0000005"></li>
	<li class="item0000006"></li>
	<li class="item0000007"></li>
	<li class="item0000008"></li>
	<li class="item0000009"></li>
	<li class="item0000010"></li>
</ul>

normal markup + masking numbers on an attribute ( including id and class ) - Backward -

ul>li.item$$$$$$$@-*10

Result


<ul>
	<li class="item0000010"></li>
	<li class="item0000009"></li>
	<li class="item0000008"></li>
	<li class="item0000007"></li>
	<li class="item0000006"></li>
	<li class="item0000005"></li>
	<li class="item0000004"></li>
	<li class="item0000003"></li>
	<li class="item0000002"></li>
	<li class="item0000001"></li>
</ul>

You can see more details in https://docs.emmet.io/abbreviations/syntax/