까딱이의 춤과 IT

이 편집기의 기능중 하나인 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는 3개를 생성하라는 의미이다. 너무나 간단하다.

이것 이외에 클래스 또는 id 등을 다는 방법은 기본적인 셀렉터와 동일하다.

input:button#btn.btnStyle 이와 같이 입력하면 아래와 같은 결과값이 도출된다.

# 은 id 를  .은 클래스를 생성한다.

또한 input:button 은 input:b 로 줄여서 사용이 가능하다.

그렇다면 역으로 아래와 같은 결과를 뽑기 위해서는 어떻게 작성해야하는가~?

정답 =>   table#list.viewList>(thread>tr>th*3)+(tr.row*3>td.cell*3)

단 한줄만으로 저러한 table 태그를 생성할 수 있다.

이것 이외에도 매우 많은 기능들이 제공되고 있으며, 아래 사이트에서 확인이 가능하다.

html Zen-coding 문법 확인

css Zen-coding문법 확인

이상~~