HTML 자동 완성 (에밋 Emmet)

 

Emmet은 HTML, CSS, 심지어 XML까지 더 빠르고 효율적으로 작성할 수 있도록 도와주는 강력한 도구입니다. 짧은 코드 한 줄로 복잡한 HTML 구조를 만들어내는 마법과 같죠!

Emmet의 매력은 무엇일까요?

• 빠른 코딩: 반복적인 태그 작성을 줄여 시간을 절약해줍니다.
• 일관성: 일관된 코드 구조를 유지하여 코드 가독성을 높입니다.
• 생산성 향상: 더 많은 시간을 디자인과 로직 구현에 집중할 수 있도록 합니다.

Emmet 어떻게 사용하나요?

1. 코드 편집기 선택: Visual Studio Code, Sublime Text, Atom 등 대부분의 코드 편집기에서 Emmet을 지원합니다.
2. 짧은 코드 입력: 원하는 HTML 구조를 나타내는 짧은 코드를 입력합니다.
3. Tab 키 누르기: 입력한 코드 뒤에서 Tab 키를 누르면 Emmet이 자동으로 완성된 HTML 코드로 바꿔줍니다.

html div*3 와 같이 간단한 명령어로 여러 HTML 태그를 한 번에 생성하는 것을 Emmet 이라고 합니다. Emmet은 개발자들이 HTML, CSS, 심지어 XML까지 더 빠르고 효율적으로 작성할 수 있도록 도와주는 강력한 도구입니다.

다양한 Emmet 예제

• div 5개 생성:
  HTML

  div.item*5
  

  결과:
  HTML

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

   
• ul 안에 li 3개 생성:
  HTML

  ul>li*3
  

  결과:
  HTML

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

   
• 클래스와 ID 지정:
  HTML

  div.container>p#intro
  

  결과:
  HTML

  <div class="container">
      <p id="intro"></p>
  </div>
  

   

   
• 속성 추가:
  HTML

  a[href="https://www.example.com"]
  

  결과:
  HTML

  <a href="https://www.example.com"></a>
  

   

   
• 텍스트 내용 추가:
  HTML

  p{Hello, World!}
  

  결과:
  HTML

  <p>Hello, World!</p>
  

   

   

숫자 시퀀스 생성

HTML

div.item$*5

코드를 사용할 때는 주의가 필요합니다.

 

위 코드는 다음과 같은 HTML 구조를 생성합니다.

HTML

<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
<div class="item4"></div>
<div class="item5"></div>

 

어떻게 사용하나요?

Emmet은 대부분의 코드 편집기에서 기본적으로 지원되거나, 별도의 확장 프로그램을 설치하여 사용할 수 있습니다. 코드를 입력하고 Tab 키를 누르면 Emmet이 자동으로 완성해줍니다.