[추천 플러그인]Zencoding For Eclipse : html, css작성을 쉽게!
이클립 2011. 8. 6. 00:21
html, css를 작성할때 특히 html 태그를 작성할때 기가맥힌 이클립 플러그인이다.
일단 바로 설치를 한 다음에 간단한 사용법을 살펴보자.
Help > Install New Software 에 가서 Work with에 http://zen-coding.ru/eclipse/updates/ 입력한후 Add 버튼을 클릭해서 적당한 이름으로 사이트를 등록한다.
사이트를 등록하면 잠시후에 설치할 플러그인 목록이 조회되는데 체크후 Next 버튼을 클릭해서 플러그인 설치를 완료한다.
설치완료 후 이클립을 리스탓트 하면 끝~
자~ 이제 간단히 기능을 살펴보기 위해서 html 파일이나 jsp 파일이나 뭐 아무파일이나 생성해서 에디터를 열어보자.
뭐 이왕이면 html 이나 jsp 파일을 생성하는게 컬러링이 되니깐 좋을것이다.
참고로 Zencoding 플러그인은 이클립스 상의 왠만한 텍스트에서나 다 쓸 수 있다. java 소스 에디터에서도 된다! 할일은 없지만. 아무튼!!
요렇게 입력하서 Tab 키를 뽓 눌러보면
요렇게 후딱 싹 바뀌는걸 볼수 있다!
뭐 별기능 아니지만 어째보면 보기만 해도 흐뭇한 기능이 아닐수 없다.
코딩할때 카피&붙여넣기 하는 일이 많을까? 이걸 쓸 일이 많을까 하는 생각은 문득 해보긴 해본다.
뭐 또 아무튼 Zencoding 에서 쓸수 있는 문법이랄까? 하여튼 그게 css 문법이랑 거의 똑같다는게 또 큰 장점이 아닐수 없다.
계속해서 몇가지 예를 들어보자.
html:4t
script:src
link:css
ul#nav.tree>li*3>a
ul#nav.tree>li*2>a.navBtn[href=#]
ul#nav.tree>li*2>a#link$.navBtn[href=#]
ul#nav.tree>li*2>a#link$$.navBtn[href=#]
table+ul#nav.tree>li*2
table#summary>(caption)+(thead>tr>th)+(tbody>tr*2>td*2)
우째 쓰는지는 대략 알수 있을 것이다. 더 많은 것을 알고 싶을땐!
[HTML 예제보러 가기]
[CSS 예제보러 가기]
일단 바로 설치를 한 다음에 간단한 사용법을 살펴보자.
Help > Install New Software 에 가서 Work with에 http://zen-coding.ru/eclipse/updates/ 입력한후 Add 버튼을 클릭해서 적당한 이름으로 사이트를 등록한다.
사이트를 등록하면 잠시후에 설치할 플러그인 목록이 조회되는데 체크후 Next 버튼을 클릭해서 플러그인 설치를 완료한다.
설치완료 후 이클립을 리스탓트 하면 끝~
자~ 이제 간단히 기능을 살펴보기 위해서 html 파일이나 jsp 파일이나 뭐 아무파일이나 생성해서 에디터를 열어보자.
뭐 이왕이면 html 이나 jsp 파일을 생성하는게 컬러링이 되니깐 좋을것이다.
참고로 Zencoding 플러그인은 이클립스 상의 왠만한 텍스트에서나 다 쓸 수 있다. java 소스 에디터에서도 된다! 할일은 없지만. 아무튼!!
1 | div#tree>ul>li*3 |
1 2 3 4 5 6 7 | <div id="tree"> <ul> <li></li> <li></li> <li></li> </ul></div> |
코딩할때 카피&붙여넣기 하는 일이 많을까? 이걸 쓸 일이 많을까 하는 생각은 문득 해보긴 해본다.
뭐 또 아무튼 Zencoding 에서 쓸수 있는 문법이랄까? 하여튼 그게 css 문법이랑 거의 똑같다는게 또 큰 장점이 아닐수 없다.
계속해서 몇가지 예를 들어보자.
html:4t
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title></title></head><body> </body></html> |
script:src
1 | <script type="text/javascript" src=""></script> |
link:css
1 | <link rel="stylesheet" type="text/css" href="style.css" media="all" /> |
ul#nav.tree>li*3>a
1 2 3 4 5 | <ul id="nav" class="tree"> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li></ul> |
ul#nav.tree>li*2>a.navBtn[href=#]
1 2 3 4 | <ul id="nav" class="tree"> <li><a href="#" class="navBtn"></a></li> <li><a href="#" class="navBtn"></a></li></ul> |
ul#nav.tree>li*2>a#link$.navBtn[href=#]
1 2 3 4 | <ul id="nav" class="tree"> <li><a href="#" id="link1" class="navBtn"></a></li> <li><a href="#" id="link2" class="navBtn"></a></li></ul> |
ul#nav.tree>li*2>a#link$$.navBtn[href=#]
1 2 3 | <ul id="nav" class="tree"> <li><a href="#" id="link01" class="navBtn"></a></li> <li><a href="#" id="link02" class="navBtn"></a></li> |
table+ul#nav.tree>li*2
1 2 3 4 5 | <table></table><ul id="nav" class="tree"> <li></li> <li></li></ul> |
table#summary>(caption)+(thead>tr>th)+(tbody>tr*2>td*2)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <table id="summary"> <caption></caption> <thead> <tr> <th></th> </tr> </thead> <tbody> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </tbody></table> |
우째 쓰는지는 대략 알수 있을 것이다. 더 많은 것을 알고 싶을땐!
[HTML 예제보러 가기]
[CSS 예제보러 가기]
install : 취임시키다, 장치하다, 임명하다, 자리에 앉히다, 인스톨하다
'이클립' 카테고리의 다른 글
| Zencoding 활용 #1 : 기본적으로 출력되는 lang, locale, charset 변경하기 (0) | 2011.08.08 |
|---|---|
| Eclipse Javascript Code Assist 가 되지 않을때 (1) | 2011.08.08 |
| [추천 플러그인] jqueryWTP : Eclipse jQuery Code Assist Plugin (3) | 2011.08.05 |
| 설치된 Plugin Uninstall (0) | 2011.08.05 |
| 후져진 Eclipse Indido 에디터 폰트를 다시 쪽바로 맨들기 (6) | 2011.07.28 |
