[웹개발] 웹개발 이클립스 플러그인, Emmet 에밋

Emmet, Zen-Coding

- HTML과 CSS코드를 쉽게 작성해주는 플러그인.

- CSS선택자를 사용

1. http://emmet.io 접속.

2. Eclipse 클릭!

3. Installation에 있는 주소를 복사

4. 이클립스에서 Help > Install New Software 클릭

5. 3에서 복사했던 주소를 Work with 에 복사 후 Add 버튼 클릭

6. 플러그인의 이름을 Emmet으로 하고 Add 버튼 클릭

7. 체크박스를 클릭하고 다운로드하면 끝!

에밋 사용법

- 기본 단축키 : Crtl + E

1. 태그생성하기

이클립스 html 혹은 jsp 파일에서 div를 입력한후 Ctrl + E 를 누르면

<div></div> 태그가 생성된다.

응용

div*5 -> div태그 5개 생성.

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

div.item*5 -> class="item" 인 div태그 5개 생성

<div class="item"></div>

<div class="item"></div>

<div class="item"></div>

<div class="item"></div>

<div class="item"></div>

div.item[title]{상자}*5 -> class="item"이고 title="상자" 인 div 태그 5개 생성

<div class="item" title="">상자</div>

<div class="item" title="">상자</div>

<div class="item" title="">상자</div>

<div class="item" title="">상자</div>

<div class="item" title="">상자</div>

div#box$*10 -> id가 box1...10 까지 증가하면서 생성. -> id는 중복되면 안되기 때문에

<div id="box1"></div>

<div id="box2"></div>

<div id="box3"></div>

<div id="box4"></div>

<div id="box5"></div>

<div id="box6"></div>

<div id="box7"></div>

<div id="box8"></div>

<div id="box9"></div>

<div id="box10"></div>

2. 형제 선택자 태그 생성

div+p -> div태그 다음에 p 태그를 생성한다.

<div></div>

<p></p>

(h1+p+p)*3 -> h1태그, p태그, p태그 순으로 나오고 3번 반복된다.

<h1></h1>

<p></p>

<p></p>

<h1></h1>

<p></p>

<p></p>

<h1></h1>

<p></p>

<p></p>

3. 자식 선택자 태그 생성

ul>li -> ul 태그의 자식으로 li 태그 생성

<ul>

<li></li>

</ul>

ul#list1>li.item*5 -> ul태그의 id는 list1이고 자식으로 class가 item인 5개의 li 태그를 생성!

<ul id="list1">

<li class="item"></li>

<li class="item"></li>

<li class="item"></li>

<li class="item"></li>

  <li class="item"></li>

</ul>

생산성이 확 올라간다!!