[HTML&CSS] 개발 속도 높이기 - Emmet 사용법

VS code 는 기본적으로 Emmet을 지원합니다.

사용방법은 작성 후 Tab을 이용합니다.

 

 

---

작성 방식


1. 하위 요소
div>ul>li 처럼 ' > ' 를 작성 후 Tab 

<div>
  <ul>
    <li></li>
  </ul>
</div>​

2. 동급 요소
div>p+span 처럼 ' + ' 를 사용합니다.

 <div>
   <p></p>
   <span></span>
 </div>​

3. 반복
div>li*3 처럼 ' * ' 을 사용합니다.

<div>
   <li></li>
   <li></li>
   <li></li>
</div>

4. Class
.index 처럼 ' . ' 를 맨 처음 사용합니다.
  * div.index로 명시적으로 사용할 수 있으나 기본이 div 형이기 때문에 생략 가능

<div class="index"></div>

5. weight, height, margin, percent  In CSS

w10
w10p
h10p
m10p20

w -> weight , h -> height, m -> margin, p -> percent

width: 10px;
width: 10%;
height: 10%;
margin: 10% 20px;