빠른 마크업을 위한 Emmet 사용법(sublime text 기준)

Emmet - 빠른 HTML 마크업 & CSS 스타일링

빠른 마크업을 위한 Emmet 에 대한 사용법을 알아보겠습니다.

http://emmet.io

에밋에 대한 자세한 내용은 위 링크를 참고 바랍니다.

Emmet HTML - '표준 DTD 문서' 유형별 생성

HTML 문서 기본형 축약코드로 예를 들어 단축어 doc + tab 키를 치면 문서타입이 출력됩니다.

• doc : HTML5 문서 기본 골격 [DTD 제외]
• doc4 : HTML4 문서 기본 골격 [DTD 제외]
• html:4t : HTML4 문서 관용모드 기본 골격
• html:4s : HTML4 문서 엄격모드 기본 골격
• html:xt : XHTML1 문서 관용모드 기본 골격
• html:xs : XHTML1 문서 엄격모드 기본 골격
• html:5 또는 ! : HTML5 문서 기본 골격

또 다른 HTML 문서 기본형 축약코드

• !!!4t : HTML4 관용모드 DTD
• !!!4s : HTML4 엄격모드 DTD
• !!!xt : XHTML1 관용모드 DTD
• !!!xs : XHTML1 엄격모드 DTD
• !!! : HTML5 DTD

HTML 에서 Emmet 활용하기

div>h3+(ul>li>a)+(dl>dt+dd) 그룹핑하기

html

div>h3+(ul>li>a)+(dl>dt+dd)

<div>
    <h3></h3>
    <ul>
        <li><a href=""></a></li>
    </ul>
    <dl>
        <dt></dt>
        <dd></dd>
    </dl>
</div>

div>h3+ul>li>a^^dl>dt+dd 캐럿기호를 사용한 부모요소 접근

html

div>h3+ul>li>a^^dl>dt+dd

<div>
    <h3></h3>
    <ul>
        <li><a href=""></a></li>
    </ul>
    <dl>
        <dt></dt>
        <dd></dd>
    </dl>
</div>

아래 cheet sheet 의 p[class="a b"] 는 다른 IDE에서 지원하지 않는 경우도 있습니다.

html

