😈에메트그래머 공포, 이제 그만! (Emmet Grammar) 효율적 코드 작성 마스터 가이

😈에메트그래머 공포, 이제 그만! (Emmet Grammar) 효율적 코드 작성 마스터 가이

드

목차

1. 에메트그래머, 왜 배워야 할까요?
2. 핵심 문법: 기본 구조와 셀렉터 활용
   • 요소 생성의 기본: 태그 이름
   • 속성 추가: ID와 클래스
   • 형제 및 자식 관계 정의
3. 고급 문법: 반복, 그룹화, 텍스트 추가
   • 반복 연산자: 곱하기(*)
   • 그룹화 연산자: 괄호()
   • 텍스트 추가: 중괄호{}
   • 자동 번호 매기기: 달러 기호($)
4. 실전 활용: 복잡한 HTML 구조 순식간에 만들기
   • 네비게이션 메뉴 구조화
   • 데이터 리스트 및 테이블 생성
5. 에메트 설정 최적화 및 팁
   • 에디터 확장 기능 확인
   • 사용자 정의 스니펫 활용

---

에메트그래머, 왜 배워야 할까요?

HTML과 CSS 코드를 작성하는 것은 웹 개발의 기본 중의 기본입니다. 하지만 수많은 꺾쇠 괄호(<, >)와 닫는 태그를 일일이 입력하는 작업은 비효율적이며, 개발자의 소중한 시간을 낭비하게 만듭니다. 여기서 **에메트(Emmet)**가 등장합니다. 에메트그래머는 CSS 셀렉터와 유사한 간결한 구문을 사용하여 몇 초 만에 복잡한 마크업 구조를 생성할 수 있게 해주는 도구입니다. 이는 개발 속도를 획기적으로 높여주고, 오타로 인한 오류를 줄여주며, 더 중요한 로직 개발에 집중할 수 있게 해줍니다. 마치 마법 지팡이처럼 코딩 경험을 완전히 바꿔놓는 이 기술을 익히지 않을 이유가 없습니다. '코드가 길수록 숭고하다'는 오래된 신념은 버리셔도 좋습니다.

핵심 문법: 기본 구조와 셀렉터 활용

요소 생성의 기본: 태그 이름

에메트 구문의 가장 기본은 태그 이름을 입력하는 것입니다. 예를 들어, div를 입력하고 탭 키를 누르면 <div></div>가 완성됩니다.

• p $\rightarrow$ <p></p>
• ul $\rightarrow$ <ul></ul>
• header $\rightarrow$ <header></header>
  만약 태그 이름을 생략하고 #나 .만 입력하면, 기본적으로 div 태그로 간주됩니다.

속성 추가: ID와 클래스

CSS 셀렉터처럼 ID는 # 기호를, 클래스는 . 기호를 사용합니다.

• div#header $\rightarrow$ <div id="header"></div>
• p.text-center $\rightarrow$ <p class="text-center"></p>
• ul#menu.nav.active $\rightarrow$ <ul id="menu" class="nav active"></ul> (클래스는 연속해서 사용 가능)
  기본 속성 외의 다른 속성을 추가할 때는 대괄호([])를 사용합니다.
• a[href="#"][target="_blank"] $\rightarrow$ <a href="#" target="_blank"></a>
• input:text $\rightarrow$ <input type="text" name="" id=""> (특정 태그에 대한 별칭도 자주 사용됨)

형제 및 자식 관계 정의

HTML은 구조적인 언어이며, 요소들은 부모-자식 또는 형제 관계를 가집니다.

• 자식 연산자: > (Greater-than sign)
  • 특정 요소 안에 포함되는 자식 요소를 만들 때 사용합니다.
  • ul>li $\rightarrow$

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

• 형제 연산자: + (Plus sign)
  • 동일한 부모 아래에 나란히 위치하는 요소를 만들 때 사용합니다.
  • div+p+a $\rightarrow$

    <div></div>
    <p></p>
    <a></a>

• 상위 이동 연산자: ^ (Caret sign)
  • 자식 요소를 만든 후 다시 상위 레벨로 이동하여 형제 요소를 만들 때 사용합니다. 복잡한 구조를 단일 구문으로 만들 때 필수적입니다.
  • div>h1+p^footer $\rightarrow$

    <div>
        <h1></h1>
        <p></p>
    </div>
    <footer></footer>

고급 문법: 반복, 그룹화, 텍스트 추가

반복 연산자: 곱하기(*)

동일한 구조를 여러 번 반복하여 생성할 때 사용합니다. 리스트 항목(<li>)이나 그리드 항목을 만들 때 매우 유용합니다.

• li*5 $\rightarrow$
• <li></li> <li></li> <li></li> <li></li> <li></li>
• ul>li*3 $\rightarrow$
• <ul> <li></li> <li></li> <li></li> </ul>

그룹화 연산자: 괄호()

연산자의 우선순위를 제어하거나 복잡한 구조의 일부를 반복할 때 사용합니다. 일반적인 수학 계산의 괄호와 같은 역할을 합니다.

• (header>h1)+main+(footer>p) $\rightarrow$
• <header> <h1></h1> </header> <main></main> <footer> <p></p> </footer>
• (li>a)*3 $\rightarrow$이 구문은 li>a*3와 같이 사용하면 <li><a href=""></a><a href=""></a><a href=""></a></li>로 다르게 해석되므로, 그룹화는 필수적입니다.
• <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li>

