Yoon Solbi

Yoon Solbi

Developer. Beginner

© 2021

Dark Mode

Emmet 사용법
Jan 20, 2021
  • Etc

Emmet

html등의 문서를 편집할 때 빠른 코딩을 도와준다.

입력 후 tab키를 눌러주면 자동완성된다!

기본 html

!

tab키를 누르면

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

태그

div

<div></div>

div.aa

div#bb

<div class="aa"></div>
<div id="bb"></div>

구조화

div>ul>li

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

div>ul+ol

같은 단계에 생성

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

ul>li*6

6개 반복 생성

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

div>ul>li^ol

^는 한 단계 위로 옮기기

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

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

()로 그룹핑

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

텍스트

p{hi}

<p>hi</p>

순서대로

p.class${item $}*4

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

<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint possimus laborum quae harum a quidem explicabo deleniti
  atque recusandae maxime pariatur rerum, neque voluptas dolorem eum nobis. Nesciunt, esse nihil?
</p>

p>lorem3

단어 3개만 출력

<p>Lorem, ipsum dolor.</p>