Emmet

1. HTML 양식 작성

MS Visual Studio Code 에서 ! 만 누르면 아래에 자동으로 Emmet ~ 이 나옴. 이렇게 해서 HTML 코드를 빠르게 생성!

 

2. 태그 작성

div 누르고 tab 키 누르면 자동으로 태그가 생성됨

클래스는 . 아이디는 # 을 이용하면 자동으로 생성됨!

 

3. 부모, 자식, 형제 노드

div>ul>li 입력 후 tab 키

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

div>ul+ol 입력 후 tab 키(형제노드)

<div>
  <ul></ul>
  <ol></ol>
</div>

상위에 추가하고 싶을 경우:

div>ul>li^ol: ol 태그를 ul 태그와 같이 입력하고 싶을때 ^ 이용.

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

 

4. 그룹화 하기

div>(header>ul>li2>a)+footer>p* 입력 후 tab 키

<div>
  <header>
    <ul>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
    </ul>
  </header>
  <footer>
    <p></p>
  </footer>
</div>

 

5. 텍스트 입력하기

p{hello} 입력시

<p>hello</p>

 

6. 자동 번호 넣기

p.class${item $}*5

<p class="class1">item 1</p>
<p class="class2">item 2</p>
<p class="class3">item 3</p>
<p class="class4">item 4</p>
<p class="class5">item 5</p>

 

7. 더미용 텍스트 생성

p>lorem

4개의 단어만 입력하고 싶을 경우: p>lorem4