[days03] emmit 사용법

emmit: html 등을 빠르게 코딩하도록 도와준다. 

 

- div라고 치고 Ctrl+E

<div></div>

- 자식이 있으면 > 표시

 

div>ul>li  

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

- ul이 3개라면 ul*3

div>ul>li*3   

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

- 안에 임의의 데이터를 넣고싶다 

div>lorem 

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.  
Error mollitia nobis molestiae quasi eos perspiciatis alias  
velit necessitatibus nam iure non explicabo veritatis?  
Nisi debitis dignissimos aliquid rem fugit delectus.</div>

- 안에 임의의 데이터를 [5단어]씩 넣고싶다 

ul>li*5>lorem5 

<ul>
	<li>Lorem ipsum dolor sit amet.</li>
	<li>Sapiente voluptas enim eum deserunt.</li>
	<li>Nihil adipisci natus ab quidem?</li>
	<li>Veniam explicabo rem labore neque.</li>
	<li>Ipsum deleniti perferendis quam iste!</li>
</ul>

- 고정된 문자열을 넣을 때 

ol>li*5>{ 문자열 }   {공백필요시 앞뒤로 공백}

 ol>li*5>{ item } 
<ol>
	<li> item </li>
	<li> item </li>
	<li> item </li>
	<li> item </li>
	<li> item </li>
</ol>

- 순번을 매길 때

ol>li*5>{ 문자열-$ } 

 ** ul>li*5>{문자열$$$}  하면 001 002 (자리수)

    ul>li*5>{문자열$@-}  히면 역순으로 5 4 3 2 1 

    ul>li*5>{item$@숫자} 하면 그 숫자부터 넘버링

<!--순번 : ol>li*5>{ item-$ }  -->
<ol>
	<li> item-1 </li>
	<li> item-2 </li>
	<li> item-3 </li>
	<li> item-4 </li>
	<li> item-5 </li>
</ol>

- 형제(sibling)는 + 표시

 div+p+bq 

	<div></div>
	<p></p>
	<blockquote></blockquote>

- #아이디명 
 div#box 

 ** #demo 하면 자동으로 demo라는 이름의 div를 만듦
<div id="demo"></div>

<div id="box"></div>

<div id="demo"></div>

- () 그룹 groups

 (header>p>{TOP})+(div>dl>(dt+dd)*3)+footer>p>{BOTTOM} 

<header>
	<p>TOP</p>
</header>
<div>
	<dl>
		<dt></dt>
		<dd></dd>
		<dt></dt>
		<dd></dd>
		<dt></dt>
		<dd></dd>
	</dl>
</div>
<footer>
	<p>BOTTOM</p>
</footer>

- [] 속성 설정 방법

 td[title="hello world" colspan="5"] 

<td title="hello world" colspan="5"></td>

 

 

---

테스트  1
<div></div>
<div>
<p><span><em></em></span></p>
<blockquote></blockquote>
</div>

div+div>(p>span>em)+bq 		1번
div+div>p>span>em^^bq		2번

^ one level up the tree, 한 단계 올린다는 의미 (bq가 span의 형제가 됨)

 

 

테스트 2

<!-- {} 텍스트  -->
<!-- a -->
<a href=""></a>
<!-- a>{naver} -->
<a href="">naver</a>
<!-- a>{click me} -->
<a href="">click me</a>
<!-- 위의 me를 스판태그로 주고싶다 --> <!-- span태그 : 문자의 일부분을 묶어줌  -->
<!-- a>{click}+span>{me} -->
<a href="">click<span>me</span></a>
<!-- a>{naver}+span{me} 처럼 꺽새를 빠뜨려도 됨-->
<a href="">naver<span>me</span></a>

<!-- a>{click}+span{me}+{ continue} -->
<a href="">click<span>me</span> continue</a>