개발도구

Emmet (Zen Coding)

zen coding

  • 젠코딩은 HTML 코딩의 생산성을 향상시켜주는 도구
  • eclipse, vim, dreamweaver, editplus와 같은 에디터에 플러그인으로 설치
  • 젠코딩 홈페이지

문법

  • ID, CLASS 속성
    • div#page.section.main
    • <div id="page" class="section main"></div>
  • 커스텀 속성
    • a[title="hello world"]
    • <a title="hello world"></a>
  • 엘리먼트 복제
    • li*3
    • <li></li><li></li><li></li>
  • 넘버링 - $ 위치에 값이 1부터 1씩 증가 (1,2,3,4...)
    • li.item$*3
    • <li class="item1"></li><li class="item2"></li><li class="item3"></li>
       
    • li.item$$$*2
    • <li class="item001"></li><li class="item002"></li>
  • 그룹핑
    • div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer
  • ID, CLASS 앞에 태그명을 생략하면 DIV로 간주
    • #content>.section
    • <div id="content"><div class="section"></div></div>
  • 텍스트
    • p>{click}
    • <p>click</p>

참고

댓글

댓글 본문
  1. 참빛바다
    editplus에서 젠코딩 사용하기 가 원본이 사라졌네요
  2. 영어는쉽다
    전문적으로 일하시는 분들 젠코딩 배우면 일이 엄청 줄겠네요.
  3. 허밍.
    젠코딩 대박 ... 헐
  4. 코난도일
    참고에 있는 링크들이 모두 깨졌습니다.
  5. 콤퇘지
    젠코딩을 하면 코딩이 즐거울거 같아요. 감사합니다.
  6. Yonghun Lee
    헙~ㅜㅜ 이런 편리한게 있었다니 놀랍네요^^ 어메~~이징! (나마 몰랐던거?ㅡㅡ)
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기