Emmet설명.txt
1. Emmet란? 강력한 자동 완성 기능 등으로 HTML 생성 속도
2. Emmet 구문 요소 (요소) 생성 생성 된 요소의 이름을 입력 tab하십시오. Emmet에는 미리 정해진 태그 이름이 없다 . 즉, 아무 이름으로나 태그를 생성 할 수 있습니다.
3. 템플릿 열기와 사용자 정의 태그 입력 입력 html:5[tab] 또는 ![tab]
출력 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> </body> 1 페이지
Emmet설명.txt
</html>
입력 <helloworld>
출력 <helloworld></helloworld>
4. 구조화하기 (Nesting operator) Emmet 문법을 활용하여 요소들의 구조를 간편 히 생성 할 수 있다.
(1) 자식 요소 : > > 사용하여 자식 요소를 생성 할 수있다. :
입력 div>ul>li
출력 <div> <ul> <li></li> <ul> <div>
2 페이지
Emmet설명.txt
(2) 형제 요소 : + +사용하여 한를 요소와 같은-step 에 위치한 요소를 생성 할 수있다.
입력 div+p+bq
출력 <div></div> <p></p> <blockquote></blockquote>
(3) 한 단계 위로 : ^ ^배치 단계가 완료됩니다.
입력 div+div>p>span+em^bq (span + em은 p 태그의 하위 단계에서 위치입 니다.)
출력 <div></div> <div> <p>
3 페이지
Emmet설명.txt <span></span> <em></em> </p> <blockquote></blockquote> </div>
더 많은 레벨을 올리 려면 필요한 만큼 ^ 을 사용하십시오 .
예시1 div+div>p>span+em^bq
결과1 <div></div> <div> <span> <p><span></span><em></em></p> <blockquote></blockquote> </span> </div>
예시2 div+div>p>span+em^^bq
결과2 <div></div> <div> <span> <p><span></span><em></em></p> 4 페이지
Emmet설명.txt
</span> <blockquote></blockquote> </div>
예시3 div+div>p>span+em^^^bq
결과3 <div></div> <div> <span> <p><span></span><em></em></p> </span> </div> <blockquote></blockquote>
(4) 곱셈 : * ** * ** 연산자를 사용하여 요소를 몇 번 출력 해야하는지 정의하십시오 .
입력 ul>li*5
출력 <ul> <li></li>
5 페이지
Emmet설명.txt
<li></li> <li></li> <li></li> <li></li> </ul>
입력 ul>li*3
출력 <ul> <li></li> <li></li> <li></li> </ul>
(5) 그룹화 : () 하위 약어를 복잡한 약어로 그룹화 하려면 () 를 사용하십시오 .
입력 div>(header>ul>li*2>a)+footer>p
출력 <div> <header>
6 페이지
Emmet설명.txt
<ul> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </header> <footer> <p></p> </footer> </div>
각 그룹은 약어 서브 트리를 포함하며 다음의 모든 요소는 그룹의 첫 번째 요소와 동일한 레 벨에 삽입됩니다 .
그룹을 서로 중첩시키고 * 연산자와 결합 할 수 있습니다.
입력 (div>dl>(dt+dd)*3)+footer>p
출력 <div> <dl> <dt></dt> <dd></dd> <dt></dt> <dd></dd> <dt></dt> <dd></dd> </dl>
7 페이지
Emmet설명.txt
</div> <footer> <p></p> </footer>
(6) 아이디와 클래스 elem #id 및 elem .class 표기법을 사용하여 지정된 id 또는 클래스 속성을 가진 요소에 적 용하십시오.
div#header+div.page+div#footer.class1.class 2.class3
출력 <div id="header"></div> <div class="page"></div> <div id="footer" class="class1 class2 class3"></div>
(7) 속성 연산자 맞춤 속성 [attr] 표기법을 사용하여 요소에 사용자 정의 속성을 추가하십시오 .
입력
8 페이지
Emmet설명.txt td[title="Hello world!" colspan=3]
출력 <td title="Hello world!" colspan="3"></td>
필요한만큼 속성을 배치하십시오. 속성 값을 지정할 필요가 없는 경우는
입력 td[colspan title]
출력 <td colspan="" title=""></td>
이 경우 각 빈 속성에 대해 탭 중지를 사용할 수 있습니다 .
작은 따옴표 나 큰 따옴표를 사용하여 속성 값 을 인용 할 수 있습니다. 속성 값에 공백이 없으면 값을 입력할 필요가 없습니다.
입력 td[title=hello colspan=3]
출력 <td title="hello" colspan="3"></td>
9 페이지
Emmet설명.txt
(8) 번호 : $ 숫자가있는 요소를 반복하려면 * 연산자와 함 께 $ 연산자를 사용하십시오 지역 정보 $요소의 이름 속성의 이름 또는 반 복 요소의 출력
입력 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> 에 행에 여러 $를 사용하여 패드 제로로 번호 입니다.
입력 ul>li.item$$$*4
출력 <ul> <li class="item001"></li> <li class="item002"></li> 10 페이지
Emmet설명.txt <li class="item003"></li> <li class="item004"></li> </ul>
(9) 번호 매기기 기준 및 방향 변경 @ 수정자를 사용하여 번호 방향 (오름차순 또 는 내림차순) 및 기준 (시작값)을 변경할 수 있다.
입력 ul>li.item$@-*5
출력 <ul> <li class="item5"></li> <li class="item4"></li> <li class="item3"></li> <li class="item2"></li> <li class="item1"></li> </ul>
카운터 기본값을 변경하려면 @N 을 $에 추가하 십시오 .
입력 ul>li.item$@2*4
11 페이지
Emmet설명.txt
출력 <ul> <li class="item2"></li> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> </ul>
입력 ul>li.item$@-3*4
출력 <ul> <li class="item6"></li> <li class="item5"></li> <li class="item4"></li> <li class="item3"></li> </ul>
(10) 텍스트 : {} 요소 에 텍스트 를 추가 하려면 {} 을 사용하 십시오 .
입력 a{Click me}
12 페이지
Emmet설명.txt
출력 <a href="">Click me</a>
13 페이지