VS Code에서 Emmet 사용법 완벽 정리(HTML 및 CSS 코드 빠르게 작성하기)

VS Code에서 Emmet 사용법 완벽 정리

VS Code(Visual Studio Code)는 웹 개발 생산성을 높여주는 다양한 기능을 내장하고 있으며, 그중 하나가 바로 Emmet이다. Emmet은 CSS 선택자와 유사한 짧은 약어를 사용하여 HTML 및 CSS 코드를 빠르게 작성할 수 있게 도와주는 강력한 도구이다. VS Code에는 Emmet 기능이 기본적으로 탑재되어 있어 별도의 설치 없이 바로 사용할 수 있다.

Emmet 약어를 입력한 후 Tab 키 또는 Enter 키를 누르면 해당 약어가 완전한 HTML 또는 CSS 코드로 자동 완성된다. (설정에 따라 Enter 키 자동 완성이 비활성화되어 있을 수 있다.)

1. HTML Emmet 문법 및 예제

HTML 파일(.html, .jsx, .tsx, .vue 등)에서 사용할 수 있는 주요 Emmet 문법과 예제는 다음과 같다.

• 요소 생성 (Element Creation)
  • 가장 기본적인 문법으로, 태그 이름을 그대로 입력하면 해당 태그가 생성된다.
  • 예: div → <div></div>
  • 예: p → <p></p>
• 자식 요소 (Child: >)
  • > 기호를 사용하여 부모 요소 아래에 자식 요소를 생성한다.
  • 예: ul>li → <ul><li></li></ul>
  • 예: div>p>span → <div><p><span></span></p></div>
• 형제 요소 (Sibling: +)
  • + 기호를 사용하여 같은 레벨에 형제 요소를 생성한다.
  • 예: div+p → <div></div><p></p>
  • 예: h1+h2+p → <h1></h1><h2></h2><p></p>
• 상위 레벨 이동 (Climb-up: ^)
  • ^ 기호를 사용하여 계층 구조에서 한 단계 위로 이동하여 요소를 생성한다.
  • 예: div>p^span → <div><p></p></div><span></span>
  • 예: div+div>p>span+em^bq → <div></div><div><p><span></span><em></em></p><blockquote></blockquote></div> (bq는 span/em과 형제 레벨이 아닌 p와 형제 레벨로 생성됨)
• 반복 생성 (Multiplication: *)
  • * 기호와 숫자를 사용하여 요소를 여러 개 반복 생성한다.
  • 예: ul>li*5 → <ul><li></li><li></li><li></li><li></li><li></li></ul>
• 그룹화 (Grouping: ())
  • () 괄호를 사용하여 복잡한 구조의 요소를 그룹화한다.
  • 예: 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>

• ID 및 클래스 속성 (ID: #, Class: .)
  • # 기호로 ID 속성을, . 기호로 클래스 속성을 추가한다. 여러 클래스는 .을 연속해서 사용한다.
  • 예: div#header → <div id="header"></div>
  • 예: p.text → <p class="text"></p>
  • 예: div#content.container.rounded → <div id="content" class="container rounded"></div>
• 사용자 정의 속성 (Custom Attributes: [])
  • [] 대괄호 안에 속성명=값 형식으로 사용자 정의 속성을 추가한다. 값에 공백이 있다면 따옴표로 감싸준다.
  • 예: a[href='#'] → <a href="#"></a>
  • 예: input[type=text name=search placeholder='검색어를 입력하세요'] → <input type="text" name="search" placeholder="검색어를 입력하세요">
• 텍스트 내용 추가 (Text: {})
  • {} 중괄호 안에 텍스트 내용을 직접 추가한다.
  • 예: p{Hello world} → <p>Hello world</p>
  • 예: a[href='#']{클릭} → <a href="#">클릭</a>
• 자동 넘버링 (Numbering: $)
  • $ 기호는 반복 생성(*)과 함께 사용될 때 1부터 증가하는 숫자로 치환된다.
  • 예: ul>li.item$*5 →

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

  • $$, $$$ 처럼 $ 개수를 늘리면 숫자의 자릿수를 0으로 채울 수 있다. (예: 01, 001)
  • 예: ul>li.item$$$*3 → <ul><li class="item001"></li><li class="item002"></li><li class="item003"></li></ul>
  • $@N 형태로 시작 번호를 지정하거나(N), $@- 형태로 역순(내림차순)으로 번호를 매길 수 있다.
  • 예: ul>li.item$@3*3 → <ul><li class="item3"></li><li class="item4"></li><li class="item5"></li></ul>
  • 예: ul>li.item$@-*3 → <ul><li class="item3"></li><li class="item2"></li><li class="item1"></li></ul>
• 암묵적 태그 이름 (Implicit Tag Names)
  • 특정 부모 요소 안에서는 약어만 입력해도 Emmet이 적절한 태그 이름을 추론하여 생성한다.
  • 예: .container → <div class="container"></div> (div는 종종 기본값으로 사용됨)
  • 예: ul>.item → <ul><li class="item"></li></ul> (ul/ol 안에서는 li가 기본)
  • 예: table>.row>.col → <table><tr class="row"><td class="col"></td></tr></table> (table 안에서는 tr, tr 안에서는 td가 기본)

2. CSS Emmet 문법 및 예제

CSS 파일(.css, .scss, .less, .sass 등)에서도 Emmet 약어를 사용하여 CSS 속성을 빠르게 작성할 수 있다.

• 기본 속성
  • 속성명의 약어를 사용한다. 값은 약어 뒤에 붙인다. 단위가 없는 숫자는 주로 px로 처리되지만, 다른 단위를 명시할 수도 있다.
  • 예: p10 → padding: 10px;
  • 예: m0-a → margin: 0 auto; (-는 공백을 의미)
  • 예: w100p → width: 100%; (p는 %를 의미)
  • 예: fz1.5em → font-size: 1.5em;
  • 예: bgc#fff → background-color: #ffffff; (#fff는 #ffffff로 확장됨)
  • 예: pos:r → position: relative; (: 뒤에 값의 첫 글자나 약어를 사용)
  • 예: d:f → display: flex;
  • 예: bdrs50p → border-radius: 50%;
• 값 약어
  • 자주 사용되는 값들은 약어로 제공된다.
  • 예: p → position: (커서 위치)
  • 예: poa → position: absolute;
  • 예: fl → float: left;
  • 예: tac → text-align: center;
• 벤더 프리픽스 (Vendor Prefixes)
  • - 접두사를 사용하여 벤더 프리픽스가 필요한 속성을 한 번에 생성할 수 있다. (VS Code의 Autoprefixer 확장 기능과 함께 사용하면 더 편리하다.)
  • 예: -trf →

    -webkit-transform: ;
    -ms-transform: ;
    transform: ;

이처럼 Emmet은 간단한 약어를 통해 반복적인 코딩 작업을 줄여주고 개발 속도를 크게 향상시키는 유용한 기능이다. VS Code에서 다양한 Emmet 문법을 익혀 적극적으로 활용하면 웹 개발 생산성을 높이는 데 큰 도움이 될 것이다.