emmet 치트시트 사이트는 아래 url 참고
http://docs.emmet.io/cheat-sheet/
요약하자면 아래 외계어 같이 쓴 걸 복붙하고 맨 끝에서 컨트롤+E나 Tab키를 눌러주면
form>(label{뭐래니}+input:submit.qwer5500$#zxcv5500$+br)*5
<form action="">
<label for="">뭐래니</label>
<input type="submit" value="" class="qwer55001" id="zxcv55001" />
<br />
<label for="">뭐래니</label>
<input type="submit" value="" class="qwer55002" id="zxcv55002" />
<br />
<label for="">뭐래니</label>
<input type="submit" value="" class="qwer55003" id="zxcv55003" />
<br />
<label for="">뭐래니</label>
<input type="submit" value="" class="qwer55004" id="zxcv55004" />
<br />
<label for="">뭐래니</label>
<input type="submit" value="" class="qwer55005" id="zxcv55005" />
<br />
</form>
이런 식으로 태그들이 생성 된다.
input:text , input:file 등등으로 사용 가능하다.
<추가 예제>
form>(label{뭐래니}+input[name="la"]:submit.qwer5500$#zxcv5500$+br)*5
form>(label{뭐래니}+input[name]:submit.qwer5500$#zxcv5500$+br)*5
> : 한 뎁스 안으로
+ : 같은 항렬 태그 생성
. : 속성 class 이름값 지정
# : 속성 id 이름값 지정
( ) : 속성들 묶어서 쓰기
{} : 속성들 사이 텍스트 쓰기
$ : 반복될 카운트 증가 ( 카운트 증가 안시킬 꺼면 빼라)
* : 5회 반복이면 *5
: : input:text 처럼 사용하는데 그 태그의 지정된 값으로 변환해 준다
예 : <input type="text" name="" id="" />
html 양식:
html:5
<자동완성 예>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
</body>
</html>
html:4t
html:4s
html:xt
html:xs
html:xxs
Climb-up: ^ 상위경로로 올리는 기능
- div+div>p>span+em^bq
- <div></div>
- <div>
- <p><span></span><em></em></p>
- <blockquote></blockquote>
- </div>
- ID, CLASS 속성
- div#page.section.main
- <div id="page" class="section main"></div>
- 커스텀 속성
- a[title="hello world"]
- <a title="hello world"></a>
- 엘리먼트 복제
- li*3
- <li></li><li></li><li></li>
- 넘버링 - $ 위치에 값이 1부터 1씩 증가 (1,2,3,4...)
- li.item$*3
- <li class="item1"></li><li class="item2"></li><li class="item3"></li>
- li.item$$$*2
- <li class="item001"></li><li class="item002"></li>
- 그룹핑
- div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer
- ID, CLASS 앞에 태그명을 생략하면 DIV로 간주
- #content>.section
- <div id="content"><div class="section"></div></div>
- 텍스트
- p>{click}
- <p>click</p>