[HTML] 에밋== 젠코딩

https://ko.wikipedia.org/wiki/%EC%97%90%EB%B0%8B_(%EC%86%8C%ED%94%84%ED%8A%B8%EC%9B%A8%EC%96%B4) 

에밋 (소프트웨어) - 위키백과, 우리 모두의 백과사전

에밋(Emmet)은 HTML, XML, XSL 문서 등을 편집할 때

빠른 코딩을 위해 사용하는 플러그인이다.

 

에딧플러스에서도 가능하다. 

 

html5에서는 ctrl+e 누르면 실행된다.

 

> 는 자식
+ 는 형제자매
^ 부모 (상위요소로 등반)  
() 하위트리 그룹화 
{} 안에 내용 

 

 

div>ul> li 로 예를 들어보면 

div안에 li인 자식태그를 만들겠다는뜻

<div>
<ul>
<li></li>
</ul>
</div>

 

 

div+p+ul>li

형제자매와 자식태그 
<div></div>
<p></p>
<ul>
<li></li>
</ul>

 

 

div+p>bq
<div></div>
<p>
<blockquote></blockquote>
</p>

 

 

div+div>(p+span+em)+bq
<div></div>
<div>
<p></p>
<span></span>
<em></em>
<blockquote></blockquote>
</div>

 

div+div>p>span+em^^bq
div+(div>p>span+em)+bq 

같은것

 

h3>{ex08_02}
<h3>ex08_02</h3>

 

ul>li*5>a
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>

 

div>dl>(dt+dd)*5
<div>
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
</div>

 

속성연산자

태그이름 [속성명=속성값]
태그이름 [속성명='속성값']
태그이름 [속성명="속성값"]

id속성일 경우에는 #아이디명

 

id 속성만들기 

 

div[id='box1']
<div id="box1"></div>

 

div#box1
<div id="box1"></div>

 

#box1
<div id="box1"></div>

앞에 태그명이 없으면 div로 만들어진다. 

 

 

class 속성만들기 

 

p.ss16
<p class="ss16"></p>

p[class='ss16']
<p class="ss16"></p>

 

p[class='ss16 box cls']
<p class="ss16 box cls"></p>

p.ss16.box.cls
<p class="ss16 box cls"></p>

 

 

속성을 여러개 추가 

a[href='http://www.sist.co.kr' class='ss16']
<a href="http://www.sist.co.kr" class="ss16"></a>

a[href='http://www.sist.co.kr' class='ss16']{쌍교센}
<a href="http://www.sist.co.kr" class="ss16">쌍교센</a>

 

 

 

항목 번호 매기기 :$ 

ul>li*5>{홍길동-$}
<ul>
<li>홍길동-1</li>
<li>홍길동-2</li>
<li>홍길동-3</li>
<li>홍길동-4</li>
<li>홍길동-5</li>
</ul>

ul>li[class=item]*5>{홍길동-$}
<ul>
<li class="item">홍길동-1</li>
<li class="item">홍길동-2</li>
<li class="item">홍길동-3</li>
<li class="item">홍길동-4</li>
<li class="item">홍길동-5</li>
</ul>

ul>li.item*5>{홍길동-$}
<ul>
<li class="item">홍길동-1</li>
<li class="item">홍길동-2</li>
<li class="item">홍길동-3</li>
<li class="item">홍길동-4</li>
<li class="item">홍길동-5</li>
</ul>

ul>li.item$*5>{홍길동-$}
<ul>
<li class="item1">홍길동-1</li>
<li class="item2">홍길동-2</li>
<li class="item3">홍길동-3</li>
<li class="item4">홍길동-4</li>
<li class="item5">홍길동-5</li>
</ul>

 

 

@은 번호매기 방향이 오름차순인지 내림차순인지 

ul>li.item$@-*5>{홍길동-$}
<ul>
<li class="item5">홍길동-1</li>
<li class="item4">홍길동-2</li>
<li class="item3">홍길동-3</li>
<li class="item2">홍길동-4</li>
<li class="item1">홍길동-5</li>
</ul>

 

ul>li.item$@+*5>{홍길동-$}
<ul>
<li class="item1">홍길동-1</li>
<li class="item2">홍길동-2</li>
<li class="item3">홍길동-3</li>
<li class="item4">홍길동-4</li>
<li class="item5">홍길동-5</li>
</ul>

 

 

@옆에 번호를 주면 시작값 

ul>li*5>{홍길동 -$@11}
<ul>
<li>홍길동 -11</li>
<li>홍길동 -12</li>
<li>홍길동 -13</li>
<li>홍길동 -14</li>
<li>홍길동 -15</li>
</ul>

 

ul>li*5>{홍길동 -$@-11}
<ul>
<li>홍길동 -15</li>
<li>홍길동 -14</li>
<li>홍길동 -13</li>
<li>홍길동 -12</li>
<li>홍길동 -11</li>
</ul>