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>
- 텍스트
참고