[HTML] Emmet 사용법

HYEJIN·2022년 7월 3일

front-end 웹기초

목록 보기

5/7

Emmet?

강력한 자동완성 기능 등으로 HTML 작성 속도를 크게 향상시켜주는 플러그인이다.
Emmet(에밋)을 사용하면 HTML의 작업 속도를 엄청나게 향상시킬 수 있다.
VS Code는 emmet을 기본적으로 지원하고 Tab키를 통해 사용한다.

빠른 마크업이 중요한 이유 ?

HTML이나 xml 같은 마크업 언어는 코드의 양이 많기 때문에 시간 단축이 중요하다.
그래서 HTMl에서는 Emmet 같은 tool들이 개발자들이 좀 더 빠르게 코드를 작성할 수 있도록 지원한다.

Emmet 사용법 / 문법

사용법

생성하려는 요소의 이름을 입력한 뒤 tab 키를 누르면 태그가 자동 생성된다.
Emmet 문법을 쓸 때는 Space ber 를 사용하지 않고 모든 문장을 다 붙여줘야 한다.

자식 하위요소 / >

> 기호를 사용 / 부모노드 > 자식노드
div>ul>li + [TAB]

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

형제요소 / +

+ 기호를 사용 / 형제노드 + 형제노드
header>div+nav + [TAB]

<header>
  <div></div>
  <nav></nav>
</header>

상위에 추가 / ^

^ 기호를 사용
div>ul>li^ol + [TAB]
li의 상위(부모)인 ul과 형제로 ol이 추가됨

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

^를 여러번 입력하면 입력한 만큼 올라갈 수 있음
- div>ul>li^^ol + [TAB] >> ol은 div와 형제로 추가됨

여러번 반복 / *

* 기호를 사용
div*3 + [TAB] >> div 태그가 3개 자동완성
ol>li*3 + [TAB] >> ol태그 안에 li 태그 3개가 자동완성
nav>ul>li*3 + [TAB]

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

그룹화 (그룹화될 내용)

() 안에 그룹으로 묶어줄 태그 포함
div>(header>ul>li*2)+footer +[TAB]
- div의 자식 -> header와 footer
- header태그와 footer태그는 형제

<div>
  <header>
    <ul>
      <li></li>
      <li></li>
    </ul>
  </header>
  <footer>
  </footer>
</div>

그룹화가 풀릴경우? 전혀 다른 결과가 나오게됨
div>header>ul>li*2+footer +[TAB]
- li와 footer태그가 형제가 됨

  <div>
    <header>
      <ul>
        <li></li>
        <li></li>
        <footer></footer>
      </ul>
    </header>
  </div>

클래스 / .class이름

. 기호를 사용
div.container +[TAB]

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

id / #id이름

# 기호를 사용
div#job +[TAB]

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

속성 / [attr]

[] 기호를 사용 / []안에 원하는 속성 넣음
img[src="hello.png" alt="인사이미지"] + [TAB]

<img src="hello.png" alt="인사이미지">

컨텐츠 텍스트 / {}

{} 기호를 사용 / {}안에 원하는 내용 넣음
p{hello} + [TAB]

<p>hello</p>

넘버링 / $ / ＄@

$ 기호를 사용 / 숫자를 순서대로 나열
＄@ 기호 뒤에오는 숫자부터 시작으로 나열됨
p.class${item $}*5 + [TAB]

<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>

p.class$@3{item $@5}*5 + [TAB]
- class이름인 class는 3부터 시작,item은 5부터 시작

<p class="class3">item 5</p>
<p class="class4">item 6</p>
<p class="class5">item 7</p>
<p class="class6">item 8</p>
<p class="class7">item 9</p>

예시

<!-- div.container>div.item.item${$}*10 -->
<div class="container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
    <div class="item item7">7</div>
    <div class="item item8">8</div>
    <div class="item item9">9</div>
    <div class="item item10">10</div>
  </div>