Emmet은 퍼블리셔를 위한 필수 플러그인이라고 할 만큼 강력한 개발도구야.

Emmet은 HTML, CSS 등의 코딩 작업 생산성을 획기적으로 향상시켜주는 도구야. eclipse는 물론이고 vim, dreamweaver, editplus, sublime text 등의 에디터에 플러그인으로 설치하여 사용할 수 있어.

Emmet은 매우 쉽고 간단한 사용법이 특징인데 Emmet의 문법에 따라 코드를 작성한 후 Tab키나 Enter키를 눌러주면 자동으로 Emmet에 정의되어 있는 코드가 생성되어 빠른 코딩이 가능해.

특히 CSS의 선택자에 익숙하다면 Emmet의 문법이 낯설지 않아 쉽게 사용할 수 있을꺼야.

Emmet에 대해 조금 더 자세히 알고 싶으면 아래의 Emmet 문서 사이트에 방문해 보길 바래.

아래는 Emmet의 문법을 한 번에 찾아볼 수 있도록 정리해 둔 페이지야.

Emmet의 문법

Emmet의 문법은 어렵지 않아. 자주 사용되는 아래의 몇가지 문법만 익혀도 충분한 생산성 향상을 경험할 수 있어.

자주 사용되는 Emmet의 문법과 그 문법을 통해 생성되는 코드를 아래에 정리했어.

ID, CLASS

div#page.section.main
<div id="page" class="section main"></div>

자식 선택 속성

nav>ul>li
<nav>
	<ul>
		<li></li>
	</ul>
</nav>

커스텀 속성

a[title="hello world"]
<a title="hello world"></a>
td[rowspan=2 colspan=3 title]
<td rowspan="2" colspan="3" title=""></td>
[a='value1' b="value2"]
<div a="value1" b="value2"></div>

엘리먼트 복제

span*3
<span></span>
<span></span>
<span></span>

넘버링

span.item$*3
<span class="item1"></span>
<span class="item2"></span>
<span class="item3"></span>
span.item$$$*3
<span class="item001"></span>
<span class="item002"></span>
<span class="item003"></span>
h$[title=item$]{Header $}*3
<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>
ul>li.item$@-*5
<ul>
	<li class="item5"></li>
	<li class="item4"></li>
	<li class="item3"></li>
	<li class="item2"></li>
	<li class="item1"></li>
</ul>
ul>li.item$@3*5
<ul>
	<li class="item3"></li>
	<li class="item4"></li>
	<li class="item5"></li>
	<li class="item6"></li>
	<li class="item7"></li>
</ul>

그룹핑

괄호를 사용하면 그룹핑을 할 수 있어.

div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer
<div id="page">
	<div id="header">
		<ul id="nav">
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
		</ul>
	</div>
	<div id="page">
		<h1><span></span></h1>
		<p></p>
		<p></p>
	</div>
	<div id="footer"></div>
</div>
table>(colgroup>col*3)+(tbody>tr*5>td*3)
<table>
	<colgroup>
		<col>
		<col>
		<col>
	</colgroup>
	<tbody>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</tbody>
</table>

텍스트

p>{click}
<p>click</p>

내포

태그명을 생략하면 div로 자동 생성되고 상위 태그에 따라 자식 태그가 결정돼.

#page.section.main
<div id="page" class="section main"></div>
em>.class
<em><span class></span></em>
ul>.class
<ul>
	<li class></li>
</ul>
table>.row>.col
<table>
	<tr class="row">
		<td class="col">`</td>
	</tr>
</table>

유용한 단축 문법

!, html:5
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>

</body>
</html>
!!!
<!DOCTYPE html>
a:link
<a href="http://"></a>
a:mail
<a href="mailto:"></a>
form
<form action=""></form>
label
<label for=""></label>
input
<input type="text">
input:text, input:t
<input type="text" name="" id="">
input:hidden, input:h
<input type="hidden" name="">
input:search
<input type="search" name="" id="">
input:email
<input type="email" name="" id="">
input:url
<input type="url" name="" id="">
input:password, input:p
<input type="password" name="" id="">
input:tel
<input type="tel" name="" id="">
input:number
<input type="number" name="" id="">
input:color
<input type="color" name="" id="">
input:checkbox, input:c
<input type="checkbox" name="" id="">
input:radio, input:r
<input type="radio" name="" id="">
input:file, input:f
<input type="file" name="" id="">
input:submit, input:s
<input type="submit" value="">
input:button
<input type="button" value="">
input:image
<input type="image" src="" alt="">
button:submit, button:s, btn:s
<button type="submit"></button>
button:disabled, button:d, btn:d
<button disabled></button>
select
<select name="`" id=""></select>
select:disabled, select:d
<select name="" id="" disabled></select>
option, opt
<option value=""></option>
textarea
<textarea name="" id="" cols="30" rows="10"></textarea>
bq
<blockquote></blockquote>
fig
<figure></figure>
ol+
<ol>
	<li></li>
