-
HTML 기초 - 9(完) | Emmet 사용하기프로그래밍 언어/HTML 2020. 5. 21. 14:51
Emmet 사용하기
Emmet 이란 HTML 이나 CSS 를 작성할 때 작성 시간을 줄여주는 확장 기능이다. HTML 문서를 작성할때 그 구조를 짜는데 시간을 들여야지, 작성하는 단순 타자 치는 것에 시간을 들여서는 안 된다. 그렇기에 이 확장 기능을 이용하여 타자 치는 시간을 획기적으로 줄여보자.
드디어 우리가 지금까지 써 왔던 VSCode 의 강력한 기능을 활용해 볼 시간이 되었다. VSCode 에는 Emmet 확장기능이 자동으로 설정되어 있다. 따라서 뭔가 더 설치할 필요도 없이 그냥 사용법만 익혀서 바로 써보면 된다.
생각보다 간단하니 하나씩 차근차근 익혀보자.
기본적인 사용법
Emmet 기본 위와 같이 VSCode 에서 우리가 그동안 배웠던 태그를 아무거나 하나 타이핑해보자. 사진처럼 저렇게 뭔가 예시 같은 게 쭉 나열되지 않는가? 이게 Emmet 이다. 저 상태에서 Enter 를 치면 기본적인 form 태그의 형태가 자동 완성되어 입력될 것이다. 여러분도 지금까지 은연중에 몇 번 사용해봤을 것이다. 이런 기능을 좀 더 자세하게 배운다면 엄청난 효율을 끌어낼 수 있다.
혹시나 다른곳을 한번 클릭했다가 다시 돌아오거나 하면 Emmet 기능이 바로 작동하지 않을 수도 있다. 그럴 때는 Window 기준으로 Ctrl + Spacebar 를 눌러보자. 자동으로 Emmet 목록이 쭉 나열될 것이다. 뭔가 힌트가 필요할 때마다 Ctrl + Spacebar 를 눌러보자. 생각지도 않았던 신기한 것들을 다 자동완성해준다.
또한 한가지 주의점을 미리 알려주겠다. 아래에서 배워나갈 Emmet 단축키들을 사용할때에는 띄어쓰기를 하지 말자. 글자나 문자를 서로 띄우게 되면 Emmet 이 자동완성하지 못한다.
이 주의점을 잘 생각하며 아래에서 하나씩 배워나가 보자.
HTML 기본 틀 자동완성
Emmet - ! '!' 느낌표 하나를 치면 Emmet 이 HTML5 기본 틀을 자동완성시켜준다.
<!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>Emmet 실행 결과 이러한 결과가 나온다.
엄청나지 않은가? 난 진짜 처음에 이거 해보고는 깜짝 놀랐다.
이 틀에서 추가할 거 추가하고 뺄 거 빼면서 사용하면 되는데, 보통 난 이대로 사용한다.
기본적인 태그 완성
div이런 식으로 태그를 쓸 때 꺽쇠 부분을 모두 제외하고 태그 이름만 쳐보자. 그리고 Emmet 으로 자동완성을 해주면 알아서 여는 태그와 닫는 태그를 앞뒤로 만들어준다. 똑똑하게도 닫는 태그가 없는 input 같은 태그는 여는 태그만 만들어준다.
그 외의 필수적인 속성이 들어가야 하는 몇몇 태그는 속성을 적을 칸도 미리 만들어서 완성시켜준다.
자식요소 만들기
div>ul>li자식요소? 자식요소라 하면 태그와 태그 사이에 들어가 있는 다른 태그를 말한다. 위와 같이 '>' 를 사용하면 자식요소의 형태로 자동완성시킬 수 있다. div 태그 안에 ul 태그가 들어가고, 그 ul 태그 안에 li 태그가 들어가는 것이다.
<div> <ul> <li></li> </ul> </div>자동완성을 하면 이러한 형태가 된다.
형제요소 만들기
div+h1+p형제요소라 하면 태그와 태그가 같은 위상에 존재하는 것을 말한다. 위와 같이 '+' 를 사용하면 형제요소의 형태로 자동완성시킬 수 있다.
<div></div> <h1></h1> <p></p>이런 형태가 된다.
여러 번 반복하기
ul>li*5HTML 을 작성하다 보면 같은 태그를 여러 번 복사 붙여 넣기 해야 하는 경우가 있다. 그럴때에는 일일이 복붙하지 말고 '*' 를 이용해 자동완성시키자.
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>이렇게 ul 안에 li 태그를 넣는데, 이때 li 태그는 자동으로 5번 반복돼서 자동완성된다.
ul*2>li*3만약에 이렇게 하면 어떻게 자동완성될까?
li 가 3번씩 들어간 ul이 총 2번 반복되어 자동완성된다.
<ul> <li></li> <li></li> <li></li> </ul> <ul> <li></li> <li></li> <li></li> </ul>이렇게 의도한 대로 자동완성된다.
그룹 만들기
위에서 배웠던 것들을 모두 활용하여 엄청 복잡한 형태를 한 번에 자동완성시켜보자.
크게 form 태그와 ul 태그가 있는데, form 태그 안에는 input 태그가 3번씩 들어가고 이러한 form 태그는 총 2개가 있다. ul 태그안에는 li 태그와 span 태그가 들어있는데 li 는 4개 span 은 2개 들어있다. 이걸 어떻게 표현할까?
form*2>input*3+ul>li*4+span*2이렇게 하면 될까?
<form action=""> <input type="text"> <input type="text"> <input type="text"> <ul> <li></li> <li></li> <li></li> <li></li> <span></span><span></span> </ul> </form> <form action=""> <input type="text"> <input type="text"> <input type="text"> <ul> <li></li> <li></li> <li></li> <li></li> <span></span><span></span> </ul> </form>으악! 망해버렸다. form 태그와 ul 태그를 '+' 를 이용해 형제관계로 만들고 싶었는데 앞에 있던 '>' 때문에 ul 태그가 form 태그의 자식요소가 되어버리고 input 태그와 형제요소가 되어버렸다.
이렇게 복잡할 때는 그룹을 만들어 해결하면 된다. 그룹은 소괄호 '()' 를 이용해 만든다.
(form*2>input*3)+(ul>li*4+span*2)이렇게 괄호를 사용해 무엇과 무엇이 형제관계인지 명확히 해주면 쉽게 작성할 수 있다.
<form action=""> <input type="text"> <input type="text"> <input type="text"> </form> <form action=""> <input type="text"> <input type="text"> <input type="text"> </form> <ul> <li></li> <li></li> <li></li> <li></li> <span></span> <span></span> </ul>짠! 이렇게 원하던 결과가 나왔다.
텍스트 작성하기
h1{List}+ul>li{list}*3여는 태그와 닫는 태그 사이에 적힐 텍스트를 미리 자동완성시킬 수 있다. 위와 같이 태그 뒤에 중괄호 '{}' 를 이용하여 그 태그에 사용할 텍스트를 작성할 수 있다.
<h1>List</h1> <ul> <li>list</li> <li>list</li> <li>list</li> </ul>이러한 결과가 나온다.
아이템 Numbering
위의 '텍스트 작성하기' 의 예시에서 li 의 텍스트를 list1, list2, list3 처럼 자동으로 늘어가게 자동완성시킬 수는 없을까?
ul>li{list$}*5이렇게 '$' 를 이용하면 된다. 하나씩 늘어날 숫자 부분을 '$' 로 처리해서 반복하게 되면, 자동으로 숫자를 하나씩 늘려서 자동완성시켜준다.
<ul> <li>list1</li> <li>list2</li> <li>list3</li> <li>list4</li> <li>list5</li> </ul>와우! 말도 안 된다.
ul>li{list$@3}*5이번엔 처음 시작하는 숫자를 바꿔보자. 위와 같이 '$' 뒤에 '@' 를 써주고 시작할 숫자를 써주자.
<ul> <li>list3</li> <li>list4</li> <li>list5</li> <li>list6</li> <li>list7</li> </ul>와우!! 3부터 시작해서 1씩 숫자가 올라가며 자동완성되었다.
ID 속성 부여하기
h1#title태그에 id 속성을 부여해서 자동완성시키려면 어떻게 해야 할까? 위와 같이 '#' 을 이용하자.
<h1 id="title"></h1>이렇게 h1 태그에 id 속성이 자동 부여되어 생성되었다.
#title이때 위와 같이 아무런 태그 언급 없이 바로 '#' 을 사용하면 자동으로 div 태그가 사용될 것이다.
<div id="title"></div>지금은 못 느끼겠지만 CSS 를 하다 보면 div 태그를 어마 무시하게 사용할 것이다. 그래서 자주 쓰는 div 는 작성 시간을 조금이나마 줄이기 위해 이렇게 아무것도 쓰지 않고 바로 '#' 을 사용해도 된다.
CLASS 속성 부여하기
h1.title이번엔 태그에 class 속성을 부여해보자. class 속성은 '.' 을 이용하여 부여할 수 있다.
<h1 class="title"></h1>이렇게 class 속성 역시 자동완성시킬 수 있다.
.main.main-title마찬가지로 class 에서 역시 id 와 마찬가지로 아무 태그도 언급하지 않으면 자동으로 div 태그가 사용된다. 또한 class 는 id 와 다르게 하나의 태그가 여러 class 속성을 가질 수 있다. 따라서 위와 같이 '.' 을 계속 연결하면서 사용하면 다수의 class 를 동시에 자동완성시킬 수 있다.
<div class="main main-title"></div>실제 자동 완성된 모습에서 class 는 띄어쓰기로 나뉘게 된다.
그 외의 여러 속성 부여하기
input[type="password" name="PW" placeholder="Enter Password Please"]id 나 class 이외의 속성을 부여하기 위해서는 대괄호 '[]' 를 이용한다. 속성="값" 의 형태로 대괄호 속에 적어나가며 다른 속성끼리는 띄어쓰기로 구분한다.
<input type="password" name="PW" placeholder="Enter Password Please">이렇게 위와 같이 원하는 속성들이 자동 완성되었다.
Emmet 정리하기
복잡한 것 같지만 쓰다 보면 익숙해질 것이다. 한번 익숙해지면 HTML 작성 속도가 말도 안 되게 높아진다. 꼭! 익히도록 하자. 그럼 마지막으로 일상에서는 안 쓰일 정도의 복잡한 Emmet 예시를 한번 보여주겠다. 하나씩 분석해보면서 위의 내용을 제대로 이해했는지 확인해보자.
Emmet
!(body 태그 안)
h1{Hello!}+p{This is Emmet Practice}+(.form-area>form[method="get"]*2>(label[for="$"]{$}+input[type="text" value="Text"]#$)*3+input[type="submit"])+(.list-area>(ul*2>li{List$}*3)+(ol>li{ordered list $}*5))결과
<!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> <h1>Hello!</h1> <p>This is Emmet Practice</p> <div class="form-area"> <form action="" method="get"> <label for="1">1</label> <input type="text" value="Text" id="1"> <label for="2">2</label> <input type="text" value="Text" id="2"> <label for="3">3</label> <input type="text" value="Text" id="3"> <input type="submit"> </form> <form action="" method="get"> <label for="1">1</label> <input type="text" value="Text" id="1"> <label for="2">2</label> <input type="text" value="Text" id="2"> <label for="3">3</label> <input type="text" value="Text" id="3"> <input type="submit"> </form> </div> <div class="list-area"> <ul> <li>List1</li> <li>List2</li> <li>List3</li> </ul> <ul> <li>List1</li> <li>List2</li> <li>List3</li> </ul> <ol> <li>ordered list 1</li> <li>ordered list 2</li> <li>ordered list 3</li> <li>ordered list 4</li> <li>ordered list 5</li> </ol> </div> </body> </html>와... 이게 되네
실제로는 이렇게까지 Emmet 을 길게 쓰지 않는다. 조금씩 끊어서 필요한 만큼만 쓰는 게 더 효율적이다.
다만 이 예제를 완벽히 이해할 정도의 실력이 된다면, Emmet 을 누구보다 자유롭게 사용할 수 있을 것이다!
추가적으로 여기 쓰였던 태그들과 속성들이 이해가 되지 않는다면, 반드시 해당 설명글로 다시 넘어가서 복습하고 마치도록 하자!
마치며...
지금까지 HTML 기초 정리 글이었다. 강의라고도 하기 뭐하고, 그저 내가 배웠던 내용을 최대한 간단하고 쉽게 정리해보려고 시작한 것이었다. HTML 을 배워보려는 사람들에게 많은 도움이 되었길 바라며, CSS 정리 글로 다시 돌아오겠다.
HTML 을 다 배웠다면 바로 CSS 로 넘어오도록 하자. HTML 과 CSS 는 한 세트나 다름없으니까.
그동안 HTML 기초 글들을 봐주신 분들께 모두 감사드리며, 잘못된 부분이나 수정사항은 언제든지 지적해주면 감사하겠다. 나 역시 열심히 배우고 있는 입장으로, 여러분의 지적사항이나 응원 댓글은 많은 힘이 될 것이다. 그럼 안녕.