이 편집기의 기능중 하나인 Zen-coding 이라는게 있다.
이클립스에서는 플러그인으로 이 기능을 사용할 수 있다.
Zen-coding 은 html 또는 css 를 간단한 문법으로 매우 빠르게 생성할 수 있다.
* 설치
이클립스 의 이클립스마켓을 선택한다.(help > Eclipse Marketplace)
Emmet 을 검색한다.
위 그림에 표시된 플러그인을 설치한다.(그림의 경우는 이미 설치된 상태임)
Window > Preferences 를 실행한다.
위그림과 같이 emmet 을 선택후 extensions 부분에 jsp 를 추가한다.(이 부분을 안할 경우 jsp 에서는 동작하지 않는다)
여기까지 했다면 설정은 완료되었다.
이제 간단한 사용법을 살펴보자.
사용법은 css 또는 jquery 의 셀렉터를 생각하면된다.
table>tr>td*3 이와 같이 타이핑후 탭(tab)키를 누르면 아래와 같은 경과가 나온다.
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
table 태그 아래 tr 태그 아래 td 태그를 생성하고 td는 3개를 생성하라는 의미이다. 너무나 간단하다.
태그 |
내용 |
> |
하위에 태그를 생성한다. |
+ |
동등한 위치에 태그를 생성한다. |
* 횟수 |
생성할 갯수를 정한다. |
이것 이외에 클래스 또는 id 등을 다는 방법은 기본적인 셀렉터와 동일하다.
input:button#btn.btnStyle 이와 같이 입력하면 아래와 같은 결과값이 도출된다.
<input type="button" value="" id="btn" class="btnStyle" />
# 은 id 를 .은 클래스를 생성한다.
또한 input:button 은 input:b 로 줄여서 사용이 가능하다.
그렇다면 역으로 아래와 같은 결과를 뽑기 위해서는 어떻게 작성해야하는가~?
<table id="list" class="viewList">
<thread>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thread>
<tr class="row">
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
</tr>
<tr class="row">
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
</tr>
<tr class="row">
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
</tr>
</table>
정답 => table#list.viewList>(thread>tr>th*3)+(tr.row*3>td.cell*3)
단 한줄만으로 저러한 table 태그를 생성할 수 있다.
이것 이외에도 매우 많은 기능들이 제공되고 있으며, 아래 사이트에서 확인이 가능하다.
이상~~