emmet 단축키 정리

1. 자식 : >

- 자식 구조를 만들 때 사용

nav > ul > li

 

2. 형제 : +

- 형제 구조를 만들 때 사용

h1 + p

 

3. 상위로 : ^

- 자식에서 다시 부로로 올라갈 때 사용

div > h1 + p ^ footer

 

4. 묶기 : ()

- 묶어서 곱하기 같은 것을 할 때

 

5. 곱하기: *

- 여러개 반복할 때

ul > li * 5 > a
ul > li > a*5
dl > (dt + dd) *5

 

6. 숫자 넣기 : $

- $ 갯수 만큼 자리수가 된다.

- $$$ 는 세자리수 $$$$$ 는 다섯 자리수

ul > li.item$$*5

 

- $ 갈라져 있으면 갈라진 부분들에 각각 수가 놓인다.

ul>(li.item$>a[#]{header $})*3

 

- 역순으로 하고 싶으면 $@- 로 한다.

ul>(li.item$@->a)*3

 

- 시작 숫자를 지정하고 싶으면 $@3*7 과 같이 한다.

ul>li.item$@3*7

 

7. 텍스트 넣기: {}

- 태그 사이에 텍스트를 넣을 때 사용

p>{계속하려면 }+a{여기}+{를 클릭!}

 

8. 아이디 넣기 : #

aside#main_aside

 

9. 클래스 넣기 : .

- .클래스명 과 같이 입력하면 기본으로 div 태그에 클래스가 생성된다.

div.wrapper

- 하나의 태그에 클래스를 여러개 넣고 싶으면 .을 붙여서 계속 쓴다.

div.panel.panel-warning

 

10. 사용자 정의 : []

- 태그의 속성과 속성값을 넣어준다

img[alt="숨겨진 아이콘"]

- 2개 이상일 경우는 속성과 값 사이에 공백을 둔다

td[rowspan=2 colspan=3 title]

 

11. 의미없는 문장 만들기: lorem단어수

lorem20

 

12. 묵시적 태그명

- 태그 없이 .클래스명만 적는 경우 알아서 태그를 맞춰 준다.

.class
em>.class
table>.row>.col

 

13. emmet 치트키

docs.emmet.io/cheat-sheet/

Cheat Sheet

 

*가끔 기본 속성값 입력이 안되는 경우가 있다. 그러한 경우 속성=속성값 처럼 지정한다

a[#]
a[href=#]

 

* 빈 이미지 만들기 (emmet은 아님)

<img src="http://placehold.it/200" alt="정사각이미지: 단위는 픽셀">
<img src="http://placehold.it/200x400" alt="직사각이미지: 가로 x 세로 단위는 픽셀">