[TIP 1] Emmet(vscode 기준)

🔎 Emmet?

Emmet이란 코드 에디터 툴을 사용하여 코드를 작성할 때 효율적으로 시간을 단축시킬 수 있도록 도와주는 확장 기능이다.

Atom, vscode, notepad++ 등 여러 에디터 툴에서 대부분 지원하고 있고, 없다면 외부에서 Emmet 플러그인을 설치해서 사용할 수 있다.
나는 현재 vscode 툴을 사용하고 있고 그렇기 때문에 이것을 기준으로 설명하도록 하겠다.

📚 Emmet 문법

vscode의 단축키는 tab이다. 문법을 적은 뒤, tab 키를 누르면 굳이 일일히 다 코드를 적지 않아도 쉽게 생성이 된다.

태그 생성

div

div 입력 후 tab을 누르면

<div></div>

이렇게 생성이 된다

부모 태그가 자식 태그를 포함하는 구조도 만들 수 있다.

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>ul>li^ol

div 태그 안에 ul 태그, ul 태그 안에 li 태그를 넣고 다시 전 단계로 나와서 ul의 형제 태그로 ol을 표시한다.

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

클래스 이름 넣기

div.class
.class

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

태그 뒤에 .class를 적어주고 tab키를 누른다.
.class를 적고 tab을 누르면 클래스 이름을 가진 div 태그가 입력된다.

id 이름 넣기

div#id

<div id="id"></div>

원하는 태그 뒤에 #id를 적어주고 tab키를 누른다.

그룹화

div>(header>ul>li*2>a)+footer

header 안에 많은 자식 태그를 넣고 header 옆에 형제 태그인 footer를 놓고 싶다면 ()를 이용하여 그룹이라는 것을 표시한다.

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

텍스트 입력

태그 안에 텍스트를 입력할 수도 있다.

p{hello}

<p>hello</p>

자동으로 숫자 할당

자동으로 숫자를 넣고 싶은 부분에 $를 입력한다.

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>

더미용 텍스트

프로그래밍을 하다보면 테스트를 해야 할 때 안에 임시로 넣을 더미용 텍스트가 필요한 경우가 있다. Emmet으로는 이러한 텍스트도 표현할 수 있다.

p>lorem
p>lorem4

lorem을 그냥 입력하면 전체 텍스트가 나오고, lorem 뒤에 숫자는 Lorem 뒤에 나오는 단어의 수를 말한다.

p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestiae, blanditiis? Nulla totam mollitia accusantium, consequatur natus quasi, dolor quas eum modi amet minus ipsam reprehenderit labore veritatis maiores incidunt molestiae!</p>
<p>Lorem ipsum dolor sit amet.</p>