제주도 워크샵에서~~!

제주도 워크샵에서~~! SHAGANO01 2010. 6. 7. 19:40


사진을 보면서 느끼지만.. 어딜가나 현지인같고.. 턱선도 없어져버리고.. 하아... 무언가가 필요한대 말이야..

'SHAGANO01' 카테고리의 다른 글

대명 비발디 파크 2010-12-15  (0) 2011.01.03
동영상  (0) 2010.02.21
샤가의 20대 후반 이야기  (3) 2010.02.21
World Of Warcraft AKOH  (0) 2010.02.21
휠맨 동호회  (0) 2010.02.21
Posted by 샤가No01

Eclipse IDE 에서 Zen-Coding 소개

Eclipse IDE 에서 Zen-Coding 소개 ===J.O.B===/HTML 2010. 5. 31. 12:47


FT개발을 하면서 일일이 HTML을 열고 닫고 하기는 여간 귀찮은일이 아니죠. 지금 소개시켜드릴 Zen-Coding은 CSS셀렉터 문법으로 작성된 문장을 HTML코드로 확장시켜주는 일종의 매크로입니다.
예제는 다음과 같습니다.

div#page>div.logo+ul#navigation>li*5>a


이렇게 입력후 Scripts 메뉴에서 Zen Coding>Expand Abbreviation을 클릭해주면 아래와 같이 펼쳐집니다.


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


지원하는 에디터는 다음과 같습니다:

  • Aptana/Eclipse (cross plat form)
  • Text Mate (Mac)
  • Coda (Mac)
  • Espresso (Mac)
  • Komodo Edit/IDE (crossplatform)
  • Notepad++ (Win dows)
  • PSPad (Win dows)
  • textarea (browser-based)
  • editArea (browser-based)


Eclipse 에서 설치하는 것을 예로 들자면:

Eclipse 최상단 메뉴에서 ‘Scripts’ 메뉴가 없으면 http://download.eclipse.org/technology/dash/update 를 통해 EclipseMonkey를 다운받습니다.
Zen.Coding-Aptana.v0.6.0.1.zip를 다운받아 압축 해제합니다.
Aptana에서 프로젝트 이름을 ‘zencoding’ 으로 하여 General Project를 만듭니다.
프로젝트에 ‘scripts‘ 라는 이름의 빈폴더를 만듭니다. (주의: 반드시 scripts 라는 이름이어야합니다!)
압축해제한 파일을 모두 scripts 아래로 복사합니다
Eclipse Reboot ing~!
부팅후, ‘Scripts’ 메뉴아래에 ‘Zen Coding’이 나오면 제대로 설치된 것입니다
임의의 프로젝트에서 .html 파일을 열거나 만들어서 예제를 실행해봅니다.
* 키변경은 scripts 아래로 복사한 Zen-Coding library의 소스에서 Key: 항목에 직접 지정합니다.


출처 : http://ajaxian.kr/archives/938





에디트플러스에서 하는방법

명령 : WScript.exe "D:\zencoding\zencoding.wsf"
인수 : $(CurLine)||$(CurSel)
디렉토리 : $(FileDir)
텍스트필터로실행 체크 후 "바꾸기" 선택

참고사이트 : http://www.emacswiki.org/emacs/ZenCoding

'===J.O.B=== > HTML' 카테고리의 다른 글

Local Storage  (0) 2012.03.22
HTML5 강좌 관련 사이트  (0) 2010.05.20
HTML5 데모와 예제 목록을 공유  (0) 2010.05.17
Posted by 샤가No01

CSS3 Click Chart by Impressive Webs

CSS3 Click Chart by Impressive Webs ===J.O.B===/CSS 2010. 5. 28. 15:00


css3에 대한 다양한 예제를 볼 수 있는곳이다.

해당 사이트는 Chrome 4+, Safari 4+, or Firefox 3.6+ 이상에서 제대로 볼수 있다.

http://www.impressivewebs.com/css3-click-chart/

'===J.O.B=== > CSS' 카테고리의 다른 글

CSS3의 기본적인 사용방법  (0) 2010.03.11
Posted by 샤가No01
1 ··· 4 5 6 7 8 9 10 ··· 25 
하단 사이드바 열기

BLOG main image