본문 바로가기

HTML&CSS

비주얼 스튜디오 코드 기초 - 4. 에밋(Emmit)과 약어(Abbreviation) 사용하기

반응형

비주얼 스튜디오 코드는 다양한 최신 에밋(Emmit)과 약어(Abbreviation) 기능을 모두 내장 기능으로 지원합니다.

초기 버전에서는 별도의 에밋, 또는 약어 확장(Extension)을 필요로 했지만, 최근 버전업에서 부터는 모두 내장 기능으로 지원하며, 더 이상 별도의 확장 프로그램 설치가 필요 없습니다.

 

에밋(Emmit)은?

 

Emmit은 에밋, 또는 에미트라고 발음하며, 약어(Abbreviation)를 사용해 반복되는 코드, 또는 구조를 가진 HTML, 또는 CSS, XML 코드를 빠르게 작성할 수 있도록 해주는 플러그인, 확장 프로그램을 말합니다. 코드 편집기, 또는 텍스트 편집기의 HTML 약어 기능을 정형화된 방식으로 표준화 한 것을 별도로 에밋(Emmet) 이라고 합니다.

텍스트 편집기, 또는 코드 에디터의 플러그인이나 확장 프로그램 기능이 있는 편집기 프로그램 들은 대부분 에밋 기능을 별도로 제공합니다.

비주얼 스튜디오 코드는 최근에 에밋 기능이 내장 기능으로 포함되면서 별도 확장 프로그램 없이 기본적으로 사용할 수 있게 되었습니다.

에밋(Emmit)은 일종의 코드 라이브러리, 또는 코드 스니펫(Snippet)으로 미리 정해진 문자로 태그를 조합해 약어 문자열을 입력하면, 약어를 원래의 코드로 대체해 확장해주는 기능입니다.

 

예를들어 

다음과 같이 HTML 에밋 기능을 지원하는 에디터에 입력하면

 

ul#menu>li*4>span

 

에밋 파싱이 되어 정상 에밋으로 판단되면 에밋 약어 오른쪽에 적용 가능한 에밋 목록이 표시됩니다.

에밋 목록에서 적용할 에밋을 화살표로 선택한 후(한개만 있으면 별도 선택 없이) 엔터키를 누르면 다음의 코드로 자동으로 확장이 됩니다.

 

<ul id="menu">
    <li><span></span></li>
    <li><span></span></li>
    <li><span></span></li>
    <li><span></span></li>
<ul>

 

코드 입력 효율을 극대화 할 수 있는 기능이므로 꼭 알아둘 필요가 있습니다.

 

비주얼 소튜디오 코드에서 에밋을 입력했는데 확장 목록이 오른쪽에 표시되지 않아 확장할 수 없는 경우 메뉴 "편집>Emmet: 약어 확장(Edit>Expand Abbreviation)" 을 선택하면 됩니다.

 

에밋(Emmet)에 대한 더 자세한 설명은 에밋 모듈의 제작자 홈페이지에서 찾을 수 있습니다.

https://emmet.io/

 

적용된 결과를 미리보기로 확인하고 싶으면 에밋 선택 목록의 항목 오른쪽 ">" 를 클릭하면 오른쪽에 미리 적용된 HTML 코드를 확인할 수 있습니다.

 

 

에밋(Emmit) 메타 기호 기초

에밋은 코드 확장을 위해 사용하는 기호와 방법이 정해져 있으며, 사용 방법에 맞춰 정해진 기호를 사용해야 합니다.

코드 확장을 위해 사용하는 에밋의 기호는 특별히 "메타 기호"라고 하며, 다음과 같은 몇가지 정해진 기호를 사용합니다.

 

에밋에서 사용하는 메타 기호는 다음과 같습니다.

