visual_studio_code:emmet

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

--- visual_studio_code:emmet [2021/12/13 16:43]
kwon37xi [형제 태그 생성]
+++ visual_studio_code:emmet [2021/12/13 16:43] (현재)
kwon37xi
@@ 줄 3: / 줄 3: @@
   * [[html:emmet|Emmet]]
-===== 기본 =====
-  * ''!'' : HTML 기본 뼈대
-  * ''!!!'' : ''<!DOCTYPE html>''
-  * ''tag'' : tag 를 자동 생성
-  * ''tag.className'' : ''<tag class="className"></tag>''
-  * ''tag#myId'' : ''<tag id="myId"></tag>''
-  * ''tag>tag2>tag3'' : 자식들 생성
-===== 형제 태그 생성 =====
-  * ''div>ul+ol'' : div 아래에 ul,ol 두개 태그(형제로) 생성
-<code html>
-<div>
-  <ul></ul>
-  <ol></ol>
-</div>
-</code>
-  * ''ul>li*3'' : ul 아래에 자식 li 3개 만들기
-<code html>
-<ul>
-    <li></li>
-    <li></li>
-    <li></li>
-</ul>
-</code>
-===== 상위에 태그 추가 =====
-  * ''div>ul>li^ol>li'' : li 위에 다시 ol을 넣음.
-<code html>
-<div>
-    <ul>
-        <li></li>
-    </ul>
-    <ol>
-        <li></li>
-    </ol>
-</div>
-</code>
-===== Groupping =====
-  * 괄호를 사용하여 그루핑 가능 ''div>(header>ul>li*2>a)+footer>p''
-<code html>
-<div>
-    <header>
-        <ul>
-            <li><a href=""></a></li>
-            <li><a href=""></a></li>
-        </ul>
-    </header>
-    <footer>
-        <p></p>
-    </footer>
-</div>
-</code>
-===== Text 넣기 =====
-  * ''p{hello}''
-<code html>
-<p>hello</p>
-</code>
-===== 숫자 자동 할당 =====
-  * ''$''가 순서대로 숫자로 변환됨. ''p.class${item $}*3''
-<code html>
-<p class="class1">item 1</p>
-<p class="class2">item 2</p>
-<p class="class3">item 3</p>
-</code>
-===== dummy text =====
-  * ''div>lorem'' : div 안에 lorem ipsum... 더미 문자열 생성됨.(주의 ''{lorem}''아님)
-<code html>
-<div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illo quos consequuntur nemo. Totam corrupti itaque numquam quod tenetur ad hic molestiae fuga odit culpa provident aliquid explicabo ducimus, consectetur dolores!</div>
-</code>
-  * ''div>lorem3'' : 숫자값에 따라 단어 갯수 조정
-<code html>
-<div>Lorem, ipsum dolor.</div>
-</code>
-===== 참조 =====
-  * [[https://www.youtube.com/watch?v=m7wsrVQsVjI|웹사이트 빨리 만드는 지름길 Emmet, HTML 빠르게 마크업하기 | 프론트엔드 개발자 입문편: HTML, CSS, Javascript - YouTube]]

visual_studio_code/emmet.1639381409.txt.gz · 마지막으로 수정됨: 2021/12/13 16:43 저자 kwon37xi