html에서 태그 감싸는 방법

html에서 텍스트나 태그를 감싸는 태그를 만들때 사용하는 방법입니다.
실무에서 많이 사용하고, 무척이나 유용한 방법이여서 소개합니다.

이 방법은 emmet 플러그인이 설치되어 있어야 합니다.

emmet 설치방법은 이전 블로그 글을 참고하세요.

emmet 설치 및 사용방법

아래 이미지를 보시면 이해가 될겁니다.

텍스트나 태그가 있고, 해당 텍스트를 블럭을 지정하고 Ctrl+Shift+G 를 누릅니다.
여기서 텍스트가 줄이 안맞아도 상관없습니다. 줄까지 잘 맞쳐줍니다.
그럼 서브라임텍스트 하단에 창이 나타납니다.
이제 젠코딩처럼 입력하면 됩니다.

여기서 한가지 팁을 더 드리자면 $ 입니다.
이것은 숫자를 나타냅니다.
그런데 $# 을 누르면 해당 텍스트가 링크에 포함됩니다. 또한 텍스트가 들어가야 할곳에도 들어갑니다.

말로는 힘드니 이미지를 보세요.

단축키의 순서는 아래와 같습니다.

Ctrl+Shift+G

ul>li*>a[href="$#"]{$#}

[] 속성을 넣어줍니다.
{} 텍스트를 넣어줍니다.
$# 해당 텍스트를 지정합니다.