</ol>
ul+
<ul>
	<li></li>
</ul>
dl+
<dl>
	<dt></dt>
	<dd></dd>
</dl>
map+
<map name="">
	<area shape="" coords="" href="" alt="">
</map>
colgroup+, colg+
<colgroup>
	<col>
</colgroup>
select+
<select name="" id="">
	<option value=""></option>
</select>
optgroup+, optg+
<optgroup>
	<option value=""></option>
</optgroup>

CSS Syntax

Visual Format

pos
position: relative;
pos:s
position: static;
pos:r
position: relative;
pos:a
position: absolute;
pos:f
position: fixed;
t
top: ;
r
right: ;
b
bottom: ;
l
left: ;
z
z-index: ;
fl
float: left;
fr
float: right;
cl, cl:b
clear: both;
cl:n
clear: none;
d, d:b
display: block;
d:n
display: none;
d:i
display: inline;
d:ib
display: inline-block;
d:tb
display: table;
d:tbc
display: table-cell;
v, v:h
visibility: hidden;
v:v
visibility: visible;
ov, ov:h
overflow: hidden;
ov:s
overflow: scroll;
ov:a
overflow: auto;
ovx, ovx:h
overflow-x: hidden;
ovx:v
overflow-x: visible;
ovx:s
overflow-x: scroll;
ovy, ovy:h
overflow-y: hidden;
ovy:v
overflow-y: visible;
ovy:s
overflow-y: scroll;
cp:r
clip: rect(top right bottom left);
cur
cursor: pointer;
cur:d
cursor: default;

Margin & Padding

m
margin: ;
m:a
margin: auto;
mt
margin-top: ;
mr
margin-right: ;
mb
margin-bottom: ;
ml
margin-left: ;
p
padding: ;
pt
padding-top: ;
pr
padding-right: ;
pb
padding-bottom: ;
pl
padding-left: ;

Box Sizing

bxz, bxz:bb
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
bxz:cb
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
bxsh
-webkit-box-shadow: inset hoff voff blur color;
box-shadow: inset hoff voff blur color;
bxsh:ra
-webkit-box-shadow: inset h v blur spread rgba(0, 0, 0, .5);
box-shadow: inset h v blur spread rgba(0, 0, 0, .5);
w
width: ;
w:a
width: auto;
maw
max-width: ;
mah
max-height: ;
miw
min-width: ;
mih
min-height: ;

Font

f
font: ;
f+
font: 1em Arial,sans-serif;
fw
font-weight: ;
fw:n
font-weight: normal;
fw:b
font-weight: bold;
fw:br
font-weight: bolder;
fw:lr
font-weight: lighter;
fs
font-style: ;
fs:i
font-style: italic;
fs:n
font-style: normal;
fs:o
font-style: oblique;
fz
font-size: ;
fza
font-size-adjust: ;
fza:n
font-size-adjust: none;
ff
font-family: ;
ff:s
font-family: serif;
ff:ss
font-family: sans-serif;
ff:a
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
ff:t
font-family: "Times New Roman", Times, Baskerville, Georgia, serif;
ff:v
font-family: Verdana, Geneva, sans-serif;

Text

