HTML Emmet

HTML Emmet은 단축키와 비슷한데 사용하는 이유는 속도의향상과
잔잔한 실수를 줄일수있다. 익숙해지도록 작성시에는 Emmet으로 연습을 하고 주요 Emmet은 아래와같다.

1.자동완성: tab키
ex) div(tab키)

<div></div> 

가장많이사용함

2.텍스트 :{}
ex) div{수}

<div>수</div>

3.자식(하위)요소 ">"
ex) div>div

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

4.형제요소 "+"
ex) div>P+a

<div>
   <p></p>
   <a href=""></a>
</div>

5.올라가기 "^"
ex) div>p^div

<div>
   <p></p>
</div>
<div></div>

6.반복하기: "*"
ex) ul>li* 4

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

7.그룹화: ()
ex) ul>(li>a)*4

<ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
</ul>

8.클래스: "."
ex) div.class-name

<div class="class-name"></div>

9.아이디:"#"
ex) div#id

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

10.속성(attr)
ex)img[alt="이미지설명"]

<img src="" alt="이미지설명">

11.넘버링: "$"
ex)div.item$*6

<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
<div class="item4"></div>
<div class="item5"></div>
<div class="item6"></div>

강의 내용에서 나온 주요 Emmet 이었습니다.