비주얼스튜디오에서 'Emmet' 사용으로 코딩을 쉽고 재밌게

Emmet 사용으로 코딩을 쉽고 재밌게

 

Emmet이란?

HTML과 CSS 문서를 빠르게 작성할 수 있게 도와주는 편집기의 확장기능이다.
몇 자를 적고 TAB 또는 ENTER키를 누르면 자동적으로 나머지 코드를 생성시켜 주는 기능이다.

 

비주얼스튜디오에서 html을 작성할 때 Emmet을 사용하면 코딩을 쉽고 재밌게 할 수 있다. 

 

css 식별자를 입력하면... 바로 코드를 생성시켜 준다. 

예를 들어, 비주얼스튜디오에서 'div'만 입력하면... 자동으로  아래처럼 코드를 만들어 준다.

<div></div>

---

이를 확장해서

div.class1

 

이렇게 입력하면, 다음과 같은 코드가 생성된다.

<div class="class1"></div>

 

 

편리한 Emmet 기능... 적극 활용해서 재밌게 코딩하자!

---

[Emmet 사용 예]

div>div.class-A
<div>
    <div class="class-A"></div>
</div>


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


(h1+h2>p)+div>div
<h1></h1>
<h2>
    <p></p>
</h2>
<div>
    <div></div>
</div>