[Emmet] - 젠 코딩

 

젠코딩(Znd Coding) 이란?

• CSS Selector 방식으로 빠른 코딩과 다른 구조의 코드 유형을 편집하기 쉽게 해 주기 위한 플러그인의 집합
• "HTML과 CSS 코드를 빠르게 작성할 수 있도록 도와주는 오픈소스 도구

 

 

---

 

 

 

젠코딩 활용해보기

 

 

1. [ ID ]와 [ 클래스 ]와 [ 콘테츠 ] 입력해서 생성하기

• ID는 # 뒤에
• 클래스는 .(점)뒤에
• 콘텐츠는 { } 안에

 

 

ctrl + space - 왼쪽아래 자동 완성된 태그 확인 후  - enter

 

 

div#active-test.area{ active테스트 }

 

 

 

---

 

 

 

2. 여러개 생성할때 숫자 하나씩 증가 [ $ ] 해서 생성하기

• id, class, contents 영역 다 사용 가능

 

 

 

 

---

 

 

3. 엘리먼트 복제 [ *  ]활용해보기

 

 

 

 

 

---

 

 

 

젠코딩 문법 check

 

 

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

 

 

 

 

 

---