[VS Code] Html에 Emmet 단축키 사용해보기

Html 작업 속도를 향상하기 위해 Emmet 단축키를 사용해 보았다.

사용하면서 유용하다 느꼈던 몇 가지를 정리해보도록 하겠다.

Emmet 단축키

1.!

vs code의 빈 페이지에서 ! + enter 입력 시, 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>

2. Wrap with Abbreviation

✨사용 전에 Vs Code에서 Wrap with Abbreviation 단축키를 먼저 설정해 주자.

톱니바퀴 아이콘 클릭
바로 가기 키(ctrl + k ctrl + s) 선택
Emmet:Wrap With Abbreviation 검색
+ 기호 클릭 후 원하는 키 조합 입력

2.1 Wrap with Abbreviation (약어로 감싸기)

약어를 가져와서 확장한 후 생성된 스니펫의 마지막 요소에 현재 선택한 콘텐츠를 배치해 줌.

선택 항목 없을 시, 자동으로 “Match Tag Pair”를 호출해 래핑.

<div id="page">
# 래핑하려는 태그 or 태그 내용 안에 캐럿 배치 후 Wrap with Abbreviation 실행
    <p>hello</p>  
</div>

# .wrapper>h1{Title}+.content 입력하면
<div id="page">
    <div class="wrapper">
        <h1>Title</h1>
        <div class="content">
            <p>hello</p>
        </div>
    </div>
</div>

2.2 Wrapping individual lines (개별 라인 래핑)

각 단락을 목록 태그로 묶어야 할 때 <ul>/<li> uk>li*를 사용해 반복 가능.

줄 바꿈 된 줄 수만큼 반복됨

<div id="page">
# 감싸고 싶은 요소 선택
    text1
    text2
    text3

    about text
</div>

# nav>ul.nav>li.nav-item$*>a 입력하면

<div id="page">
    <nav>
        <ul class="nav">
            <li class="nav-item1">
                <a href="">text1</a>
            </li>
            <li class="nav-item2">
                <a href="">text2</a>
            </li>
            <li class="nav-item3">
                <a href="">text3</a>
            </li>
        </ul>
    </nav>

    about text
</div>

2.3 Removing list markers (목록 마커 제거)

텍스트를 복사하면 다음과 같은 목록 블록이 표시된다.

이 목록을 ul>li* 를 사용해 약어로 묶으려 하면 목록 표시가 그대로 남아있음.

* Unordered item 1
* Unordered item 2
* Unordered item 3

1. Ordered item 1
2. Ordered item 2
3. Ordered item 3

# 약어로 묶었을 때
<ul>
    <li>* Unordered item 1</li>
    <li>* Unordered item 2</li>
    <li>* Unordered item 3</li>
</ul>

목록 표시를 수동으로 제거하려면 매우 귀찮음. 그럴 때, 해당 emment (|t) 를 사용해 일괄 제거 가능

<div id="page">
    1. text1
    2. text2
    3. text3
</div>

# 약어로 묶어주는 명령어 뒤에 |t 필터를 추가하여 목록 제거
# nav>ul.nav>li.nav-item$*>a|t

<div id="page">
    <nav>
        <ul class="nav">
            <li class="nav-item1">
                <a href="">text1</a>
            </li>
            <li class="nav-item2">
                <a href="">text2</a>
            </li>
            <li class="nav-item3">
                <a href="">text3</a>
            </li>
        </ul>
    </nav>
</div>

2.3 Controlling output position (출력 위치 제어)

보통 emmet로 뭔가를 감싸면 기존의 내용이 최근 추가해 준 요소 내부에 위치해 있다.

하지만 $# 자리 표시자를 사용해 출력 위치를 제어해 줄 수 있다.

주의할 점은, $#은 약어 구문이 아니라서 속성값이나 텍스트 노드 안에 넣어줘야 한다.

ex ) ul>li[title=$#]*>{$#}+img[alt=$#]

<div id="page">
# 감싸고 싶은 요소 선택
    text1
    text2
    text3
    text4
</div>

# ul>li[title=$#]*>{$#}+img[alt=$#] 입력하면
<div id="page">
    <ul>
        <li title="text1">
            text1
            <img src="" alt="text1">
        </li>
        <li title="text2">
            text2
            <img src="" alt="text2">
        </li>
        <li title="text3">
            text3
            <img src="" alt="text3">
        </li>
        <li title="text4">
            text4
            <img src="" alt="text4">
        </li>
    </ul>

</div>

3. Remove Tag

✨사용 전에 Vs Code에서 Remove Tag 단축키를 먼저 설정해 주자.

톱니바퀴 아이콘 클릭
바로 가기 키(ctrl + k ctrl + s) 선택
Emmet:Remove Tag 검색
+ 기호 클릭 후 원하는 키 조합 입력

Remove Tag는 선택한 태그를 빠르게 제거해 주고 들여 쓰기를 조정해 줌.

<div id="page">
    <h1>제목</h1>
    <p>blabla</p>
</div>

# Remove Tag 실행 시

<h1>제목</h1>
<p>blabla</p>

키 바인딩

Vs Code용 Emmet 키 바인딩 세트

어떤 키에 무엇을 매핑해야 할지 모르겠는 경우 사용하면 좋다.

https://marketplace.visualstudio.com/items?itemName=agutierrezr.emmet-keybindings

Emmet Keybindings - Visual Studio Marketplace

Extension for Visual Studio Code - Improve your productivity through new keyboard shortcuts for Emmet.

marketplace.visualstudio.com

참고 페이지

Emmet cheat sheet

Cheat Sheet

Download cheat sheet as printable PDF A5

docs.emmet.io

Emmet documentation

Emmet Documentation

Emmet is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow: Demo | ~~~ tooltip: Type CSS-like abbreviation type: ul#nav>li.item$*4>a{Item $} wait: 1000 tooltip: Run “Expand Abbreviation” action to expand it into HTML ::: “