All about {Web}

Emmet 축약구문( Abbreviations Syntax )

참고사이트 웹페이지:
https://docs.emmet.io/abbreviations/syntax/

구문의 예 )
   <div id="item"></div> /* #item + Tab */
   <div class="item"></div> 
/* .item + Tab */
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cumque quia, ut! Quibusdam quasi, illum nesciunt hic, distinctio, voluptatibus aliquid ex soluta explicabo aspernatur enim pariatur labore aut accusamus saepe.</p>
   <p>Modi velit quia sint molestiae debitis enim architecto voluptatem voluptate asperiores error voluptas, accusamus et expedita omnis, voluptates soluta, doloribus facere aperiam ipsum nam dolores magni! Tempore tempora at cum.</p>
/* p*2>lorem + Tab Key */
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia ratione asperiores eum, cupiditate neque exercitationem? Nihil saepe, in, quos unde ratione ullam ut fugit itaque ad esse repellat, obcaecati similique.
/* lorem + Tab */  
  
    <pan class="item"></pan>
/* span.item + Tab */
    <a href="">Click me</a> 
/* a{Click me} */

Brackets Shortcuts &middot; adobe_brackets Wiki &middot; GitHub.pdf

Brackets Shortcuts ( 브라켓 단축키 일람표 )

Brackets Plugin (확장기능) 설치 :  emmet
※ Emmet - 웹개발자의 필수불가결의 툴킷

1) 파일 > 확장기능 설치 > 검색창에 Emmet 검색후 설치

2) 설치가 끝나면 상단 메뉴에 "Emmet" 메뉴가 생성됩니다.

2) Emmet 플러그인 테스트 :
i) 파일 > 새파일 생성 후 -> 빈파일을 다른 이름으로 저장 합니다. 파일명은 test.html
ii) ! 를 입력후 키보드의 Tab 키를 누릅니다. 아래와 같이 html 기본 코드가 자동생성됩니다.