html:emmet

차이

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

차이 보기로 링크

--- html:emmet [2021/12/13 16:18]
kwon37xi 만듦
+++ html:emmet [2021/12/13 16:48] (현재)
kwon37xi
@@ 줄 1: / 줄 1: @@
 ====== Emmet ======
+  * https://emmet.io/
+  * 고속 HTML 편집 도우미이다. 각종 에디터용으로 플러그인이 나와있다.
+  * [[https://docs.emmet.io/|Emmet Documentation]]
+===== 기본 =====
+  * ''!'' : 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>
+===== 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>
+===== Custom attribute =====
+  * ''td[title="Hello world!" colspan=3]''
+<code html>
+<td title="Hello World!" colspan="3"></td>
+</code>
+===== 참조 =====
+  * [[https://docs.emmet.io/abbreviations/syntax/|Abbreviations Syntax]]
+  * [[https://www.youtube.com/watch?v=m7wsrVQsVjI|웹사이트 빨리 만드는 지름길 Emmet, HTML 빠르게 마크업하기 | 프론트엔드 개발자 입문편: HTML, CSS, Javascript - YouTube]]

html/emmet.1639379913.txt.gz · 마지막으로 수정됨: 2021/12/13 16:18 저자 kwon37xi