본문 바로가기
반응형

하드코딩을 선호하는 프론트앤드 개발자에게 아주 중요한 도구가 하나 있습니다. 예전에는 스니펫(snippets)이라고도 불렀었는데 그 사용법이 제공자마다 조금씩 달랐었습니다. 하지만 언제부턴가 Emmet이 나오면서 자동완성 코드의 사용법이 어느정도 통일이 된 것 같습니다.

Emmet

Emmet이 도대체 뭐야?

Emmet을 한마디로 요약하면 제목에도 나와 있듯이 약속된 형태의 카워드를 작성하고 변환키를 눌러주면 자동으로 코드를 완성시켜주는 툴킷이라고 할 수 있습니다.
Emmet은 웹 개발자를 위한 필수 툴킷 이며 현재 출시되어 있는 많은 인기있는 텍스트 편집기에서 플러그인 형태로 제공되고 있습니다. Emmet을 통해서 HTML 및 CSS 작업 과정을 효율적으로 작업할 수 있습니다.

Emmet.io

적용가능한 텍스트 편집기

Emmet은 아래와 같이 정말 다양한 편집기에서 사용할 수 있습니다.

사용가능 에디터
Download는 Emmet.io에서 직접 제작한 플러그인이고
Online services는 다운로드 하여 설치하는 것이 아니라 인터넷에서 서비스 하고 있는 편집기 중 사용가능한 에디터의 목록입니다.
Third-party support는 각 에디터 개발사가 직접 제작한 플러그인이라고 보시면 됩니다.
VScode도 직접 MS에서 제작을 했다고 나와 있네요.

Emmet 사용방법

여러분은 처음 HTML문서를 작성할 떄 어떻게 작성을 하나요?
<html></html> 타이핑하고, <html>안에 <html><head></head><body></body></html> 타이핑하고 <head></head>안에 메타테그 및 title작성하고.. 하지요..
Emmet에서는 이러한 기본 HTML5작성을 간단히 !하나 작성하고 적용키를 누름으로써 만들어 낼 수 있습니다.

!

VScode에서는 위처럼 !를 입력하고 단축키 ctrl + Shift를 입력하면 자동으로 아래와 같이 HTML5의 기본코드를 작성해 줍니다.
매우 편하고 신기하죠?

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

</body>
</html>

이렇게 어느정도의 규칙만 알고 있으면 상당히 편리하게 사용할 수 있습니다.

기본 사용법(문법)

하위 태그의 표시는 >로 표시합니다.

nav>ul>li

위의 표시는 nav태그 하위에 ul태그를 넣고 그 하위에 li태그를 넣어서 작성하라는 뜻입니다.
아래와 같은 결과물이 나옵니다.

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

이웃 태그의 표시는 +로 표시합니다.

div+p+bq

위의 표시는 div태그 옆에 p태그를 붙히고 그 옆에 blockquote태그를 넣어서 작성하라는 뜻입니다.
아래와 같은 결과물이 나옵니다.

<div></div>
<p></p>
<blockquote></blockquote>

상위 태그의 표시는 ^로 표시합니다.

div+div>p>span+em^bq

위의 표시는 div태그 옆에 div태그를 붙히고 그 하위에 P태그, 그 옆에 em태그를 놓고 한단계 상위에 blockquote 를 넣어서 작성하라는 뜻입니다.
아래와 같은 결과물이 나옵니다.

<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>

그룹 태그의 표시는 ()로 감싸 줍니다.

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

위의 표시는 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>

여러 개를 추가 할 때는 * 숫자로 표시합니다.

ul>li*5

위의 표시는 ul태그 하위에 li를 5개 넣어서 작성하라는 뜻입니다.
아래와 같은 결과물이 나옵니다.

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

여러 개를 추가 할 때 넘버링을 하려면 $를 표시한 곳에 자동으로 번호가 붙습니다.

ul>li.item$*5

위의 표시는 ul태그 하위에 li를 5개 넣어서 작성하라는 뜻입니다.
아래와 같은 결과물이 나옵니다.

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

ID와 CLASS를 표시하는 것은 CSS의 표시방법처럼 ID#을, CLASS.으로 표시합니다.

#header

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

.title

<div class="title"></div>

form#search.wide

<form id="search" class="wide"></form>

위의 내용은 기본적인 설명이고 더 많은 정보를 사용하시려면 아래의 cheat-sheet를 참고하세요.

https://docs.emmet.io/cheat-sheet/

더 많은 정보는 Emmet 홈페이지를 참조하세요

UX 공작소

UX와 UI에 관해 내가 알게된 다양한 이야기를 공유해요~