HTML 마크업 빨리 하기

Emmet(vscode 내 빌트인) 문법

• HTML 양식작성 : ! 탭키

• div.divClass, div#divId =>

<div class="divClass"></div>
<div id="divId"></div>

div는 자주 사용하므로 .divClass, .divId => 로 사용 가능

• 부모, 형식, 자식 노드 작성 =>

<!-- > -->
div>ul>li 탭키
<div>
	<ul>
    	<li></li>
    </ul>
</div>
<!-- + -->
div>ul+ol 탭키 
<div>
	<ul></ul>
    <ol></ol>
</div>
<!-- * -->
ul>li*5 탭키 
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

• 그룹화 =>

div>(header>ul>li*2>a)+footer>p 탭키
<div>
  <header>
    <ul>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
    </ul>
  </header>
  <footer>
    <p></p>
  </footer>
</div>

• 태그안에 텍스트, 숫자 =>

p{hello} 탭키
<p>hello</p>

p.pClass${item $}*5
<p class="pClass1">item 1</p>
<p class="pClass2">item 2</p>
<p class="pClass3">item 3</p>
<p class="pClass4">item 4</p>
<p class="pClass5">item 5</p>

• 태그안에 더미 테스트 사용 =>

p>lorem
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Id minima explicabo amet aliquid et vero odio fugiat possimus vitae cumque qui unde, eveniet tempora culpa, repudiandae odit alias. Corporis, culpa.</p>
단어 조절 가능 

p>lorem3
<p>Lorem, ipsum dolor.</p> 3개 단어만 표시