젠코딩 사용법
페이지 정보
작성자 서방님 댓글 0건 조회 131회 작성일 12-08-09 10:46본문
ZenCoding에 대한 자세한 사용법 및 문서와 각종 에디터 프로그램에서 사용이 가능 하도록 제공 하는 사이트는 다음과 같다.
Zen Coding 공식 사이트 : http://code.google.com/p/zen-coding/
물론 일부 서드 파트의 에디터들은 직접 제공 하는 경우도 있으나, 대부분 플러그인 방식으로 젠 코딩에 대한 것을 많이 제공 하고 있으며, 젠 코딩도 프로그램 개발에 있어 많은 이슈의 하나로 떠 오르고 있는 것도 사실이다.
위의 사이트에 방문 하셔서 여러분들께서 사용 하는 에디터에 맞는 것을 다운 받아 사용하시면 되며, 더 자세한 내용은 각 에디터 개발사의 사이트나 구글링을 하면 많은 정보들이 나와 있다.
대표적으로 많이들 사용하는 에디터 이클립스에 대한 것만 다룰 것이다.
그 이전에 젠 코딩의 문법에 대한 것을 먼저 알아 보고자 한다.
기본적인 문법을 설명 해 보도록 하자.
1. ID or Class 속성에 대한 사용법.
- Element에 id 붙이는 방법은 div#name 이라고 하면 된다.
- Element에 class를 붙이는 방법은 div.name 이라고 하면 된다.
- Element에 id와 class를 같이 사용하는 방법은 div#name.name 이라고 하면 된다.
- Element에 class를 1개 이상 사용하는 방법은 div.name01.name02 라고 하면 돠다.
2. Element에 사용자 속성을 지정 하는 방법은 [ ]를 사용하면 된다.
- div[title]
- a[title="Hello world" rel]
- td[colspan=2]
3. 여러 개의 Element를 반복 지정 하는 방법은 * 기호를 사용하면 된다.
- <li> 태크를 5개 반복 생성 할때는 li*5 하고 하면 된다.
4. Element에 대한 자동 증가 넘버를 매기는 방법은 $ 기호를 사용하면 된다.
- li.item$*3
5. Element에 대한 자동 증가 넘버를 매기는 방법 중 자리수를 지정 하는 방법은 $ 기호를 갯수 만큼 사용하면 된다.
- li.item$$$*15
6. 여러 개의 Element를 동시에 생성 하는 방법은 + 기호를 사용하면 된다. 또한 + 기호를 html 태그와 붙여서 사용하면 자식으로 속하는 Element까지 자동으로 생성해 준다.
- div#haeder+div#contents+div#footer
- table+
7. 부모 Element에 자식 Element를 생성 하고자 할 때는 > 기호를 사용하면 된다.
- div#header>ul>li
8. 하나로 묶어 주는 그룹 기능은(무한 중첩 포함) ( ) 기호로 묶어서 사용하면 된다.
- div#page>(div#header>ul#nav>li*4>a)
9. 젠 코딩을 사용하여 # 또는 . 을 지정하고 html element를 사용 하지 않으면 기본적으로 div 태그를 생성한다.
- #header.wrap
다음 표는 위의 내용을 간단하게 정리한 표이다.
| 기호 | 설명 | 사용법 | 결과 |
| . | 클래스 생성 | div.classname | <div class=”classname”></div> |
| # | ID 생성 | div#idname | <div id=”idname”></div> |
| [ ] | 사용자 속성 생성 | div[title] | <div title=””></div> |
| * | 반복 생성 | li*5 | <li></li>
<li></li> <li></li> <li></li> <li></li> |
| $ | 요소를 자동 생성 시,
숫자 증가 값 표시. |
li#item$*5 | <li id=”item1″></li>
<li id=”item2″></li> <li id=”item3″></li> <li id=”item4″></li> <li id=”item5″></li> |
| $ | li#item$$$*5 | <li></li>
<li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> | |
| + | 멀티 생성 | div#haeder+div#contents+div#footer | <div id=”haeder”></div>
<div id=”contents”></div> <div id=”footer”></div> |
| + | 자식을 포함 하는 태그 있을 경우 자동 생성 | table+ | <table>
<tr> <td></td> </tr> </table> |
| + | dl+ | <dl>
<dt></dt> <dd></dd> </dl> | |
| > | 자식 생성 | div#header>ul>li | <div id=”header”>
<ul> <li></li> </ul> </div> |
| ( ) | 그룹(무한 중첩) | div#page>(div#header>ul#nav>li*4>a) | <div id=”page”>
<div id=”header”> <ul id=”nav”> <li><a href="”"></a></li> <li><a href="”"></a></li> <li><a href="”"></a></li> <li><a href="”"></a></li> </ul> </div> </div> |
| 기타 | Element를 지정 하지 않는 경우는 div를 생성한다. | #header.wrap | <div id=”header”></div> |
위의 내용 보다 더 많은 사용법이 있습니다.
다음 주소를 찾아 방문 하시면 Zen Coding cheat sheet 에 대한 2 가지 문서가 있습니다. 다운 받아서 보시고 사용에 대한 테스트를 직접 많이 다루어 보시기를 바랍니다.
댓글목록
등록된 댓글이 없습니다.
