에메트 구문, 이제 더 이상 어렵지 않아요! 아주 쉬운 Emmet 활용법

by

에메트 구문, 이제 더 이상 어렵지 않아요! 아주 쉬운 Emmet 활용법

목차

  1. 에메트(Emmet)란 무엇이며, 왜 사용해야 할까요?
  2. 에메트 설치 및 활성화 방법
  3. 자주 사용하는 에메트 구문: 기본 태그부터 속성까지
    • HTML 태그 빠르게 생성하기
    • 클래스 및 ID 속성 추가하기
    • 자식/형제/부모 선택자 활용하기
    • 반복 구문으로 여러 요소 한 번에 만들기
    • 텍스트 채워 넣기: Lorem Ipsum 활용
    • 넘버링으로 순서가 있는 요소 만들기
  4. 에메트 활용 꿀팁 및 고급 기능
    • 태그 그룹화와 속성 조합
    • 주석 처리 자동화
    • CSS에서도 빛나는 에메트
  5. 에메트, 효율적인 코딩을 위한 필수 도구

1. 에메트(Emmet)란 무엇이며, 왜 사용해야 할까요?

웹 개발을 하다 보면 HTML과 CSS 코드를 작성하는 데 많은 시간을 할애하게 됩니다. 특히 반복적이고 정형화된 구조의 코드를 일일이 타이핑하는 것은 시간 낭비일 뿐만 아니라 오타 발생 가능성도 높입니다. **에메트(Emmet)**는 이러한 비효율성을 해결하기 위해 등장한 강력한 도구입니다. 에메트는 일종의 약어 확장 플러그인으로, 짧은 약어만으로도 복잡한 HTML 및 CSS 코드를 자동으로 완성시켜 줍니다.

에메트를 사용해야 하는 이유는 명확합니다. 첫째, 코딩 속도 향상입니다. 몇 글자만 입력하면 수십 줄의 코드가 자동으로 완성되므로 개발 시간을 획기적으로 단축할 수 있습니다. 둘째, 생산성 증대입니다. 반복적인 타이핑에서 벗어나 핵심 로직 구현에 더 집중할 수 있게 해줍니다. 셋째, 오타 감소입니다. 자동 완성 기능을 통해 휴먼 에러를 줄여 코드의 안정성을 높여줍니다. 마지막으로, 코드 가독성 향상입니다. 일관된 코드 구조를 유지하는 데 도움을 주어 다른 개발자와의 협업에서도 이점을 제공합니다. 에메트는 단순한 편의 기능을 넘어 개발 워크플로우를 혁신하는 필수적인 도구라고 할 수 있습니다.

2. 에메트 설치 및 활성화 방법

대부분의 현대적인 코드 에디터에는 에메트가 기본으로 내장되어 있거나 플러그인 형태로 쉽게 설치할 수 있습니다. 여기서는 가장 널리 사용되는 Visual Studio Code(VS Code)를 기준으로 설명하겠습니다.

VS Code의 경우, 에메트가 기본으로 내장되어 있으므로 별도의 설치 과정 없이 바로 사용할 수 있습니다. 단, HTML, CSS 등의 파일 형식에서 에메트 기능이 정상적으로 활성화되어 있는지 확인하는 것이 좋습니다. 만약 작동하지 않는다면 파일(File) > 기본 설정(Preferences) > 설정(Settings)으로 이동하여 “emmet”을 검색해 관련 설정을 확인할 수 있습니다. 특히 Emmet: Trigger Expansion On Tab 옵션이 체크되어 있는지 확인하세요. 이 옵션이 활성화되어 있어야 Tab 키를 눌러 에메트 구문을 확장할 수 있습니다. 다른 에디터(Sublime Text, Atom 등)의 경우에도 유사하게 플러그인 설치 또는 설정 변경을 통해 에메트를 활성화할 수 있습니다. 일반적으로 에디터의 ‘패키지 컨트롤’이나 ‘확장 마켓플레이스’에서 ‘Emmet’을 검색하여 설치하면 됩니다.

3. 자주 사용하는 에메트 구문: 기본 태그부터 속성까지

이제 본격적으로 자주 사용되는 에메트 구문들을 살펴보며 어떻게 HTML 코드를 쉽고 빠르게 작성할 수 있는지 알아보겠습니다.

HTML 태그 빠르게 생성하기