메타 기호 설명 사용 방법
> 자식 요소. 태그명 뒤에 붙여서 여는 태그와 닫는 태그 사이에 줄바꿈을 하고 들여쓰기를 합니다. CSS에서 바로 밑의 자식 요소만을 선택하는 선택자 기능과 같습니다.
하위 태그를 추가하는데 사용합니다.
div>p>span
+ 형제 요소. CSS의 병렬 태그 선택자와 같은 기능을 합니다. 앞 태그의 닫는 태그 뒤에 줄바꿈을 하고 다음 태그를 추가합니다.
동위의 태그를 추가하는 기능을 합니다.
div>p+p>span+span+span
div+div+p+p
^ 상위 요소. 메타 문자 앞에 위치한 태그의 한단계 상위에 태그를 추가합니다. 변경된 순위는 뒤에 나오는 태그들에도 동일하게 영향을 미칩니다. div>p>span+span^p
. 클래스. 마침표. 태그명 뒤에 붙여서 클래스를 부여합니다. div.container>nav.menu#gnav
# 아이디. 태그 뒤에 붙여서 아이디(ID)를 부여합니다. div#globalnav>
{} 텍스트 문자열을 표시합니다. 변수와 메타 기호와 조합할 수 있습니다. p*3>{문자열}
p>span*4>{문자열$}
[] CSS의 속성 선택자와 같은 개념으로 태그 속성을 추가하는데 사용하며, 커스텀 속성을 정의할 수도 있습니다.  
() 하위 트리를 그룹으로 묶습니다. 수식에 사용하는 괄호와 마찬가지로 에밋을 실행하는 우선 순위나 실행 단위를 구분하는데 사용합니다.
여러 개의 서브 트리를 병렬로 표시할 때 사용할 수 있습니다.
div.container>(article>p>span)+footer#footer>ul>li*4
* * 뒤에 숫자를 붙여 반복 회수를 지정합니다. div>ul>li*4
$ 1부터 시작해 1씩 증가하는 변수값을 적용합니다.
$$, $$$ 과 같이 중첩하면, 앞이 0으로 채워진 1부터 시작하는 숫자를 표시합니다.
태그, 클래스, 아이디, 문자열에 모두 사용 가능합니다.
p>span*4>{문자열$$}
div.item$$$*5
@ $ 메타 기호와 조합해 사용하며, 숫자의 시작 값과 방향(증가/감소)를 지정합니다.
$ 메타 기호 없이 단독으로는 사용할 수 없습니다.
* 비주얼 스튜디오 코드에서는 시작 값만 지정 가능(1.5버전 기준)
div.item$@5*5
p>span.keyword$$@3*4
| 파이프 필터. 유닉스/리눅스 셸의 파이프와 같은 기능을 합니다. 앞서 나오는 태그를 선택적으로 처리하는 용도로 사용하며 "|" 뒤에 알파벳으로 용도를 표시해 필터 처리를 합니다.
"c"는 코멘트(중요 태그의 코멘트 생성), t는 트림(선택적 삭제) 기능을 합니다.
div.content>p>span|c

* 에밋(Emmet) 메타 기호는 프로그램에 따라 구현이 다소 다를 수 있습니다. 여기서는 비주얼 스튜디오 코드를 기준으로 설명합니다.

 

에밋을 사용하면 태그, 클래스, 아이디를 부여한 HTML 구조 뿐만 아니라 반복되는 문자열, 숫자 넘버링까지 표현이 가능합니다.

 

#page>div.logo+ul#globalnav>li*5>a{하이퍼링크 $}

 

에밋을 입력하면 다음과 같이 텍스트 문자열과 순차적으로 증가하는 숫자까지 표현할 수 있습니다.

 

<div id="page">
    <div class="logo"></div>
    <ul id="globalnav">
        <li><a href="">하이퍼링크 1</a></li>
        <li><a href="">하이퍼링크 2</a></li>
        <li><a href="">하이퍼링크 3</a></li>
        <li><a href="">하이퍼링크 4</a></li>
        <li><a href="">하이퍼링크 5</a></li>
    </ul>
</div>

 

 

 

에밋(Emmet) 활용 예

문자열 구성

문자열과 태그를 조합하는 다양한 표현을 할 수 있습니다.

 

다음과 같은 에밋은

 

p>span{여기를}+a.red{클릭}+span{해주세요}

 

다음과 같은 HTML 코드를 생성합니다.

<p>
    <span>여기를</span>
    <a href="" class="red">클릭</a>
    <span>해주세요</span>
</p>

 

넘버링

태그, 클래스, 아디디, 텍스트 문자열에 1부터 시작해서 1씩 증가하는 숫자를 부여할 수 있습니다.

 

다음과 같은 에밋은

 

div#content.page>p.item$*5>span>{컨텐츠$$}

 

다음과 같은 HTML 코드로 확장됩니다.

<div id="content" class="page">
    <p class="item1"><span>컨텐츠01</span></p>
    <p class="item2"><span>컨텐츠02</span></p>
    <p class="item3"><span>컨텐츠03</span></p>
    <p class="item4"><span>컨텐츠04</span></p>
    <p class="item5"><span>컨텐츠05</span></p>
</div>

 

아이디와 클래스 다중 적용

