Emmet 젠코딩 Zen Coding 문법

 

html 구조를 하나하나입력하는것도 나쁘지 않지만

좀더 빠른 입력을 하도록 도와주는 emmet이라는게 있는데 이번에 브라켓을 사용하면서

유용하게 잘 쓰게 되어 젠코딩 문법 포스팅을 올리는데 선택자만 잘 알고 있으면 생각보다 별게 없다.

우선 브라켓에서 젠코딩을 하려면 Emmet이라는 확장 프로그램을 설치해야합니다..

 

태그 여러개 만들기

태그명*숫자 입력하고 tab키 누르면 아래처럼 div요소가 3개가 만들어 집니다.

div*3 <!--tab 키-->

<div></div>
<div></div>
<div></div>

 

id, class명 입력해서 만들기

id를 입력하려면 div#content 

class를 입력하려면 div.content 를 입력하면됩니다.

(속성에 맞는 선택자 입력하고 *숫자를 입력하면 동일한 class명이 개수만큼 생성 됩니다.)

div.content*3 <!--tab 키-->

<div class="content"></div>
<div class="content"></div>
<div class="content"></div>

 

class명의 숫자값 증가

li.list$*3 입력했을 때 $부분의 숫자가 증가하며 class명이 생성됩니다.

li.list$*3 <!--tab 키-->

<li class="list1"></li>
<li class="list2"></li>
<li class="list3"></li>

 

id, class명 여러개 입력하기

하나의 요소에 id, class를 여러개 입력하고 싶을때 선택자를 입력,나열하면 됩니다.

div#container.wrap.section_wrap <!--tab 키-->

<div id="container" class="wrap section_wrap"></div>

 

요소에 내용입력해서 만들기

사용할 태그(요소 div, h1, p, span 등등..)를 앞에 쓰고 대괄호안에 내용 입력후 탭키를 누릅니다.

 

h1{인기도서목록} <!--tab 키-->

<h1>인기도서목록</h1>

 

자식요소 만들기

ul밑에있는 자식요소인 li 3개를 class명이 증가하는 값으로 생성합니다. 

ul>li[class="list$"]{인기도서 list$}*3 <!--tab키-->

<ul>
  <li class="list1">인기도서 list1</li>
  <li class="list2">인기도서 list2</li>
  <li class="list3">인기도서 list3</li>
</ul>

 

젠코딩 연습!

div#container>(div#header>ul.gnb>li#5>a)+(div.visual>(h2>p)+p*2)>div#footer
<!--tab 키-->

<div id="container">
  <div id="header">
    <ul class="gnb">
    	<li id="5"><a href=""></a></li>
    </ul>
  </div>
  <div class="visual">
    <h2>
    	<p></p>
    </h2>
    <p></p>
    <p></p>
  </div>
  <div id="footer"></div>
</div>