visual_studio_code:emmet

차이

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

차이 보기로 링크

--- visual_studio_code:emmet [2021/12/13 16:30]
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>
-  * Grouping - 괄호를 사용 ''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>
-===== 참조 =====
-  * [[https://www.youtube.com/watch?v=m7wsrVQsVjI|웹사이트 빨리 만드는 지름길 Emmet, HTML 빠르게 마크업하기 | 프론트엔드 개발자 입문편: HTML, CSS, Javascript - YouTube]]

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