Emmet 자동완성 문법

프론트엔드스쿨 1일차에 깃허브 그리고 emmet 문법에 대해 배웠다.

Emmet이란?

HTML 마크업을 할때 사용되는 자동완성문법이다. 다양한 태그를 빠르게 여러개 생성할 때, 태그 내 클래스명을 한꺼번에 지정해줄 때, 태그 내 텍스트를 넣어줄 때 유용하게 활용할 수 있다.

Emmet 기초

">" 태그 내 태그 생성

원하는 태그 이름을 작성 후 포함(>)하는 문법을 사용한다. ul내 li를 생성할때의 예시는 다음과 같다.

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

"*" 같은 태그 여러개 생성

원하는 태그 이름을 작성 후 복사(*)하는 문법을 사용한다. ul내 li를 여러개 생성할 때 예시는 다음과 같다.

ul>li*4
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

"*" 같은 태그 여러개 생성

원하는 태그 이름을 작성 후 복사(*)하는 문법을 사용한다. ul내 li를 여러개 생성할 때 예시는 다음과 같다.

ul>li*4
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

"+" 병렬식으로 태그 여러개 생성

원하는 태그 이름을 작성 후 같은 레벨에 생성하도록 추가(+)한다. 예시는 다음과 같다.

div+p+span
<div></div>
<p></p>
<span></span>

"+" 병렬식으로 태그 여러개 생성

원하는 태그 이름을 작성 후 같은 레벨에 생성하도록 추가(+)한다. 예시는 다음과 같다.

div+p+span
<div></div>
<p></p>
<span></span>

"()" 태그 그룹짓기

특정 태그 내 그룹을 지어 작성할 때 유용하다.

section>(h1+ul>li*3)
<section>
  <h1></h1>
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</section>

클래스"." 또는 아이디"#" 추가하기

태그 내 클래스 또는 아이디를 추가할 때 유용하다.

div.box 
<div class="box"></div>

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

"$" 넘버링 하기

태그 내 클래스 또는 아이디에 숫자를 부여할 수 있다.
각 태그에 고유 번호를 부여할 때 많이 사용하는 것 같다!

ul>li*4.list$ 
<ul>
  <li class="list1"></li>
  <li class="list2"></li>
  <li class="list3"></li>
  <li class="list4"></li>
</ul>

"{}" 텍스트 추가하기

태그 내 텍스트를 추가할 때 사용한다.

p{싸인 청춘이 같은 과실이 밥을 얼음 가는 구하지 갑 때문이다. 청춘의 우리는 뭇 뿐이다. 싹이 위하여, 있으며, 반짝이는 못하다 사막이다.}
<p>싸인 청춘이 같은 과실이 밥을 얼음 가는 구하지 갑 때문이다. 청춘의 우리는 뭇 뿐이다. 싹이 위하여, 있으며, 반짝이는 못하다 사막이다.</p>

실제로 프로젝트를 하며 많이 사용했던 문법은 ">", "*", "$", ".", "#" 정도 인 것 같다.
이외 다양한 Emmet문법은 Emmet에서 찾아볼 수 있다.

오늘은 여기까지.