sublimeText2 기본 셋팅부터 유용한 정보까지

웹퍼블리셔의  필수품이 되지 않을까 싶다. 

sublimeText2

참고) http://wbond.net/ 

-------------------------------------------------------------
Package Control 설정
-------------------------------------------------------------

1. sublimeText2 메뉴 > View > Show Console 을 엽니다.

2. 다음의 코드를 복사한 후 붙여넣습니다. (참고 : http://wbond.net/sublime_packages/package_control/installation )

import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print 'Please restart Sublime Text to finish installation'


3. 파일을 다운받아서 ( http://sublime.wbond.net/Package%20Control.sublime-package )
   // 익스플로러에서 다운받지 말고 파이어폭스나 다른 브라우저로 다운받아야 합니다 //

서브라임의 메뉴  Preferences > Browse Packages 를 클릭하고
상위폴더 Installed Packages folder 에 붙여넣기 합니다.

4. 서브라임을 재실행 하면
Preferences > Package Control 메뉴가 생성되었습니다.    


-------------------------------------------------------------
ZenCoding 설치
-------------------------------------------------------------

5. Preferences > Package Control 을 실행합니다.

6. 리스트에서 Install Package 를 클릭합니다.


7. Emmet (zen-coding) 을 설치합니다.

8. 메뉴에서 'View > Syntax > HTML'을 체크하고 재실행 합니다.


위처럼 해서 안됄시에 ..아래 처럼 ?? 
-------------------------------------------------------------
참고) Emmet 간편설치 파일
-------------------------------------------------------------
설명
    https://github.com/sergeche/emmet-sublime#how-to-install

다운로드파일
    https://github.com/sergeche/emmet-sublime/archive/master.zip
    다운로드 받은 파일의 압축을 풀어 줍니다.
    '서브라임의 메뉴  Preferences > Browse Packages 를 클릭'하면 나타나는 [Packages]폴더 안으로 옮깁니다.
    (이때, 폴더명은 emmet-sublime-master 이며 안에는 여러 파일과 폴더들이 보여야 합니다.)


-------------------------------------------------------------
ZenCoding ? 
- 코드작성 후 'TAB'키를 누르면 실행
- http://docs.emmet.io/cheat-sheet/
-------------------------------------------------------------
http://code.google.com/p/zen-coding/

아이디,클래스명 적용 : div#page.section.main
-> <div id="page" class="section main"></div>

속성적용 : div[title], a[title="Hello world" rel], td[colspan=2].
-><div title=""></div>

여러개의 요소 한번에 작성 : li*5 will output <li> tag five times.
-> 
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>

클래스명에 번호붙이기 : li.item$*3 will output <li> tag three times, replacing $ character with item number.
-> 
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>

번호를 001부터 만들어 넣기 : li.item$$$ → li.item001
-> <li class="item001"></li>

자식요소는 '>', 인접은 '+', 묶을때는 '()'
: 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>

div태그는 생략 가능 : #content>.section is the same as div#content>div.section.
->
<div id="content">
    <div class="section"></div>
</div>

텍스트는 {} 활용 : p>{Click }+a{here}+{ to continue}. 
-> 
<p>Click 
    <a href="">here</a> to continue
</p>