EMMET

Emmet은 코딩을 빠르고 쉽게 만들어 주는 초고속 코딩 도구입니다. 예전에 젠 코딩이라는 이름으로 많은 인기를 끌었으며 현재는 emmet으로 변경되어 지금까지 사용하고 있습니다.

html emmet

doc

<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>

</body>
</html>

doc4

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
</head>
<body>

</body>
</html>

!!!
```
<!DOCTYPE html>
```

!!!xt

<!DOCTYPE html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

!!!xs

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

html:5 or !

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

</body>
</html>

nav>ul>li>a>img

<nav>
	<ul>
		<li><a href=""><img src="" alt=""></a></li>
	</ul>
</nav>

div+p+div
```
<div></div>
<p></p>
<div></div>
```

div>ul>li*4^^+div

<div>
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>
<div></div>

(div>ul>li*4)+p+span

<div>
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>
<p></p>
<span></span>

#wrap>#header+#nav+#sidebar+#contents+#footer

<div id="wrap">
	<div id="header"></div>
	<div id="nav"></div>
	<div id="sidebar"></div>
	<div id="contents"></div>
	<div id="footer"></div>
</div>

#link>a[href="#" target="_blank"]*10

<div id="link">
	<a href="#" target="_blank"></a>
	<a href="#" target="_blank"></a>
	<a href="#" target="_blank"></a>
	<a href="#" target="_blank"></a>
	<a href="#" target="_blank"></a>
	<a href="#" target="_blank"></a>
	<a href="#" target="_blank"></a>
	<a href="#" target="_blank"></a>
	<a href="#" target="_blank"></a>
	<a href="#" target="_blank"></a>
</div>

ul[id="ul" class="ul"]>li*8 or ul#ul.ul>li*8

<ul id="ul" class="ul">
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>

ul.list>li.desc-$*10

<ul class="list">
	<li class="desc-1"></li>
	<li class="desc-2"></li>
	<li class="desc-3"></li>
	<li class="desc-4"></li>
	<li class="desc-5"></li>
	<li class="desc-6"></li>
	<li class="desc-7"></li>
	<li class="desc-8"></li>
	<li class="desc-9"></li>
	<li class="desc-10"></li>
</ul>

ul.list>(li.desc-$+li.lesc-$)*5

<ul class="list">
	<li class="desc-1"></li>
	<li class="lesc-1"></li>
	<li class="desc-2"></li>
	<li class="lesc-2"></li>
	<li class="desc-3"></li>
	<li class="lesc-3"></li>
	<li class="desc-4"></li>
	<li class="lesc-4"></li>
	<li class="desc-5"></li>
	<li class="lesc-5"></li>
</ul>

ul.list>li[data-num="$$"]*10

<ul class="list">
	<li data-num="01"></li>
	<li data-num="02"></li>
	<li data-num="03"></li>
	<li data-num="04"></li>
	<li data-num="05"></li>
	<li data-num="06"></li>
	<li data-num="07"></li>
	<li data-num="08"></li>
	<li data-num="09"></li>
	<li data-num="10"></li>
</ul>

ul.list>li[data-num="$$@-"]*10

<ul class="list">
	<li data-num="10"></li>
	<li data-num="09"></li>
	<li data-num="08"></li>
	<li data-num="07"></li>
	<li data-num="06"></li>
	<li data-num="05"></li>
	<li data-num="04"></li>
	<li data-num="03"></li>
	<li data-num="02"></li>
	<li data-num="01"></li>
</ul>

ul.list>li.st-$@15*5

<ul class="list">
	<li class="st-15"></li>
	<li class="st-16"></li>
	<li class="st-17"></li>
	<li class="st-18"></li>
	<li class="st-19"></li>
</ul>

ul.list>li.st-$@-15*5

<ul class="list">
	<li class="st-19"></li>
	<li class="st-18"></li>
	<li class="st-17"></li>
	<li class="st-16"></li>
	<li class="st-15"></li>
</ul>

ul>li*10>lorem8

<ul>
	<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
	<li>Quasi, impedit, praesentium. Tempora, fuga veniam qui ipsam.</li>
	<li>Vero sunt cum ex voluptate culpa omnis aut!</li>
	<li>Commodi magnam harum aperiam, repellendus rem provident temporibus?</li>
	<li>Hic facilis impedit repellendus quia, eum harum modi.</li>
	<li>Labore iste, laboriosam pariatur. Distinctio, nulla pariatur explicabo!</li>
	<li>Labore ad libero porro laborum enim cum architecto?</li>
	<li>Consequatur placeat illo fugit in perferendis modi quibusdam!</li>
	<li>Quae accusantium officia, perferendis nemo mollitia sequi nam.</li>
	<li>Eaque autem obcaecati unde deserunt animi dolore sunt.</li>
</ul>

css emmet

m10
```
{margin: 10px;}
```
p10
```
{padding: 10px;}
```
p10e
```
{padding: 10em;}
```
p100p
```
{padding: 100%;}
```
lh1.5
```
{line-height: 1.5;}
```
fwb
```
{font-weight: bold;}
```
z10
```
{z-index: 10;}
```
op.5
```
{opacity: .5;}
```
c#1
```
{color: #111;}
```

btc#cd+bg#f

{border-top-color: #cdcdcd;
background: #fff;}

bdrs
```
{border-radius: ;}
```

nav>ul>li>a>img|s

한줄 효과

nav>ul>li>a>img|e

엔티티코드 변환

스니펫 & 축약 정리

{
	"snippets": {
		"variables": {
			"lang": "ko",
			"locale": "ko-KR",
			"charset": "UTF-8"
		},
		"html": {
		 	//스니펫
		 	"snippets":{
		 		"nav+": "nav[id=\"${1:gnb}\"]>ul>li*${2:3}>a$3"
		 	},
		 	//축약 표현식
		 	"abbreviations": {
		 		"table+" : "table[id=]>caption+tr>th",
		 	}
		}
	}
}

EMMET 단축키

이름	설명	윈도우	맥
Expand Abbreviation	Emmet 사용	tab or Ctrl + E
Interactive Expand Abbreviation	실시간 Emmet 사용	Ctrl + Alt + E
Go to Matching Pair	태그 시작, 끝 지점으로 바로 이동	Ctrl + Alt + J
Go to Edit Point	태그 사이, 빈 속성등으로 포인트를 이동	Ctrl + Alt + ←/ →
Select Item	태그 이름, 속성 값으로 이동	Shift + Ctrl + ,/ .	Shift + Command + ,/ .
Toggle Comment	주석 표시 설정 및 해제	Shift + Ctrl + /	Shift + option + /

Professional web publishers

callme365.com