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

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

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

 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로 의미부여

1 2 3 4 5 6 7 8 9 10 11 12 13

<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://] 링크추가

1 2 3 4 5 6 7 8 9 10 11 12 13

<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 각 메뉴버튼마다 다른 아이디 부여

1 2 3 4 5 6 7 8 9 10 11 12 13

<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>

뭐 대충 요런 응용을 많이 할 수 있지 않을까??