Brackets [3] - 플러그인 : Emmet 사용법
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 · adobe_brackets Wiki · GitHub.pdf
Brackets Shortcuts ( 브라켓 단축키 일람표 )
'CMS > server' 카테고리의 다른 글
01.내 로컬에 PHP 홈페이지를 만들자. (0) | 2018.04.30 |
---|---|
XAMPP [3] - 로컬서버 설치 및 PHP 테스트 (0) | 2018.04.24 |
Brackets [2] - 플러그인 : Emmet (0) | 2018.04.24 |
Brackets [1] - 코드 에디터(Code Editor) (0) | 2018.04.24 |
XAMPP (Apache + MariaDB + PHP + Perl) 메뉴 설명 및 설정 (0) | 2018.04.17 |
Brackets [2] - 플러그인 : Emmet
Brackets Plugin (확장기능) 설치 : emmet
※ Emmet - 웹개발자의 필수불가결의 툴킷
1) 파일 > 확장기능 설치 > 검색창에 Emmet 검색후 설치
2) 설치가 끝나면 상단 메뉴에 "Emmet" 메뉴가 생성됩니다.
2) Emmet 플러그인 테스트 :
i) 파일 > 새파일 생성 후 -> 빈파일을 다른 이름으로 저장 합니다. 파일명은 test.html
ii) ! 를 입력후 키보드의 Tab 키를 누릅니다. 아래와 같이 html 기본 코드가 자동생성됩니다.
'CMS > server' 카테고리의 다른 글
XAMPP [3] - 로컬서버 설치 및 PHP 테스트 (0) | 2018.04.24 |
---|---|
Brackets [3] - 플러그인 : Emmet 사용법 (0) | 2018.04.24 |
Brackets [1] - 코드 에디터(Code Editor) (0) | 2018.04.24 |
XAMPP (Apache + MariaDB + PHP + Perl) 메뉴 설명 및 설정 (0) | 2018.04.17 |
XAMPP ( Apache + MariaDB + PHP + Perl ) 설치 (0) | 2018.04.16 |