'zencoding'에 해당되는 글 3건

  1. 2011.08.08 Zencoding 활용 #2 : 문자열 목록을 HTML 태그로 감싸보자!
  2. 2011.08.08 Zencoding 활용 #1 : 기본적으로 출력되는 lang, locale, charset 변경하기
  3. 2011.08.06 [추천 플러그인]Zencoding For Eclipse : html, css작성을 쉽게! 3

Zencoding 활용 #2 : 문자열 목록을 HTML 태그로 감싸보자!

이클립 2011. 8. 8. 23:52

뭐 하는 기능인지는 직접해보면 알 수 있다.

먼저 에디터에서 작업하고자 하는 문자열 목록을 아래 예처럼 쪽 입력한다.

 jQuery Core
Selectors
Attributes
Traversing
Manipulation
Css
Events
Effects
Ajax
Utilities
jQuery UI

입력한 문자열을 블럭으로 잡은후 Zen coding > HTML > Wrap With Abbreviation 을 클릭해서 팝업창이 뜨면 입력란에 ul>li* 입력해 보자.

 

 
음 그렇다! 블럭잡힌 문자열 리스트를 원하는 html 로 감싸주는 기능이다. 입력란에 원하는 형식을 입력하면 아래쪽에 바로바로 어떻게 바뀔지 보여주기 때문에 편리하다.


응용편(입력란에 다음과 같은 문자열을 입력해 보세염)

ul#leftMenu>li.menu* id와 class로 의미부여 
<ul id="leftMenu">
	<li class="menu">jQuery Core</li>
	<li class="menu">Selectors</li>
	<li class="menu">Attributes</li>
	<li class="menu">Traversing</li>
	<li class="menu">Manipulation</li>
	<li class="menu">Css</li>
	<li class="menu">Events</li>
	<li class="menu">Effects</li>
	<li class="menu">Ajax</li>
	<li class="menu">Utilities</li>
	<li class="menu">jQuery UI</li>
</ul>

ul#leftMenu>li.menu*>a[href=http://] 링크추가 
<ul id="leftMenu">
	<li class="menu"><a href="http://">jQuery Core</a></li>
	<li class="menu"><a href="http://">Selectors</a></li>
	<li class="menu"><a href="http://">Attributes</a></li>
	<li class="menu"><a href="http://">Traversing</a></li>
	<li class="menu"><a href="http://">Manipulation</a></li>
	<li class="menu"><a href="http://">Css</a></li>
	<li class="menu"><a href="http://">Events</a></li>
	<li class="menu"><a href="http://">Effects</a></li>
	<li class="menu"><a href="http://">Ajax</a></li>
	<li class="menu"><a href="http://">Utilities</a></li>
	<li class="menu"><a href="http://">jQuery UI</a></li>
</ul>

ul#leftMenu>li#menu$*>a 각 메뉴버튼마다 다른 아이디 부여 
<ul id="leftMenu">
	<li id="menu1"><a href="">jQuery Core</a></li>
	<li id="menu2"><a href="">Selectors</a></li>
	<li id="menu3"><a href="">Attributes</a></li>
	<li id="menu4"><a href="">Traversing</a></li>
	<li id="menu5"><a href="">Manipulation</a></li>
	<li id="menu6"><a href="">Css</a></li>
	<li id="menu7"><a href="">Events</a></li>
	<li id="menu8"><a href="">Effects</a></li>
	<li id="menu9"><a href="">Ajax</a></li>
	<li id="menu10"><a href="">Utilities</a></li>
	<li id="menu11"><a href="">jQuery UI</a></li>
</ul>
뭐 대충 요런 응용을 많이 할 수 있지 않을까??
저작자표시 비영리 변경금지

'이클립' 카테고리의 다른 글

Maven & Jetty Plugin - PWC6345: There is an error in invoking javac. A full JDK (not just JRE) is required 에러가 날때.  (4) 2011.08.16
Eclipse Indigo Maven Plugin 설치 & 웹프로젝트 생성  (3) 2011.08.12
Zencoding 활용 #1 : 기본적으로 출력되는 lang, locale, charset 변경하기  (0) 2011.08.08
Eclipse Javascript Code Assist 가 되지 않을때  (1) 2011.08.08
[추천 플러그인]Zencoding For Eclipse : html, css작성을 쉽게!  (3) 2011.08.06
Posted by 스토브

Zencoding 활용 #1 : 기본적으로 출력되는 lang, locale, charset 변경하기

