HTML52012. 6. 17. 21:45

Zen Coding(젠 코딩)을 이클립스에서 사용 하는 방법. – 2

네이버 카페 : 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
Posted by yaioyaio
HTML52012. 6. 17. 21:43

Zen Coding(젠 코딩)을 이클립스에서 사용 하는 방법. – 1

Zen Coding(젠 코딩)을 이클립스에서 사용 하는 방법.

네이버 카페 : http://cafe.naver.com/mobilewebapp/1003


ZenCoding 은 html과 CSS를 코딩 하는 과정에서의 불편함을 해소 하고 빠른 코딩을 하고자 출발이 된 것으로 알고 있다.

본인도 어느 컨퍼런스를 갔다 우연히 듣고 몇 번 사용만 하다가 Node.js 및 Jade와 같은 것을 사용 하고자 다시 한번 정리 하는 차원에서 문서를 만들게 되었다.

 

 어디에 쓸모가 있을까 싶지만 CSS와 HTML을 쉽게 다루고자 하는 개발자라면 조금 배워둘 필요도 있다고 판단이 되어 아직 모르고 있거나 알면서 사용이 처음 접하시는 분들을 위해 정보를 공유 하고자 작성하게 된 이유도 있다.

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

<li class="item013"></li>

<li class="item014"></li>

<li class="item015"></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" class="wrap"></div>

위의 내용 보다 더 많은 사용법이 있습니다.

다음 주소를 찾아 방문 하시면 Zen Coding cheat sheet 에 대한 2 가지 문서가 있습니다. 다운 받아서 보시고 사용에 대한 테스트를 직접 많이 다루어 보시기를 바랍니다.

http://code.google.com/p/zen-coding/downloads/list

우선 이클립스에서 사용하는 방법을 알아 보도록 합시다.

이클립스에서 Zen Coding 플러그인 설치는 다음 주소를 보셔도 좋습니다.

https://github.com/sergeche/eclipse-zencoding#installation

1. 이클립스를 실행 한다.

2. 이클립스에서 플러그인을 설치 하는 다른 것들과 방법은 똑 같다.
   그림과 같이 설치 할 수 있는 곳으로 이동을 해 보자.

   

    

플러그인 있는 주소는 http://zen-coding.ru/eclipse/updates/ or http://media.chikuyonok.ru/eclipse/updates 이다.

위와 같이 설치를 완료 하면 이클립스를 재 실행 한다.

그 다음 환경설정.(Preferences)으로 가서 다음과 같이 선택을 하고 저장한다.

이제 젠 코딩을 사용 하기 위한 이클립스의 모든 설치 및 설정은 끝이 났다.


다음 시간에는 젠 코딩(Zen Coding) 사용 하는 방법을 알아 보기로 합시다.




'HTML5' 카테고리의 다른 글

Zen Coding(젠 코딩)을 이클립스에서 사용 하는 방법. – 2  (0) 2012.06.17
Posted by yaioyaio

티스토리툴바