[웹개발] 웹개발 이클립스 플러그인, 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>
생산성이 확 올라간다!!