[HTML] HTML 태그 단축키, emmet의 개념과 사용법

  - 목차

1.  HTML에서 emmet이란 무엇인가?
2. emmet의 기본 문법 및 사용 예제

 

1. HTML에서 emmet이란 무엇인가?

  emmet은 우리가html 코드를 더욱 효율적으로 작성할 수 있게끔 도와주는 기능들을 제공한다. emmet은 텍스트(HTML언어)편집을 도와주는 플러그인이며 대부분의 텍스트 에디터에 통합돼있다. VS code와 Intellij IDEA 기준으로 문법에 맞게 코드 작성후 tab버튼을 눌러주면 된다. 간단한 태그들부터 복잡한 형태의 태그들까지 모두 구현이 가능하게끔 돼있다. 개인적으로는 CSS의 선택자 문법과 비슷하다고 생각했다.

 

 

 

2. emmet의 기본 문법 및 사용 예제

  emmet은 다음과 같이 작성할 수 있다. <>꺽쇠안의 태그명과 > 를 함께 입력 후 tab을 누를 시 열리는 태그(오픈태그)와 닫히는 태그(클로즈 태그)가 생성된다. 예를 들어 div>로 작성 후 tab을 누를 시 <div></div>가 생성된다. 그리고 태그 안에 속하는 태그 역시 지정할 수 있다. 여기서부터는 코드를 보며 직접 실습해보길 바란다.

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

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

div>ul>li*5
<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

div>ul>li^^div
<div>
    <ul>
        <li></li>
    </ul>
</div>
<div></div>

<div class="ex1"></div>
<div id="ex1"></div>


ul>.item*3

<ul>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
</ul>

ul>li.item$@3*5
<ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
</ul>

emmet으로 id나 class 속성을 줄 때에는 앞의 부모태그에 해당하는 자식태그가 속성으로 주어지며 생성된다. 예를 들면 ul태그는 li와 부모자식관계이다. 이 때 ul> 의 형태로 태그를 연 후에 .class명 혹은 #id명으로 작성하게 되면 li태그에 해당 속성이 적용되며 태그가 생기게 된다. 같은 원리로 행렬표를 생성하는 <table>태그도 연속적으로 id나 클래스만 지정하며 태그를 열어도 자동적으로 <th> <tr>태그가 열리며 생성된다.

 

 

설명이 다소 미약한 면이 있지만 우선 기본적인 emmet의 개념은 이 정도인 것 같다. 사용자가 어떻게 응용하느냐는 개별적으로 태그를 얼마나 많이 알고 어떻게 사용하느냐의 문제이다. 그래도 HTML자체에 다양한 코드가 있다보니 emmet을 이용해서도 정말 효율적으로 태그를 만들 수 있기는 하지만 초보자가 사용하기엔 조금 복잡한 감이 있는 것 같다.