va, va:t
vertical-align: top;
va:sup
vertical-align: super;
va:m
vertical-align: middle;
va:b
vertical-align: bottom;
va:sub
vertical-align: sub;
ta, ta:l
text-align: left;
ta:c
text-align: center;
ta:r
text-align: right;
ta:j
text-align: justify;
td, td:n
text-decoration: none;
td:u
text-decoration: underline;
td:o
text-decoration: overline;
td:l
text-decoration: line-through;
ti
text-indent: ;
ti:-
text-indent: -9999px;
tj
-ms-text-justify: ;
text-justify: ;
tt, tt:u
text-transform: uppercase;
tt:c
text-transform: capitalize;
tt:l
text-transform: lowercase;
tsh
text-shadow: hoff voff blur #000;
tsh:r
text-shadow: h v blur rgb(0, 0, 0);
tsh:ra
text-shadow: h v blur rgba(0, 0, 0, .5);
lh
line-height: ;
lts
letter-spacing: ;
lts-n
letter-spacing: normal;
whs
white-space: ;
whs:n
white-space: normal;
whs:nw
white-space: nowrap;
wob
-ms-word-break: ;
word-break: ;
wob:ba
-ms-word-break: break-all;
word-break: break-all;
wos
word-spacing: ;
wow
word-wrap: ;
wow:n
word-wrap: none;
wow:b
word-wrap: break-word;

Background

bg
background: #000;
bg+
background: #fff url() 0 0 no-repeat;
bg:n
background: none;
bgc
background-color: #fff;
bgc:t
background-color: transparent;
bgi
background-image: url();
bgr
background-repeat: ;
bgr:n
background-repeat: no-repeat;
bgr:x
background-repeat: repeat-x;
bgr:y
background-repeat: repeat-y;
bgp
background-position: 0 0;
bgcp
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
bgo
-webkit-background-origin: ;
background-origin: ;
bgsz
-webkit-background-size: ;
background-size: ;
bgsz:a
-webkit-background-size: auto;
background-size: auto;
bgsz:ct
-webkit-background-size: contain;
background-size: contain;
bgsz:cv
-webkit-background-size: cover;
background-size: cover;

Color

c
color: #000;
c:r
color: rgb(0, 0, 0);
c:ra
color: rgba(0, 0, 0, .5);
op
opacity: ;

Table

tbl
table-layout: ;
tbl:a
table-layout: auto;
tbl:f
table-layout: fixed;

Border

bd
border: ;
bd+
border: 1px solid #000;
bd:n
border: none;
bdcl
border-collapse: ;
bdcl:c
border-collapse: collapse;
bdcl:s
border-collapse: separate;
bdc
border-color: transparent;
bdw
border-width: ;
bdt
border-top: ;
bdt+
border-top: 1px solid #000;
bdt:n
border-top: none;
bdr
border-right: ;
bdr+
border-right: 1px solid #000;
bdb
border-bottom: ;
bdb+
border-bottom: 1px solid #000;
bdl
border-left: ;
bdl+
border-left: 1px solid #000;

List

lis
list-style: ;
lis:n
list-style: none;
list
list-style-type: ;
list:n
list-style-type: none;
list:d
list-style-type: disc;
list:c
list-style-type: circle;
list:s
list-style-type: square;
list:dc
list-style-type: decimal;
list:lr
list-style-type: lower-roman;
list:ur
list-style-type: upper-roman;

Other

