네이버 카페 : http://cafe.naver.com/mobilewebapp/1004
이클립스에서 Zen Coding을 타이핑 하고 맥에서 “Command 키 + E”, 윈도우에서 “Alt + E” 라고 하면 자동으로 해당 하는 html, css, xml등 관련하여 자동으로 코딩을 변환 하여 준다.
이제부터는 약간의 젠 코딩에 대한 맛을 개발자분들께서 느낄 수 있도록 직접 테스트를 해 볼 차례이다.
이클립스에서 빈 html 파일을 하나 생성 하자. html 파일을 실행을 하는 것이 아니고 젠 코딩(Zen Coding)으로서 html 소스를 변환 하는 과정이 얼마나 편리한지 또 얼마나 빠르게 코딩이 가능한지 알아 보고자 하는 시간이다.
빈 html 파일을 만들었으면 다음과 같이 코딩을 하고 위에 적어 놓은 단축키를 눌러 보자.
Zen Coding 테스트 1. - html5 관련 기본 문서를 만드는 과정이다.
html:5
변환 결과 코드.
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html> |
Zen Coding 테스트 2.- id 생성.
div#name
변환 결과 코드.
<div id="name"></div> |
Zen Coding 테스트 3. - class 생성
div.name
변환 결과 코드.
<div class="name"></div> |
Zen Coding 테스트 4. - 1개 이상 class 생성
div.one.two
변환 결과 코드.
<div class="one two"></div> |
Zen Coding 테스트 5. - 1개 id와 1개 이상 class 생성
div#name.one.two
변환 결과 코드.
<div id="name" class="one two"></div> |
Zen Coding 테스트 6. - 1개 id와 1개 이상 class 생성
div#name.one.two
변환 결과 코드.
<div id="name" class="one two"></div> |
Zen Coding 테스트 7. - 부모 Element 와 자식 Element
head>link
변환 결과 코드.
<head> <link rel="stylesheet" href="" /> </head> |
Zen Coding 테스트 8. - 부모 Element 와 자식 Element Table 생성
table>tr>td
변환 결과 코드.
<table> <tr> <td></td> </tr> </table> |
Zen Coding 테스트 9. - 부모 Element ID 생성과 자식 Element Class 생성
ul#name>li.item
변환 결과 코드.
<ul id="name"> <li class="item"></li> </ul> |
Zen Coding 테스트 10. - Element 와 Element 를 더해서 생성.
p+p
변환 결과 코드.
<p></p> <p></p> |
Zen Coding 테스트 11. - 1개 ID를 가진 부모 Element 와 2개의 같은 자식 Element인데 다른 Class.
div#name>p.one+p.two
변환 결과 코드.
<div id="name"> <p class="one"></p> <p class="two"></p> </div> |
Zen Coding 테스트 12. - Element Attributes 속성.
div[title]
a[title="Hello world" rel]
td[colspan=2]
변환 결과 코드.
<div title=""></div> <a href="" title="Hello world" rel=""></a> <td colspan="2"></td> |
Zen Coding 테스트 13. - Multi Element 생성.
p*3
변환 결과 코드.
<p></p> <p></p> <p></p> |
select>option#item-$*3
변환 결과 코드.
<select name="" id=""> <option value="" id="item-1"></option> <option value="" id="item-2"></option> <option value="" id="item-3"></option> </select> |
Zen Coding 테스트 14. - Multi Element 생성.
ul#name>li.item*3
변환 결과 코드.
<ul id="name"> <li class="item"></li> <li class="item"></li> <li class="item"></li> </ul> |
Zen Coding 테스트 15. - Multi Element 자동 숫자 증가.
ul#name>li.item$*3
변환 결과 코드.
<ul id="name"> <li class="item1"></li> <li class="item2"></li> <li class="item3"></li> </ul> |
Zen Coding 테스트 16. - Multi Element 자동 숫자 증가.(자릿수 지정).
ul#name>li.item$$$*12
변환 결과 코드.
<ul id="name"> <li class="item001"></li> <li class="item002"></li> <li class="item003"></li> <li class="item004"></li> <li class="item005"></li> <li class="item006"></li> <li class="item007"></li> <li class="item008"></li> <li class="item009"></li> <li class="item010"></li> <li class="item011"></li> <li class="item012"></li> </ul> |
Zen Coding 테스트 17. - 자식이 있는 부모 Element 자동 생성.
ul+
변환 결과 코드.
<ul> <li></li> </ul> |
dl+
변환 결과 코드.
<dl> <dt></dt> <dd></dd> </dl> |
table+
변환 결과 코드.
<table> <tr> <td></td> </tr> </table> |
Zen Coding 테스트 18.
div#page>div.logo+ul#navigation>li*5>a
변환 결과 코드.
<div id="page"> <div class="logo"></div> <ul id="navigation"> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </div> |
Zen Coding 테스트 19.
div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)
변환 결과 코드.
<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 id="page"> <h1><span></span></h1> <p></p> <p></p> </div> </div> |
Zen Coding 테스트 20.
div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer
변환 결과 코드.
<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 id="page"> <h1><span></span></h1> <p></p> <p></p> </div> <div id="footer"></div> </div> |
이상 젠 코딩 관련된 일반적인 사용법에 대하여 테스트까지 완료 하였씁니다.
개발자 여러분께서 사용하는 스타일과 에디터가 많이 다를 수 있지만, 젠 코딩 사이트에 보면 지원 하는 많은 에디터와 서드 파트에서 직접 개발되어 지원 되는 경우가 많으니 각 에디터 개발사 사이트를 방문 하여 직접 확인 하시는 것도 좋을것 같습니다. 국내에서 많이 사용하는 에디터 플러스는 최신 버전을 사용하면 자동으로 내장되어 있어 바로 사용이 가능한 것으로 알고 있다.
또한 http://vimeo.com/7405114 동영상을 보셔도 많은 도움이 될 것입니다.
프로필.
소속: (주)애드웹커뮤니케이션
부서 : 개발팀
직위: 팀장
이름 : 안병도(꼬장)
메일 : yaio@naver.com,
yaioyaio@gmail.com,
program@adweb.co.kr
네이버카페 : http://cafe.naver.com/mobilewebapp
트위터 : @yaioyaio
페이스북 : http://www.facebook.com/byoungdo.ahn
페이스북그룹 : http://www.facebook.com/groups/korea.sencha/
워드프레스: http://yaioyaio.wordpress.com/
티스토리 : http://senchatouch.tistory.com/
'HTML5' 카테고리의 다른 글
| Zen Coding(젠 코딩)을 이클립스에서 사용 하는 방법. – 1 (0) | 2012.06.17 |
|---|
