====== Emmet ====== * https://emmet.io/ * 고속 HTML 편집 도우미이다. 각종 에디터용으로 플러그인이 나와있다. * [[https://docs.emmet.io/|Emmet Documentation]] ===== 기본 ===== * ''!'' : HTML 기본 뼈대 * ''!!!'' : '''' * ''tag'' : tag 를 자동 생성 * ''tag.className'' : '''' * ''tag#myId'' : '''' * ''tag>tag2>tag3'' : 자식들 생성 ===== 형제 태그 생성 ===== * ''div>ul+ol'' : div 아래에 ul,ol 두개 태그(형제로) 생성
    * ''ul>li*3'' : ul 아래에 자식 li 3개 만들기 ===== 상위에 태그 추가 ===== * ''div>ul>li^ol>li'' : li 위에 다시 ol을 넣음.
    ===== Grouping ===== * 괄호를 사용하여 그루핑 가능 ''div>(header>ul>li*2>a)+footer>p''
    ===== Text 넣기 ===== * ''p{hello}''

    hello

     ===== 숫자 자동 할당 ===== * ''$''가 순서대로 숫자로 변환됨. ''p.class${item $}*3''

    item 1

    item 2

    item 3

     ===== dummy text ===== * ''div>lorem'' : div 안에 lorem ipsum... 더미 문자열 생성됨.(주의 ''{lorem}''아님)
    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>lorem3'' : 숫자값에 따라 단어 갯수 조정
    Lorem, ipsum dolor.
     ===== Custom attribute ===== * ''td[title="Hello world!" colspan=3]'' ===== 참조 ===== * [[https://docs.emmet.io/abbreviations/syntax/|Abbreviations Syntax]] * [[https://www.youtube.com/watch?v=m7wsrVQsVjI|웹사이트 빨리 만드는 지름길 Emmet, HTML 빠르게 마크업하기 | 프론트엔드 개발자 입문편: HTML, CSS, Javascript - YouTube]]