!
!important
@f
@font-face {
	font-family:;
	src:url();
}
@i
@import url();
@kf
@-webkit-keyframes identifier {
	from {  }
	to {  }
}
@-o-keyframes identifier {
	from {  }
	to {  }
}
@-moz-keyframes identifier {
	from {  }
	to {  }
}
@keyframes identifier {
	from {  }
	to {  }
}
@m
@media screen {

}
ac
align-content: ;
ai
-ms-align-items: ;
align-items: ;
anim
-webkit-animation: ;
-o-animation: ;
animation: ;
anim-
-webkit-animation: name duration timing-function delay iteration-count direction fill-mode;
-o-animation: name duration timing-function delay iteration-count direction fill-mode;
animation: name duration timing-function delay iteration-count direction fill-mode;
animdel
-webkit-animation-delay: time;
-o-animation-delay: time;
animation-delay: time;
animdir
-webkit-animation-direction: normal;
-o-animation-direction: normal;
animation-direction: normal;
animdir:a
-webkit-animation-direction: alternate;
-o-animation-direction: alternate;
animation-direction: alternate;
animdir:ar
-webkit-animation-direction: alternate-reverse;
-o-animation-direction: alternate-reverse;
animation-direction: alternate-reverse;
animdir:n
-webkit-animation-direction: normal;
-o-animation-direction: normal;
animation-direction: normal;
animdir:r
-webkit-animation-direction: reverse;
-o-animation-direction: reverse;
animation-direction: reverse;
animdur
-webkit-animation-duration: 0s;
-o-animation-duration: 0s;
animation-duration: 0s;
colm
-webkit-columns: ;
-moz-columns: ;
-o-columns: ;
columns: ;
colmc
-webkit-column-count: ;
-moz-column-count: ;
-o-column-count: ;
column-count: ;
colmg
-webkit-column-gap: ;
-moz-column-gap: ;
-o-column-gap: ;
column-gap: ;
colmr
-webkit-column-rule: ;
-moz-column-rule: ;
-o-column-rule: ;
column-rule: ;
colmw
-webkit-column-width: ;
-moz-column-width: ;
-o-column-width: ;
column-width: ;
fx
-webkit-flex: ;
-moz-flex: ;
-ms-flex: ;
-o-flex: ;
flex: ;
jc
justify-content: ;
tov, tov:e
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
tov:c
-ms-text-overflow: clip;
text-overflow: clip;
trf
-webkit-transform: ;
-ms-transform: ;
-o-transform: ;
transform: ;
trf:r
-webkit-transform: rotate(angle);
-ms-transform: rotate(angle);
-o-transform: rotate(angle);
transform: rotate(angle);
trf:rx
-webkit-transform: rotateX(angle);
-ms-transform: rotateX(angle);
-o-transform: rotateX(angle);
transform: rotateX(angle);
trf:ry
-webkit-transform: rotateY(angle);
-ms-transform: rotateY(angle);
-o-transform: rotateY(angle);
transform: rotateY(angle);
trf:rz
-webkit-transform: rotateZ(angle);
-ms-transform: rotateZ(angle);
-o-transform: rotateZ(angle);
transform: rotateZ(angle);
trf:sc
-webkit-transform: scale(x, y);
-ms-transform: scale(x, y);
-o-transform: scale(x, y);
transform: scale(x, y);
trf:sc3
-webkit-transform: scale3d(x, y, z);
-ms-transform: scale3d(x, y, z);
-o-transform: scale3d(x, y, z);
transform: scale3d(x, y, z);
trf:scx
-webkit-transform: scaleX(x);
-ms-transform: scaleX(x);
-o-transform: scaleX(x);
transform: scaleX(x);
trf:scy
-webkit-transform: scaleY(y);
-ms-transform: scaleY(y);
-o-transform: scaleY(y);
transform: scaleY(y);
trf:scz
-webkit-transform: scaleZ(z);
-ms-transform: scaleZ(z);
-o-transform: scaleZ(z);
transform: scaleZ(z);
trf:t
-webkit-transform: translate(x, y);
-ms-transform: translate(x, y);
-o-transform: translate(x, y);
transform: translate(x, y);
trf:t3
-webkit-transform: translate3d(tx, ty, tz);
-ms-transform: translate3d(tx, ty, tz);
-o-transform: translate3d(tx, ty, tz);
transform: translate3d(tx, ty, tz);
trf:tx
-webkit-transform: translateX(x);
-ms-transform: translateX(x);
-o-transform: translateX(x);
transform: translateX(x);
trf:ty
-webkit-transform: translateY(y);
-ms-transform: translateY(y);
-o-transform: translateY(y);
transform: translateY(y);
trf:tz
-webkit-transform: translateZ(z);
-ms-transform: translateZ(z);
-o-transform: translateZ(z);
transform: translateZ(z);
trfo
-webkit-transform-origin: ;
-moz-transform-origin: ;
-ms-transform-origin: ;
-o-transform-origin: ;
transform-origin: ;
trs
-webkit-transition: prop time;
-o-transition: prop time;
transition: prop time;
trsde
-webkit-transition-delay: time;
-o-transition-delay: time;
transition-delay: time;
trsdu
-webkit-transition-duration: time;
-o-transition-duration: time;
transition-duration: time;
us
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;

Leave a Reply

Your email address will not be published. Required fields are marked *

Latest Post