프론트엔드 개발자가 생산성을 높일 수 있는 기능 Emmet(이멧)

🔗 Emmet 문법

• Emmet 문법은 HTML, CSS 등의 코드를 더 빠르게 작성할 수 있도록 돕는 기능
• Emmet은 축약된 문법을 통해 코드를 생성하며, VSCode를 비롯한 일부 IDE에서는 기본적으로 활성화되어 있음

 

🫧 기본 요소 생성

div
:<div></div>

p
:<p></p>

---

🫧 형제 요소(+)

div+p+span
:<div></div>
<p></p>
<span></span>

---

🫧 상위 요소로 이동(^)

div>p>span^h1
:<div>
    <p>
        <span></span>
    </p>
    <h1></h1>
</div>

---

🫧 한번에 여러개의 요소 생성(*)

ul>li*3
:<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

---

🫧 id와 class가 추가된 요소 생성(#,.)

div#header
:<div id="header"></div>

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

div#id.class1.class2
:<div id="id" class="class1 class2"></div>

---

🫧 속성 추가([속성:"값"])

a[href='#']
:<a href="#"></a>

img[src='img.jpg'][alt='image']
:<img src="img.jpg" alt="image">

---

🫧 넘버링($)

ul>li.item$*3
:<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
</ul>

---

🫧 텍스트 내용({})

p{Hello}
:<p>Hello</p>

div{item $}*3
:<div>item 1</div>
<div>item 2</div>
<div>item 3</div>

---

🫧 그룹화(())

div>(header>ul>li*2)+footer>p
:<div>
    <header>
        <ul>
            <li></li> 
            <li></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

---

🧰 사용 예시

nav>ul.menu>li.menu-item*4>a[href=#]{Menu $}
:<nav>
    <ul class="menu">
        <li class="menu-item">
            <a href="#">Menu 1</a>
        </li>
        <li class="menu-item">
            <a href="#">Menu 2</a>
        </li>
        <li class="menu-item">
            <a href="#">Menu 3</a>
        </li>
        <li class="menu-item">
            <a href="#">Menu 4</a>
        </li>
    </ul>
</nav>

---

 

✈️ 출처

한국경제신문 x 토스뱅크 풀스택 훈련