내용으로 건너뛰기
권남
사용자 도구
로그인
사이트 도구
검색
도구
문서 보기
이전 판
역링크
최근 바뀜
미디어 관리자
사이트맵
로그인
>
최근 바뀜
미디어 관리자
사이트맵
추적:
html:emmet
이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
====== 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.txt
· 마지막으로 수정됨: 2021/12/13 16:48 저자
kwon37xi
문서 도구
문서 보기
이전 판
역링크
맨 위로