클래스와 아이디는 태그 하나에 여러 개를 적용할 수 있습니다. 적용된 클래스와 아이디는 표기된 순서대로 나열됩니다.

클래스는 표기된 순서대로 class="" 안에 공백으로 구분해 표시됩니다.

 

다음과 같은 에밋은

 

header.nav#nav+div.content.lg-10.md-8.sm-12+aside.sidebar.lg-2.md-4.sm-hide+footer.lg-12

 

다음과 같은 HTML 코드로 확장됩니다.

<header class="nav" id="nav"></header>
<div class="content lg-10 md-8 sm-12"></div>
<aside class="sidebar lg-2 md-4 sm-hide"></aside>
<footer class="lg-12"></footer>

 

페이지 구조 생성

시멘틱 태그로 기본적인 페이지 구조를 만들 수 있습니다.

다음과 같이 에밋을 입력하면

 

(header>nav>ul>li*5>{메뉴$})+div.container>article+aside^footer>ul>li*4>{푸터메뉴$}

 

다음과 같은 구조를 한번에 만들 수 있습니다.

<header>
    <nav>
        <ul>
            <li>메뉴1</li>
            <li>메뉴2</li>
            <li>메뉴3</li>
            <li>메뉴4</li>
            <li>메뉴5</li>
        </ul>
    </nav>
</header>
<div class="container">
    <article></article>
    <aside></aside>
</div>
<footer>
    <ul>
        <li>푸터메뉴1</li>
        <li>푸터메뉴2</li>
        <li>푸터메뉴3</li>
        <li>푸터메뉴4</li>
    </ul>
</footer>

 

 

에밋(Emmet) 옵션 설정하기

비주얼 스튜디오 코드는 에밋을 사용하기 위한 다양한 옵션 설정 항목들이 제공됩니다.

옵션 항목 및 설정 방법은 다음과 같습니다.

 

"파일>기본설정>설정(File>Preferences>Settings )" 을 선택해 환경 설정 탭을 연후, 설정 검색 입력난에 "Emmet"을 입력하면 에밋 관련 옵션 항목들만 표시됩니다. 옵션 항목 별로 별도 설명이 붙어 있으므로 원하는 옵션을 켜거나 꺼서 사용하면 됩니다.

 

 

에밋 약어(Abbreviation)

 

HTML 태그명과 메타 기호로 구조를 확장하는 에밋(Emmit)에 추가로 미리 정해킨 키워드(비주얼 스튜디오 코드에서는 스니핏 접두어, 또는 트리거 텍스트로 칭함)를 입력하면 대응하는 미리 지정한 임의의 HTML 코드 블록(스니핏)으로 대체를 해주는 기능입니다.

 

대표적인 HTML 약어 기능을 예를 들어 보겠습니다.

비주얼 스튜디오 코드에서 새 코드 편집기 탭을 연 후 ".html" 확장자를 가진 HTML 파일로 저장합니다.

빈 코드 에디터 창에 "!"를 입력하면 미리 정해진 약어 목록이 표시되면서 "!"로 시작하는 선택 가능한 약어가 표시됩니다.

비주얼 스튜디오 코드에는 "!"와 "!!!" 2개의 약어가 사전 등록되어 있습니다.

"!"를 선택하면 다음과 같이 "!"를 대체하는 HTML 구조 코드가 입력됩니다.

 

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

 

이 코드 태그들을 직접 하나씩 입력한다고 생각하면 코드 효율성을 얼마나 높일 수 있는지 짐작이 갈 것입니다.

약어는 사용자가 직접 등록해서 사용할 수 있으며, 약어 및 확장 코드 스니펫을 자유롭게 정의할 수 있습니다.

 

"!" 외에 사전 정의된 에밋 약어 목록은 다음 경로에서 확인할 수 있습니다.

 

github.com/emmetio/snippets/blob/master/html.json

 

 

 

에밋으로 코멘트 작성

필터 기능을 사용하면 중요 태그에 대한 코멘트를 자동으로 작성할 수 있습니다.

중요 태그는 가장 가까운 상위의 클래스나 아이디가 있는 태그를 말합니다.

 

예를 들어

 

div#content>p>span|c

 

로 코멘트 필터를 작성했다면 다음과 같이 코멘트가 자동으로 작성됩니다.

<div id="content">
    <p><span></span></p>
</div>
<!-- /#content -->

필터 앞쪽으로 가장 가까운 상위의 중요 태그는 "div#content" 가 되므로 <div></div> 태그와 동위 위치에 코멘트가 작성됩니다.

반응형

닫기