[VSC] emmet으로 html 내용을 빠르게 만들어 보자

emmet 문법은 젠코딩이라고도 불립니다. 저도 처음 배울 때 emmet보다는 젠코딩이라는 단어로만 알고 있었는데, emmet 문법이라고 알았으니 한 번 정리를 해보았습니다. 별도로 설치가 필요한 IDE들이 있는 것으로 알고 있지만, VSCode의 경우 내장되어 있습니다.

emmet 문법에 필요한 기본적인 기호들입니다. css 선택자 기호와도 비슷합니다.
> * + # . $ ( ) { } [ ]

이 기호들을 하나씩 살펴봅시다!

> 자식 태그를 추가합니다.

div>div

 <div>
   <div>
 </div>
</div>

* 연속되고 중복되는 태그들을 일괄적으로 추가할 수 있습니다.
li 목록 태그를 추가할 때 좋습니다.

ul>li*4

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

만약 li의 내부에 1씩 증가하는 내용을 넣고 싶다면, $ 와 { }을 이용합니다.
$은 넘버링을 해줍니다.
{ }은 내용을 추가해줍니다.

ul>li*4{내용$}

<ul>
	<li>내용1</li>
	<li>내용2</li>
	<li>내용3</li>
	<li>내용4</li>
</ul>

다른 예시로는 클래스 이름 넘버링에 좋습니다.

.클래스를 추가해줍니다.

div.box$*4

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>

#은 아이디를 추가해줍니다. 예시는 위와 같습니다.

+로 형제태그를 추가해줍니다. 형제태그들에 ( )로 그룹핑합니다.

div+div로 div태그를 2개가 생성됩니다. 다만, 앞쪽의 div는 자식으로 a태그를 가지고 있습니다. div>a + div를 한다면, 하나의 div안에 a와 div태그를 자식으로 가집니다. 따라서 (div>a)+div로 어디까지가 자식인지 알려주는 것입니다. 이때 주의할 점은 부모가 되는 태그까지 그룹핑을 해줘야 한다는 것입니다. div>(a) +div는 div>a + div와 같습니다.

<!-- div+div -->
<div></div>
<div></div>
<!-- (div>a)+div -->
<div><a href=""></a></div>
<div></div>

이때 a태그의 href와 같은 필수적인 속성들은 알아서 생깁니다. 하지만, 여기에 클래스와 아이디말고 title과 같은 별도의 속성을 추가해주고 싶습니다.
[ ]원하는 속성을 추가해줍니다.

div[title=""]

<div title=""></div>

이렇게 emmet문법을 활용해서 빠르게 html 태그들을 쓸 수 있는 방법을 알아보았습니다. emmet 문법은 익숙해지면 작업속도가 빨라질 수 있어서 많이 사용해보시는 걸 추천드립니다!!

참고자료 생활코딩 emmet >