가장 기본적인 에메트 구문은 태그 이름을 입력하고 Tab 키를 누르는 것입니다.

  • div + Tab -> <div></div>
  • p + Tab -> <p></p>
  • a + Tab -> <a href=""></a> (a 태그는 기본적으로 href 속성을 포함하여 생성됩니다.)
  • img + Tab -> <img src="" alt=""> (img 태그는 src와 alt 속성을 포함하여 생성됩니다.)
  • link + Tab -> <link rel="stylesheet" href="">
  • script + Tab -> <script></script>
  • ! (또는 html:5) + Tab -> 기본적인 HTML5 문서 구조를 한 번에 생성합니다. (<!DOCTYPE html>, <html>, <head>, <body> 등)

클래스 및 ID 속성 추가하기

태그에 클래스나 ID를 부여하는 것도 매우 간단합니다. CSS 선택자와 유사한 방식을 사용합니다.

  • 클래스 추가: div.my-class + Tab -> <div class="my-class"></div>
    • 클래스 이름만 입력해도 div가 기본으로 생성됩니다: .item + Tab -> <div class="item"></div>
    • 여러 클래스 추가: div.class1.class2 + Tab -> <div class="class1 class2"></div>
  • ID 추가: p#my-id + Tab -> <p id="my-id"></p>
    • ID 이름만 입력해도 div가 기본으로 생성됩니다: #header + Tab -> <div id="header"></div>
  • 클래스와 ID 동시 추가: div#main.container.wrapper + Tab -> <div id="main" class="container wrapper"></div>

자식/형제/부모 선택자 활용하기

에메트는 요소 간의 관계를 정의하여 복잡한 구조를 한 번에 생성할 수 있도록 도와줍니다.

  • 자식(Child) 선택자 >: 부모 요소 안에 자식 요소를 생성합니다.
    • ul>li + Tab -> 
      <ul>
    <li></li>
</ul>
    • div>p>span + Tab -> 
      <div>
    <p>
        <span></span>
    </p>
</div>
  • 형제(Sibling) 선택자 +: 같은 레벨에 있는 형제 요소를 생성합니다.
    • div+p+span + Tab -> 
      <div></div>
<p></p>
<span></span>
  • 부모(Climb-up) 선택자 ^: 한 단계 위로 올라가서 형제 요소를 생성합니다.
    • div>ul>li^p + Tab -> 
      <div>
    <ul>
        <li></li>
    </ul>
    <p></p>
</div>
    • div>ul>li*3^^p + Tab (세 번 올라가서 p 태그 생성) -> 
      <div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<p></p>

반복 구문으로 여러 요소 한 번에 만들기

동일한 요소를 여러 번 반복해서 생성해야 할 때 유용합니다. * 연산자를 사용합니다.

  • li*5 + Tab -> 
    <li></li>
<li></li>
<li></li>
<li></li>
<li></li>
  • ul>li*3 + Tab -> 
    <ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
  • div.item*4 + Tab -> 
    <div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>

텍스트 채워 넣기: Lorem Ipsum 활용

개발 초기 단계에서 실제 내용 대신 임시 텍스트를 채워 넣어야 할 때 lorem을 사용합니다.

  • p>lorem + Tab -> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit...</p> (긴 Lorem Ipsum 텍스트)
  • p>lorem5 + Tab -> <p>Lorem ipsum dolor sit amet.</p> (5단어만 포함된 Lorem Ipsum)

넘버링으로 순서가 있는 요소 만들기

반복되는 요소에 자동으로 번호를 부여할 때 $ 연산자를 사용합니다.

  • li{Item $}*3 + Tab -> 
    <li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
  • ul>li.item-$*3 + Tab -> 
    <ul>
    <li class="item-1"></li>
    <li class="item-2"></li>
    <li class="item-3"></li>
</ul>
  • div.col-$$$ + Tab -> <div class="col-001"></div> (자리수를 맞출 수 있습니다.)
  • div.item-$@2*3 + Tab -> 
    <div class="item-2"></div>
<div class="item-3"></div>
<div class="item-4"></div>

    ($@N을 사용하여 시작 번호를 N으로 지정할 수 있습니다.)

  • div.item-$-@-*3 + Tab -> 
    <div class="item-3"></div>
<div class="item-2"></div>
<div class="item-1"></div>

    ($-을 사용하여 역순으로 번호를 매길 수 있습니다.)

4. 에메트 활용 꿀팁 및 고급 기능

