Emmet (Zencoding) 정리

2021.06.03 - [📚Study Note/Ajax] - 이클립스에 Emmet(구 Zen coding) 플러그인 설치하는 방법

이클립스에 Emmet(구 Zen coding) 플러그인 설치하는 방법

---

이클립스에 Emmet 플러그인을 설치한 이후 

사용할 수 있는 Emmet 활용

⏺ = Ctrl + E

1. 태그선택자

div⏺  → <div></div> 자동생성

div{abcd}⏺ → <div>abcd</div>

a⏺

img⏺

table⏺

 

2. 아이디 선택자

div#box⏺

div#box{kkkkk}

#box

#box{kkkkk}

 

3. 클래스 선택자

div.items{aaaa}

.items{kkkk}

table.table

 

4. 조합

div#box.items

div#box.items.unit.control

#box.items.unit{kkkkk}

 

 

5. 속성선택자

div[title=test]

a[href=www.naver.com title=네이버]{사이트이동} 'www.naver.com' 에서 ' 안해줘도뭐,,

6. PCDATA

div{박스}

a{홈페이지로 이동}

p{문단의 내용 기술}

 

7. 반복생성

div*5

img[src=images/dog.jpg]*5

.box*5

.box{box}*5

#box$*5

.box#box${box$}*5

img[src=images/obj0$.jpg]*5

h$*6

h${제목$}*6

 

8. 연속생성

div+p

h1{제목}+p{내용}*5

((h1{제목$}+p{내용$}*2)*5

div+a+p

 

9. 하위생성

table+

ul+

ol+

select+

 

10 .자식 생성

div+p

div>p

div>p*5

div>h$*5

table#tbl>tr*5>td*3

table#tbl>tr*3>td.label+td.content

table#tbl>tr*3>td#label$+td.content

table#tbl>(tr>td*3)+((tr>td*3)*5)

 

lorem : 무작위로 문자열 구조를 생성한다. 매번 다른 내용이 나온다.

table>(tr>th*2)+(tr>td{word}+lorem(td{lorem}))

td{lorem}하면 안되고 lorem(td{lorem}) 으로 해야 한다.

---

table>tr.line*3>(td.col{내용$}+td.comm{부연설명})*3

 

table>tr*10>td.td1{해당항목$}+lorem(td.td2{lorem})