Emmet

Emmet은 HTML과 CSS를 빠르게 작성할 수 있게 도와주는 문법으로, 주로 코드 편집기에서 플러그인 형태로 사용됩니다. Emmet은 간단한 약어를 입력하면 이를 확장해 완성된 코드를 생성해줍니다. 아래에 Emmet 문법의 주요 예제와 사용법을 설명해드릴게요.

기본 개념

Emmet은 태그 이름, 속성, 계층 구조 등을 간단한 문법으로 표현합니다. 약어를 입력한 뒤 Tab 키나 확장 명령(편집기에 따라 다름)을 실행하면 코드로 변환됩니다.

---

1. 기본 태그 생성

• 입력: div
• 결과: <div></div>

태그 이름만 입력하면 기본적으로 해당 태그 쌍을 생성합니다.

---

2. 클래스와 ID 추가

• 클래스는 .으로, ID는 #으로 추가합니다.
  • 입력: div.container
  • 결과: <div class="container"></div>
  • 입력: div#item
  • 결과: <div id="item"></div>
  • 입력: div.container#main
  • 결과: <div class="container" id="main"></div>
• 여러 클래스도 가능:
  • 입력: div.btn.btn-primary
  • 결과: <div class="btn btn-primary"></div>

---

3. 자식 요소 (하위 구조)

• >를 사용해 자식 요소를 생성합니다.
  • 입력: div>ul>li
  • 결과:

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

---

4. 형제 요소

• +를 사용해 같은 레벨의 요소를 추가합니다.
  • 입력: div+p+span
  • 결과:

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

---

5. 반복 생성

• *를 사용해 요소를 반복합니다.
  • 입력: ul>li*3
  • 결과:

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

---

6. 번호 매기기

• $를 사용해 반복되는 요소에 번호를 붙일 수 있습니다.
  • 입력: ul>li.item$*3
  • 결과:

    <ul>
        <li class="item1"></li>
        <li class="item2"></li>
        <li class="item3"></li>
    </ul>
    

  • $@시작숫자로 시작 번호를 지정 가능:
    • 입력: li.item$@3*3
    • 결과: item3, item4, item5

---

7. 내용 추가

• {}로 태그 안에 텍스트를 추가합니다.
  • 입력: p{Hello World}
  • 결과: <p>Hello World</p>
  • 입력: ul>li{Item $}*3
  • 결과:

    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
    

---

8. 속성 추가

• []로 태그에 속성을 추가합니다.
  • 입력: a[href="https://example.com"]
  • 결과: <a href="https://example.com"></a>
  • 입력: input[type="text" placeholder="Enter text"]
  • 결과: <input type="text" placeholder="Enter text">

---

9. 그룹화

• ()로 복잡한 구조를 그룹화할 수 있습니다.
  • 입력: div>(header>h1)+footer
  • 결과:

    <div>
        <header>
            <h1></h1>
        </header>
        <footer></footer>
    </div>
    

---

10. CSS 문법

Emmet은 CSS 속성도 지원합니다.

• 입력: m10
• 결과: margin: 10px;
• 입력: p20-30
• 결과: padding: 20px 30px;

---

실습 예제

• 입력: div.container>ul.list>li.item$*3>a[href="#"]{Link $}
• 결과:

  <div class="container">
      <ul class="list">
          <li class="item1"><a href="#">Link 1</a></li>
          <li class="item2"><a href="#">Link 2</a></li>
          <li class="item3"><a href="#">Link 3</a></li>
      </ul>
  </div>
  

---

팁

• 대부분의 코드 편집기(VS Code, Sublime Text 등)에서 Emmet은 기본으로 내장되어 있거나 플러그인 설치로 사용 가능합니다.
• 연습하면서 자주 쓰는 패턴을 익히면 코딩 속도가 크게 빨라집니다!

추가 질문이 있으면 언제든 물어보세요!