🌈 Emmet
- Emmet은 강력한 자동완성 기능 등으로 HTML 작성 속도를 크게 향상시켜주는 플러그인임
- !, ., #, +, >, $ 등을 tap과 함께 사용하여 반복적인 코드 작성을 줄일 수 있음
🔥 Exclamation mar(!)
🔥 Curly Bracket({}) & Asterisk(
*)🔥 Period(.) & Hashtag(#)
🔥 Plus(+) & Greater-than sign(>)
🔥 Dollar Sign($)
1. Exclamation Point(!)
- html 문서의 기본 구조를 손쉽게 자동완성 할 수 있음
- 🔍 사용법 : ! & [tap key] ⇢ 아래 내용이 자동완성됨
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
2. Curly Bracket({}) & Asterisk(*)
- Asterisk(
*) 는 숫자만큼 반복하여 자동완성 시켜줌- Curly Bracket({})을 태그 옆에 붙이고 안에 내용을 넣어주면, content를 채움
- 🔍 . 사용법 : h1{hello emmet}*10 & [tap key]
<h1>hello emmet</h1> <h1>hello emmet</h1> <h1>hello emmet</h1> <h1>hello emmet</h1> <h1>hello emmet</h1> <h1>hello emmet</h1> <h1>hello emmet</h1> <h1>hello emmet</h1> <h1>hello emmet</h1> <h1>hello emmet</h1>
3. Period(.) & Hashtag(#)
- class 또는 id를 만들때 사용
- Period(.)는 div를 만들 때, 주로 사용하나 다른 태그뒤에 Period(.)붙여 사용하면 그 태그에 해당하는 class값을 자동완성함
- Hashtag(#)은 id값을 자동완성할 때 쓰며, 고유한 값을 가짐
- 🔍 . 사용법 : .username & [tap key]
⇢<div class="username"></div>- 🔍 . 연속 사용법 : .first.second.third & [tap key]
⇢<div class="first second third"></div>- 🔍 . 연속 사용법 : h1.title.col-12 & [tap key]
⇢<h1 class="title col-12"></h1>- 🔍 # 사용법 : #username & [tap key]
⇢<div id="username"></div>- 🔍 # 사용법 : span#id & [tap key]
⇢<span id="id"></span>- 🔍 . & # 사용법 : div.one.two.three#id & [tap key]
⇢<div class="one two three" id="id"></div>
4. Plus(+) & Greater-than sign(>)
- 형제 레벨에서 태그를 연속적으로 작성하고 싶을 때는 태그 사이에 + 기호를 넣어 만듬
- 🔍 + 사용법 : .id+.password+.email+.sex+.age & [tap key]
<div class="id"></div> <div class="password"></div> <div class="email"></div> <div class="sex"></div> <div class="age"></div>
- 🔍 > 사용법 : .conatainer>.box>form.input & [tap key]
<div class="conatainer"> <div class="box"> <form action="" class="input"></form> </div> </div>
- 🔍 + & > 사용법 : table>(tr>th)3+(tr>td)3 & [tap key]
<table> <tr> <th></th> </tr> <tr> <th></th> </tr> <tr> <th></th> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> </table>
- 🔍 > &
*사용법 : ul.ul_list>li.list*6>a & [tap key]<ul class="ul_list"> <li class="list"><a href=""></a></li> <li class="list"><a href=""></a></li> <li class="list"><a href=""></a></li> <li class="list"><a href=""></a></li> <li class="list"><a href=""></a></li> <li class="list"><a href=""></a></li> </ul>
5. Dollar Sign($)
- Dollar Sign($)은 순차적으로 count하여 자동완성 시킴
- 🔍 $ 사용법 : h1.test$*5 & [tap key]
<h1 class="test1"></h1> <h1 class="test2"></h1> <h1 class="test3"></h1> <h1 class="test4"></h1> <h1 class="test5"></h1>
- 🔍 $ 사용법 : h$*7 & [tap key]
<h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6> <h7></h7>
Keep Going, Keep Coding!