Emmet
초고속 코딩 도구! 이름이 거창합니다.
하지만 아래 주소로 가셔서 사용 데모를 보시면 왜 초고속인지 이해가 되실거라 믿습니다.
Emmet 공식 사이트
간단하게 설명하자면 CSS 셀렉터를 이용하여 HTML코드로 변경하는 도구입니다.
이 외에도 수많은 기능이 있으며 아래에서 설명하겠습니다.
이 포스트의 목적은 제가 작업중에 생각이 안날 때 쉽게 찾기 위함이었으나, 간단한 기능적 설명도 달아서 기능을 모르셔도 한번 봐두시면 도움이 될 것 입니다.
설치하기
package control을 이용하여 설치하겠습니다.
설치방법은 이전 포스트를 참조부탁드립니다.
Package Install에서 Emmet을 검색하여 설치합니다.
Emmet의 경우 설치 후 Sublime Text의 재시작이 필요합니다. 재시작 해줍시다.
사용방법
CSS selector를 이용하여 elements를 만들 수 있습니다.
이때 CSS selector에서 줄 수 있는 attributes는 물론 * 3같은 연산식도 사용하여 간편하게 elements를 생성 할 수 있습니다.
아래서는 따로 단축키를 적어놓진 않을 예정입니다..
첨부한 주소로 링크타고 들어가면 현재 맥인지 윈도우인지 체크하여 단축키를 보여주고 있기 때문입니다..
간단한 예
설치 후 Sublime Text에서 index.html 파일을 만들어 줍시다.
그리고 아래와 같이 입력해 줍니다.
div>dl>dt
위와같이 입력후 그상태에서 Tab버튼을 눌러줍시다
<div>
<dl>
<dt></dt>
</dl>
</div>
짠- 하고 엘리먼트가 생성되었습니다.
좀더 복잡하게 해볼까요?
div>dl>dt+(dd#id-test.classt-est*3)
dt이후에 뭔가가 더 추가됐네요
기존 CSS Selector와 다르게 괄호와 *연산자가 추가되었네요.
위에서 했던것과 같이 Tab버튼을 눌러 줍시다.
<div>
<dl>
<dt></dt>
<dd id="id-test" class="classt-est"></dd>
<dd id="id-test" class="classt-est"></dd>
<dd id="id-test" class="classt-est"></dd>
</dl>
</div>
대충 예상은 하셨겠지만 dd엘리먼트가 *3 만큼 생성되었습니다.
의문이 생기네요.. class 이름이 동일할 경우엔 위와같이 하면 되겠지만.. 증가하는 값에대해서는 어떻게 처리할까요?
div>ul>li.item$*3>span.subitem$$$*5
여기 답이 있네요
위에서 입력한 값을 emmet해봅시다
<div>
<ul>
<li class="item1">
<span class="subitem001"></span>
<span class="subitem002"></span>
<span class="subitem003"></span>
<span class="subitem004"></span>
<span class="subitem005"></span>
</li>
<li class="item2">
<span class="subitem001"></span>
<span class="subitem002"></span>
<span class="subitem003"></span>
<span class="subitem004"></span>
<span class="subitem005"></span>
</li>
<li class="item3">
<span class="subitem001"></span>
<span class="subitem002"></span>
<span class="subitem003"></span>
<span class="subitem004"></span>
<span class="subitem005"></span>
</li>
</ul>
</div>
물론 증가말고 감소도 가능합니다.
이외에도 너무많은 유용한, 특별한, 기똥찬 기능들이 가득합니다.
단순한 엘리멘트 생성으로만 사용하셔도 좋겠지만, 아래 더많은 기능들을 확인해보세요
지원하는 기능 설명
이번항목에서는 공식지원문서 링크와 함께 기능별 간단한 설명을 첨부할 것 입니다.
보시고 유용하다 생각되는.. 혹은 필요한 기능이다 싶을경우 링크를 따라가보세요.
공식 문서에서는 실제 Watch Demo를 함께 제공하기 때문에 훨씬 이해하기 쉽게 되어있습니다.
Emmet Docs
실행이전->이후 상황을 한눈에 보고 싶을때는 Cheat-Sheet페이지를 이용해 봅시다.
Cheat-Sheet 문서
Syntax 문서보기
기본문법은 위에서 설명한 부분으로 충분히 이해가 되셨으리라고 보지만
css selector에 대해서 잘 알지 못하신 분이나, 더 자세히 알고싶은 분들은 아래 문서를 확인 하시면 됩니다.
Snippets, Alias(별칭) 문서보기
자주 사용하거나 혹은 별칭을 주고 싶은 경우가 있을때 이 기능을 사용 하시면 됩니다.
내부 태그 이름 문서보기
Tag이름을 할당하지 않고 아래와같이 사용한다면 어떻게 될까요?
<ul>
.item
</ul>
이럴경우 아래와 같이 생성되게 됩니다.
<ul>
<li class="item"></li>
</ul>
ul태그의 내부에서는 자동적으로 li로 치환되어 생성됩니다.
div나 span내부에서 위와같이 실행한다면 div에서 div가 span에선 span으로 생성되게 됩니다.
로렘 입숨(Lorem Ipsum) 생성 문서보기
로렘 입숨이란, 그래픽 디자인 분야에서 시각적 연출을 보여줄 때 사용하는 표준 채우기 텍스트입니다.
실제 사용되는 문장이 아닌 공간을 차지하는 임의의 단어들이라고 생각하시면 됩니다.
lorem
lorem10
위와같이 사용할 수 있습니다 lorem뒤에 숫자가 있는 경우 숫자만큼의 단어가 채워지게 됩니다.
Vendor prefixes 문서보기
emmet의 지원은 html만 국한되지 않습니다.
CSS Vendor Profixes기능을 지원하여 무의미한 타자 시간도 줄여줍니다.
Docs : Vendor prefixes
-webkit-transform: ;
-moz-transform: ;
-ms-transform: ;
-o-transform: ;
transform: ;
위와같이 반복적인 입력이 필요할 경우 아래와 같이 사용하시면 됩니다.
-wmso-trf
하지만 스타일 값 입력은 한줄씩 해야하잖아요… 라고 생각 할 수 있지만 Sublime Text기능을 이용하여 동시에 입력 할 수 있는 상태로 변환됩니다.
즉 한번에 입력으로 동시에 5줄을 입력 할 수 있다는 말이죠.
Gradients를 생성할때도 지원합니다.
Balance 문서보기
Emmet은 특별한 기능을 포함한 단축키들을 제공하고 있습니다.
감싸진 위치 별로 블록선택이 되며, 단축키에 따라서 블록의 위치가 확장, 감소가 됩니다.
현재 포인터로부터 감싸진 태그를 블록해주어, 복잡한 구조일수록 효과가 돋보이는 기능입니다.
저의 경우 맥용 SublimeText3에서는 잘되는 모습을 확인 하였으나, 윈도우에서는 잘 안되서 갸우뚱했습니다
Go To Matching Pair 문서보기
선택된 Element의 시작과 끝으로 커서를 옮길 수 있습니다.
엘리멘트가 포함하는 내용이 너무 길어질 경우 유용하게 사용 할 수 있는 단축키 입니다.
Wrap with Abbreviation 문서보기
블록으로 잡힌 문자열을 html로 감싸주는 기능입니다..
문자열을 블록하고 특정 단축키를 입력하면 생성되는 입력창에서 사용할 기능을 입력해주면 됩니다.
여러 문자열을 동일한 태그로 감싸고 싶을 때 정말 유용하게 사용되는 기능입니다.
Go To Edit Point 문서보기
현재 커서이후의 Edit Point로 이동 하는 단축키입니다.
이후 말고 커서이전 Edit Point로도 가능합니다..
Select Item 문서보기
Select Item은 위에 Go To Edit Point와 비슷한 기능을 하고 있습니다.
위에서는 Edit Point를 이동 했다면 여기서는 아이템별로 즉 엘리먼트 이름, 값, 단어 별로 이동합니다.
Toggle Comment 문서보기
개발시 정말 유용하게 사용되는 주석 Toggle입니다
주석을 걸고싶은 엘리먼트나 문장에 커서를 놓고 동작시켜주면 주석이 생성됩니다.
엘리먼트 네임이라면 시작부터 끝까지, css style항목이라면 해당 항목만 되기 때문에 시작부터 끝까지 블록을 지정해줄 수고를 덜어 줍니다.
여기서.. 시작..했으니.. 이쯤에서 끝인가..? 블록을 지정하고 맞는지 확인하기 위해 스크롤 위아래로 옮길 필요가 없어집니다.
Split/Join Tag 문서보기
태그를 합쳤다 띄어놨다 합니다.
간단하게 아래 예제를 봅시다
<example></example>
위와같은 태그가 있을때 이 기능을 실행해주면,
아래와 같이 하나로 합쳐집니다.
<example />
다시 기능을 실행해주면 원래상태로 돌아갑니다.
참고로 Join되기 전에 안에 있던 내용은 사라지니깐 주의해주시기 바랍니다.
Delete Tag 문서보기
위에 기능과 같이 합쳤다 띄어놓기만 하는것이 아닙니다.
감싼 내용은 그대로 둔 채 커서가 위치한 태그만 제거 할 수 있습니다.
Merge Lines 문서보기
어딘가에서 복사붙여넣기해서 여러줄로 못나게 되어있는 문자열들을 한줄로 치환할 수 있습니다.
Update Image Size 문서보기
보고 무릎을 탁 치게 만드는 놀라운 기능입니다.
css에 url 혹은 img 태그의 경로에 존재하는 이미지파일 크기를 입력해 줍니다.
Evaluate Math Expression 문서보기
간단한 연산도 지원합니다. 계산기를 켤필요가 없겠네요
increment/decrement Number 문서보기
Sublime Text에서 숫자를 단축키로 증가/감소할 수 있습니다.
단축키별로 0.1단위 1단
Reflect CSS Value 문서보기
css에서 vendor prefix가 달려있는 값들의 일괄 수정을 지원합니다.
vendor prefix가 달려있는 css중 변경하려는 하나를 골라서 값을 입력 합니다.
그 후 단축키를 입력해주면 동일한 기능을 하는 것들에 대해서 동시에 값을 변경해줍니다.
설명이 더 어렵네요.. 직접가서 보시는걸 권합니다!
Encode/Decode Image to Data:URL 문서보기
image를 Base64로 encoding해줍니다.
기타 기능
BEM/OOCSS 문서보기
객체지향 CSS라고 합니다.
css요소들을 클래스 단위로 추상화 하여 사용하는 방식이라고 합니다.
Emmet은 이와 관련된 기능을 지원합니다.
BEM/OOCSS에 대해서도 아래문서를 참고하여 봅시다.
CSS 방법론
객체지향 CSS
Customization 문서보기
Snipptes, 환경설정, 콘텐츠별 문법을 사용자에 맞게 설정 할 수 있습니다.