앞서 살펴본 기본적인 기능 외에도 에메트는 더욱 강력한 기능을 제공하여 코딩 효율을 극대화합니다.

태그 그룹화와 속성 조합

괄호 ()를 사용하여 여러 에메트 구문을 그룹화하고 조합할 수 있습니다. 이는 복잡한 구조를 한 번에 생성할 때 매우 유용합니다.

  • (header>h1+p)+main>section*2+(footer>p) + Tab -> 
    <header>
    <h1></h1>
    <p></p>
</header>
<main>
    <section></section>
    <section></section>
</main>
<footer>
    <p></p>
</footer>

    이처럼 전체적인 페이지 레이아웃을 몇 글자만으로 빠르게 구성할 수 있습니다.

  • 속성 추가: 대괄호 [] 안에 속성 이름과 값을 입력하여 사용자 정의 속성을 추가할 수 있습니다.
    • a[href="#top" title="Go to top"] + Tab -> <a href="#top" title="Go to top"></a>
    • input[type="text" name="username" placeholder="Enter your name"] + Tab -> <input type="text" name="username" placeholder="Enter your name">

주석 처리 자동화

에메트는 주석 처리 기능도 제공합니다. 하지만 이는 에디터의 설정이나 특정 플러그인에 따라 동작 방식이 다를 수 있습니다. 일반적으로 HTML에서는 “를 직접 입력하거나 에디터의 주석 처리 단축키를 사용하는 것이 더 일반적입니다. 하지만 에메트 설정에서 주석 처리를 위한 사용자 정의 스니펫을 추가할 수도 있습니다. 예를 들어, c:header와 같은 사용자 정의 약어를 만들어 `\<header\>\</header\>`와 같이 주석이 포함된 태그를 생성하도록 설정할 수 있습니다.

CSS에서도 빛나는 에메트

에메트는 HTML뿐만 아니라 CSS 코드 작성에서도 탁월한 효율성을 발휘합니다. CSS 속성 약어를 입력하고 Tab 키를 누르면 전체 속성이 완성됩니다.

  • m + Tab -> margin:
  • p + Tab -> padding:
  • mb + Tab -> margin-bottom:
  • pr + Tab -> padding-right:
  • w + Tab -> width:
  • h + Tab -> height:
  • d + Tab -> display:
  • pos + Tab -> position:
  • t + Tab -> top:
  • bc + Tab -> background-color:
  • bd + Tab -> border:
  • fz + Tab -> font-size:
  • ta + Tab -> text-align:
  • fl + Tab -> float:
  • dn + Tab -> display: none;
  • dib + Tab -> display: inline-block;

여기에 값까지 함께 입력하여 더 빠르게 완성할 수 있습니다.

  • w100p + Tab -> width: 100%;
  • h200px + Tab -> height: 200px;
  • m10 + Tab -> margin: 10px;
  • p5-10 + Tab -> padding: 5px 10px;
  • bdsa + Tab -> border: 1px solid red; (단축 속성도 가능)

벤더 프리픽스(-webkit-, -moz- 등)도 자동으로 추가해 줍니다.

  • ts + Tab (text-shadow) -> -webkit-text-shadow: ; -moz-text-shadow: ; text-shadow: ;

CSS에서도 에메트를 적극적으로 활용하면 스타일링 작업 시간을 크게 단축할 수 있습니다.

5. 에메트, 효율적인 코딩을 위한 필수 도구

지금까지 에메트의 기본적인 개념부터 다양한 활용법, 그리고 고급 기능들까지 자세히 살펴보았습니다. 에메트는 단순히 코드를 빠르게 작성하는 것을 넘어, 개발자의 사고방식을 효율적으로 변화시키는 강력한 도구입니다. 반복적이고 지루한 타이핑 작업에서 벗어나 더 중요한 논리 구현과 문제 해결에 집중할 수 있도록 돕습니다.

처음에는 에메트 구문이 다소 복잡하게 느껴질 수도 있지만, 몇 번 사용하다 보면 금방 익숙해지고 그 편리함에 놀라게 될 것입니다. 공식 문서나 치트 시트를 참고하여 더 많은 구문을 익히고, 꾸준히 연습하여 에메트를 능숙하게 다룬다면 여러분의 웹 개발 생산성은 눈에 띄게 향상될 것입니다. 이제 에메트를 활용하여 더욱 즐겁고 효율적인 코딩 경험을 시작해 보세요!

Leave a Comment