p[class="a b”] or p.a.b
<p class="a b"></p>

nput:radio
<input type="radio" name="" id=""/>

input:checkbox
<input type="checkbox" name="" id=""/>

input:submit
<input type="submit" value=""/>

html

#page>#nav>ul>li[class="item-$$"]*5
<div id="page">
    <div id="nav">
        <ul>
            <li class="item-01"></li>
            <li class="item-02"></li>
            <li class="item-03"></li>
            <li class="item-04"></li>
            <li class="item-05"></li>
        </ul>
    </div>
</div>
#page>#nav>ul>li[class="item-$$@-"]*5   // 5부터 거꾸로~
#page>#nav>ul>li[class="item-$$@5"]*5   // 5부터 시작해서 증가
#page>#nav>ul>li[class="item-$$@-5"]*5  // 5부터 시작하여 거꾸러~

html

{} curly brace
#page>#nav>ul>li[class="item-$$@5"]{목록아이팀}*5
<div id="page">
    <div id="nav">
        <ul>
            <li class="item-05">목록아이팀</li>
            <li class="item-06">목록아이팀</li>
            <li class="item-07">목록아이팀</li>
            <li class="item-08">목록아이팀</li>
            <li class="item-09">목록아이팀</li>
        </ul>
    </div>
</div>

html

a>{click}+strong{me!}
<a href="">click<strong>me!</strong></a>

p>a{clcik}+{이것은 emmet입니다~}
<p><a href="">clcik</a>이것은 emmet입니다~</p>

디자인에 대한 형태를 만들기 위해서 텍스트가 필요할때 더미텍스트가 필요한데 이를 위한 로렘입섬 이라는 디자인을 위한 텍스트를 제공한다.

html

p*2>lorem4
<p>Lorem ipsum dolor sit.</p>
<p>Laudantium officia quam quisquam?</p>

p>lorem4.text*2
<p><span class="text">Lorem ipsum dolor sit.</span><span class="text">Delectus dolorem nihil voluptatibus!</span></p>

Emmet CSS Style

css

.a {m10+p10}
.a { margin: 10px; padding: 10px;}

.b {m4-4-10-2}
.b { margin: 4px 4px 10px 2px;}

.c {m2-4–9}
.c { margin: 2px 4px 9px;}

.d {p10-.5e }
.d { padding: 10px .5em; }

.e {p.3p-.6p }
.e { padding: .3% -.6%; }

.f {p10r}
.f { padding: 10rem;}

.g {fw400}
.g { font-weight: 400;}

.h {z4}
.h { z-index: 4;}

.i {c#333}
.i { color: #333333;}

.j {c#31}
.j { color: #313131;}

.k {fsz13}
.k { font-size: 13px;}

.l {fsz13!}
.l { font-size: 13px !important;}

.m {bd1-s#45}
.m { border: 1px solid #454545;}

.n {trs}
.n { -webkit-transition: prop time; 
    -moz-transition: prop time; 
    -ms-transition: prop time; 
    -o-transition: prop time; 
    transition: prop time;
}

기본적인 자주 사용되는 것들만 알아보았습니다. 더 많은 cheat sheet 는 에밋 홈페이지를 참고하세요. 

그리고 vender prefix 가 붙은 스타일링의 경우 한 군데 속성값만 변경한 후 ctrl + shift + r 을 누르면 다른 제조사의 스타일링 값도 모두 일괄적으로 변경시킬 수 있습니다. (sublime text 의 경우입니다.)

@i

@m

cm

@c 확장은 에밋 셋팅해서

@f

@f+

wfsm

wfsm-a   -webkit-font-smoothing: anticialiased

f+

ov-h

anim 애니메이션 정의

@kf 애니메이션 키프레임 설정

op+     filter 까지 나옴

op:ie 

op:ms    filter opacity

css 미러링 기능

ctrl + shift + r (맥: cmd + shift + r)

태그 네임 교체하기

ctrl + shift + ‘  (맥 : cmd + shift + k)

태그 삭제하기

ctrl + shift + ;  (맥 : cmd + ‘ )

수식 계산하기

ctrl + shift + y ( 맥 : cmd + shift + y)

태그 셀렉션<

맥 cmd + shift + .     윈도우 ctrl+ shift + .

태그 매칭 바로가기

ctrl+ alt + j (맥 ctrl + shift + t)

edit point 바로가기

ctrl + alt + 좌우 방향키 ( 맥 : ctrl + alt + 좌우방향키)

이미지 업데이트

ctrl + u

Emmet Setting - User 활용하기

{
    "snippets": {
        "html": {
            "abbreviations": {
                "a:target": "<a href=\"\" target=\"_blank\"></a>"
            },

            "snippets" : {
                "cc:ie7" : "<!--[if IE 7]>|<![endif]-->"
            }
        }
    },
    "snippets" : {
        "cc:ie7" : "<!--[if IE 7]>\n\t|<![endif]-->"
    },
    "preferences": {
    // "css.valueSeparator": ": ",
    // "css.propertyEnd": ";",
    "filter.commentBefore" : "<!-- [Start]: ${1:comment} <%= attr('id', '#')%> -->\n",
            "filter.commentAfter" : "\n<!-- [End]: ${1:comment} <%= attr('id', '#')%> -->",
    },

    // Output profiles for syntaxes
    // http://docs.emmet.io/customization/syntax-profiles/
    "syntaxProfiles": {
    // Enable XHTML dialect for HTML syntax
    // "html": "xhtml"
    // 
    // Write chained CSS abbreviations on single line:
    // "css": "css_line"
    }
}

Jaehee's e-room