텍스트 추가: 중괄호{}

요소 내부에 텍스트 콘텐츠를 삽입할 때 사용합니다.

• p{안녕하세요} $\rightarrow$ <p>안녕하세요</p>
• a[href="#"]{링크 텍스트} $\rightarrow$ <a href="#">링크 텍스트</a>

자동 번호 매기기: 달러 기호($)

반복 연산자와 함께 사용하여 순서가 있는 텍스트나 클래스 이름을 만들 때 사용합니다.

• li.item${아이템 $}*3 $\rightarrow$

  <li class="item1">아이템 1</li>
  <li class="item2">아이템 2</li>
  <li class="item3">아이템 3</li>

  $ 기호를 여러 개 사용하면 앞자리를 0으로 채워 자릿수를 맞출 수 있습니다. (li.item$$*3 $\rightarrow$ item01, item02, item03)

실전 활용: 복잡한 HTML 구조 순식간에 만들기

네비게이션 메뉴 구조화

웹사이트에서 가장 흔하게 사용되는 네비게이션 메뉴(nav > ul > li*N > a) 구조를 에메트그래머로 쉽게 만들 수 있습니다.

• 구문: nav>ul.gnb>li.item$*5>a[href="#"]{메뉴 $}
• 결과:

  <nav>
      <ul class="gnb">
          <li class="item1"><a href="#">메뉴 1</a></li>
          <li class="item2"><a href="#">메뉴 2</a></li>
          <li class="item3"><a href="#">메뉴 3</a></li>
          <li class="item4"><a href="#">메뉴 4</a></li>
          <li class="item5"><a href="#">메뉴 5</a></li>
      </ul>
  </nav>

  이렇게 단 한 줄의 코드로 복잡한 5개 항목의 메뉴 구조를 뚝딱 만들어냅니다.

데이터 리스트 및 테이블 생성

복잡한 테이블 구조도 그룹화와 반복 연산자를 활용하여 쉽게 생성할 수 있습니다. 테이블은 thead, tbody, tr, th, td 등 여러 단계의 요소가 필요합니다.

• 테이블 헤더(3열)와 본문(5행) 구조 구문:
  table>(thead>tr>th{제목 $}*3)+(tbody>tr*5>td{데이터}*3)
• 결과:

  <table>
      <thead>
          <tr>
              <th>제목 1</th>
              <th>제목 2</th>
              <th>제목 3</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>데이터</td>
              <td>데이터</td>
              <td>데이터</td>
          </tr>
          <tr>
              <td>데이터</td>
              <td>데이터</td>
              <td>데이터</td>
          </tr>
          <tr>
              <td>데이터</td>
              <td>데이터</td>
              <td>데이터</td>
          </tr>
          <tr>
              <td>데이터</td>
              <td>데이터</td>
              <td>데이터</td>
          </tr>
          <tr>
              <td>데이터</td>
              <td>데이터</td>
              <td>데이터</td>
          </tr>
      </tbody>
  </table>

에메트 설정 최적화 및 팁

에디터 확장 기능 확인

대부분의 최신 코드 에디터(VS Code, Sublime Text, Atom 등)에는 에메트가 기본 내장되어 있지만, 간혹 특정 파일 형식(*.html, *.css 등)에서 작동하지 않는 경우가 있습니다. 이 경우 에디터의 설정을 확인하여 에메트 기능을 활성화하거나, 에디터의 확장 기능 마켓플레이스에서 Emmet 플러그인이 제대로 설치되어 있는지 확인해야 합니다. 특히, Vue나 React와 같은 프레임워크의 커스텀 파일 형식(.vue, .jsx)에서는 에디터 설정에서 해당 파일 형식에 에메트 구문을 적용하도록 명시적으로 설정해야 합니다.

사용자 정의 스니펫 활용

에메트는 강력하지만, 개발자가 반복적으로 사용하는 매우 특수한 구조가 있을 수 있습니다. 예를 들어, 특정 프레임워크에서 요구하는 독특한 클래스 이름을 가진 카드 구조 등입니다. 이럴 때는 에디터의 스니펫 기능을 활용하여 에메트 구문을 사용자 정의 스니펫으로 등록할 수 있습니다.

• 예시: bcard라는 별칭을 사용하여 부트스트랩 카드 구조를 생성하도록 스니펫을 정의합니다.
  • 스니펫 내용: <div class="card"><img class="card-img-top"><div class="card-body"><h5 class="card-title"></h5><p class="card-text"></p></div></div>
  • 이제 bcard를 입력하고 탭을 누르면 전체 구조가 한 번에 완성됩니다. 에메트 자체의 강력한 문법을 사용자 지정 스니펫으로 포장하면 생산성을 극한으로 끌어올릴 수 있습니다.

에메트그래머를 숙달하면 코딩의 물리적인 노동을 줄이고, 개발자가 디자인과 로직에 더 집중할 수 있는 환경을 만들 수 있습니다. 지금 바로 에디터를 켜고, 몇 가지 구문을 연습해 보세요. 일단 익숙해지면 다시 이전 방식으로 돌아가기는 어려울 것입니다.