커뮤니티

고용노동부, 산업인력공단과 함께하는 강원도 유일한 기업중심 IT전문교육기관 ICT융합캠퍼스만의 특별한교육입니다.
공인 IT숙련기술인의 다양한 접근방법으로 전문가다운 실무교육을 받을 수 있습니다.

Category

교육강좌

개발도구 개발도구들 - Emmet (Zen Coding)

페이지 정보

작성자 관리자 댓글 0건 조회 5,385회 작성일 20-06-03 11:15

본문

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>

참고

  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기

답변목록

등록된 답변이 없습니다.