이클립 2011. 8. 8. 18:55
 Zencoding 에서 기본적으로 설정되 있는 변수로

lang : ko
locale : en-US
charset : UTF-8 

등등등이 있다.

그래서 html:4t 를 입력하고 tab 키를 누르면 설정된 변수값에 의해
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title></title>
</head>
<body>
	
</body>
</html>
으로 변환된다.
 

뭐 굳이 상관은 없지만 일일이 en을 ko 로 바꾸기 귀찮고 뭐 혹시 프로젝트에서 쓰는 charset 이 UTF-8이 아니라 EUC-KR 일수도 있으니까...

디폴트로 출력되는 lang, locale, charset 값을 바꿔 보았다.

※ 먼저 작업하기 전에 이클립을 끈 다음에 해야 된다.

변경할 파일은 [이클립설치디렉토리]\plugins\ru.zencoding.eclipse_xxxxxxxxxxxx.jar 파일이다. xxxxxxxx 이부분은 설치된 zencoding 버전에 따라 다르다.

jar 파일을 압축프로그램으로 열어보면 여러개 파일이 있을 건데 그 중에서 /ru/zencoding/zencoding.js 파일을 살짝 변경해 주면 된다.

jar 파일에 있는 zencoding.js 편집



jar 파일에서 zencoding.js 파일만 빼내서 텍스트에디터로 열어보면 위에서 말했던 변수들이 보인다.

zencoding.js 변경전

 

저부분을 원하는 값으로 바꾸고 저장후 jar 파일에 변경된 zencoding.js 파일을  덮어쓰고 다시 이클립을 실행시키면 끝~

zencoding.js 변경후

 

html:4t 로 변경이 잘됬나 확인해 보자. 
<html lang="ko">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title></title>
</head>
<body>
	
</body>
</html>
기대했던 대로 잘 나옴~
저작자표시 비영리 변경금지

'이클립' 카테고리의 다른 글

Eclipse Indigo Maven Plugin 설치 & 웹프로젝트 생성  (3) 2011.08.12
Zencoding 활용 #2 : 문자열 목록을 HTML 태그로 감싸보자!  (0) 2011.08.08
Eclipse Javascript Code Assist 가 되지 않을때  (1) 2011.08.08
[추천 플러그인]Zencoding For Eclipse : html, css작성을 쉽게!  (3) 2011.08.06
[추천 플러그인] jqueryWTP : Eclipse jQuery Code Assist Plugin  (3) 2011.08.05
Posted by 스토브

[추천 플러그인]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 버튼을 클릭해서 플러그인 설치를 완료한다.

설치할 항목 선택(zencoding)


 설치완료 후 이클립을 리스탓트 하면 끝~


자~ 이제 간단히 기능을 살펴보기 위해서 html 파일이나 jsp 파일이나 뭐 아무파일이나 생성해서 에디터를 열어보자.

뭐 이왕이면 html 이나 jsp 파일을 생성하는게 컬러링이 되니깐 좋을것이다.

참고로 Zencoding 플러그인은 이클립스 상의 왠만한 텍스트에서나 다 쓸 수 있다. java 소스 에디터에서도 된다! 할일은 없지만. 아무튼!!

div#tree>ul>li*3
요렇게 입력하서 Tab 키를 뽓 눌러보면
<div id="tree">
	<ul>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>
요렇게 후딱 싹 바뀌는걸 볼수 있다! 뭐 별기능 아니지만 어째보면 보기만 해도 흐뭇한 기능이 아닐수 없다.
코딩할때 카피&붙여넣기 하는 일이 많을까? 이걸 쓸 일이 많을까 하는 생각은 문득 해보긴 해본다.

뭐 또 아무튼 Zencoding 에서 쓸수 있는 문법이랄까? 하여튼 그게 css 문법이랑 거의 똑같다는게 또 큰 장점이 아닐수 없다.





계속해서 몇가지 예를 들어보자.



html:4t 
<!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 
<script type="text/javascript" src=""></script>

link:css 
<link rel="stylesheet" type="text/css" href="style.css" media="all" />

ul#nav.tree>li*3>a 
<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=#] 
<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=#] 
<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=#] 
<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 
<table></table>
<ul id="nav" class="tree">
	<li></li>
	<li></li>
</ul>

table#summary>(caption)+(thead>tr>th)+(tbody>tr*2>td*2) 
<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
Posted by 스토브
prev 1 next
openclose

티스토리툴바