[VSCode] 명령팔레트로 Emmet 사용하기(Emmet wrap with abbreviation).

vscode에서 Emmet은 기본 내장되어 있다.

간단하게 설명하자면 Emmet은 단축어를 사용하여 html 또는 css를 짧게 작성하고 tab키(단축키)를 누르면 

긴 태그를 완성하는데 기존 html 문서에서 emmet을 사용할 수 있다.

그럼 왜 명령팔레트를 이용하여 Emmet을 사용해야 하는가?

 

이전 sublime text tool을 이용했던 나로선 이 기능이 작업 능률을 올리는데 꼭 필요하다고 느낀다.

vscode로 변경하면서 sublime 에서 사용했던 이 기능(Ctrl + Shift + G)이 vscode에도 있다고 생각한다. 한번 찾아보았다.

역시 존재한다. 바로 설명 들어가보자.

 

1. 명령팔레트 실행
Ctrl + Shift + P

2. 'wrap' 이라고 치고  Emmet: Wrap individual Lines with Abbreviation 영역에서 Enter!

3. 아래 화면에서 Emmet 명령어를 사용한다.

 

사용하는 이유는 예를 들어 설명하겠다.

<ul>
    내용입니다. 1
    내용입니다. 2
    내용입니다. 3
    내용입니다. 4
    내용입니다. 5
    내용입니다. 6
</ul>

위와 같은 내용을 리스트로 만들어야 한다고 가정하자.

대부분 디자인에서 글씨를 긁어오면 저런 모습일꺼다. 다른 방법으로 내용1 하나 긁어오고 다음 내용2 긁어오고....

이런 수고를 들이지 말자. 다 긁어왔다. 그럼 저 1,2,3.... 부분을 li 태그로 각각 묶고 싶다면

Emmet 명령창에서 li* 작성 후 Enter!

<!-- 
	명령어는 li*
-->
<ul>
    <li>내용입니다. 1</li>
    <li>내용입니다. 2</li>
    <li>내용입니다. 3</li>
    <li>내용입니다. 4</li>
    <li>내용입니다. 5</li>
    <li>내용입니다. 6</li>
</ul>

 

손쉽게 각각 li를 추가 하였다.

무엇보다 이 부분은 실무를 하다보면 크게 느끼는 부분일 것이다.

많이 도움이 되었다면 광고 클릭~ 부탁드립니다. 작은도움이 저에겐 큰 힘이 됩니다.

부족한 부분이나 도움이 되셧다면 댓글 부탁드리면 추가 보충사항 또한 댓글 부탁 드립니다. 감사합니다. ^^