[HTML] HTML의 자동완성기능 Emmet

며칠 전 강의를 듣다가 완전 쿨한 기능을 보았기에 잘 배웠다가 써먹으려고 한다

이런 거 잘 쓰면 뭔가 멋있어 보이고 편하고 아주 좋으니까ㅎㅎ 

 

Emmet

매우 간단한 몇 가지 코드만 입력하면, 자동으로 완전한 HTML 코드를 생성해 주는 플러그인

 

1) > 는 자식요소를 가진 구조를 생성할 수 있다.

div>ul>li*3을 입력하면 이렇게 자동으로 코드가 생성됨(완전 멋지다😍)

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

 

2) + 는 형제요소를 가진 구조 즉 각각의 엘리먼트 생성 가능

div+a+p를 입력하면 

 <div></div>
 <a href=""></a>
 <p></p>

 

이런 Emmet 문법이 엄청 많지만 일단은 오늘 배운 것만 적어두고 하면서 배운것들 다시 더 적어놓은 예정

 

3) ul>li*5>a{$}를 입력하면 이렇게 숫자도 생성이 가능하다.

<ul>
      <li><a href="">1</a></li>
      <li><a href="">2</a></li>
      <li><a href="">3</a></li>
      <li><a href="">4</a></li>
      <li><a href="">5</a></li>
</ul>