Emmet(에밋) plugin 알아보기
vscode 기준 기본 내장으로 깔려있는 플러그인이다.
(블로그들을 확인해보면 대부분 설치를한다. 나는 설치안했다.)
ㅡㅡㅡㅡㅡ1. 태그생성하기ㅡㅡㅡㅡㅡ
ex1)
div*5 -> div태그 5개 생성.
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
ex2)
div.item*5 -> class="item" 인 div태그 5개 생성
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
ex3)
div.item[title]{상자}*5 -> class="item"이고 title="상자" 인 div 태그 5개 생성
<div class="item" title="">상자</div>
<div class="item" title="">상자</div>
<div class="item" title="">상자</div>
<div class="item" title="">상자</div>
<div class="item" title="">상자</div>
ex4)
div#box$*10 -> id가 box1...10 까지 증가하면서 생성. -> id는 중복되면 안되기 때문에
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
<div id="box5"></div>
<div id="box6"></div>
<div id="box7"></div>
<div id="box8"></div>
<div id="box9"></div>
<div id="box10"></div>
ex5)
div.container>div.item.item${$}*10
.을 두번사용하면 class명을 두개 지정해줄수 있으며 $를 통해 클래스마다 번호를 순서대로 할당할 수 있으며 {$}를 사용하면 태그와 태그사이의 텍스트 영역에 숫자를 순서대로 작성하도록 해준다.
<div class="container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
<div class="item item7">7</div>
<div class="item item8">8</div>
<div class="item item9">9</div>
<div class="item item10">10</div>
</div>
ㅡㅡㅡㅡㅡ2. 형제 선택자 태그 생성ㅡㅡㅡㅡㅡ
ex1)
div+p -> div태그 다음에 p 태그를 생성한다.
<div></div>
<p></p>
ex2)
(h1+p+p)*3 -> h1태그, p태그, p태그 순으로 나오고 3번 반복된다.
<h1></h1>
<p></p>
<p></p>
<h1></h1>
<p></p>
<p></p>
<h1></h1>
<p></p>
<p></p>
ㅡㅡㅡㅡㅡ3. 자식 선택자 태그 생성ㅡㅡㅡㅡㅡ
ex1)
ul>li -> ul 태그의 자식으로 li 태그 생성
<ul>
<li></li>
</ul>
ex2)
ul#list1>li.item*5 -> ul태그의 id는 list1이고 자식으로 class가 item인 5개의 li 태그를 생성!
<ul id="list1">
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
Emmet Documentation
댓글
댓글 쓰기