비주얼 스튜디오 코드에서 젠코딩 emmet 예제 사용법들

1. 부모태그와 자식태그

부모태그 > 자식태그

ex) div > label

<div><label for=""></label></div>

2. 친구태그

친구태그+친구태그

ex)div + div

<div></div>

<div></div>

3. 태그안에 속성

태그[속성들]

ex) div[class="button" id="btn_ok"]

<div class="button" id="btn_ok"></div>

3.1 태그안에 class에 여러가지 스타일 넣기

태그[속성들]

ex) div[class="button button-red" id="btn_ok"]

<div class="button button-red" id="btn_ok"></div>

4. 태그안에 텍스트 넣기

태그{값}

ex) label{Name}

<label for="">Name</label>

5. 여러개 태그를 만들기

태그*갯수

ex)ul>li*5

<ul>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

</ul>

5.1 여러개 태그에 넘버링 하기

태그.이름$*갯수

ex)ul>li.item$*5

<ul>

<li class="item1"></li>

<li class="item2"></li>

<li class="item3"></li>

<li class="item4"></li>

<li class="item5"></li>

</ul>

6. div 태그

6.1 div 태그에 id명을 주면서 만들기

#layer

<div id="layer"></div>

6.2 div 태그에 class명을 주면서 만들기

.container

<div class="container"></div>

7. 상위로 빠져나오기

^

ex)div>p>span^^^div>p>span

<div>

<p><span></span></p>

</div>

<div>

<p><span></span></p>

</div>