Adobe 브라켓(Brackets) 유용한 플러그인 (plug-in) 추천
안녕하세요.!
오늘은 추천 에디터인 브라켓 ( brackets )의 유용한 플러그인을 추천해드리려고 합니다.!
물론, 각자의 성향에 따라 유용할 수도, 불편할 수도 있으니 이 점 잘 참고하시고
각자 편하신 것을 사용하시면 될 것 같습니다.!
HTML 편집기 무료 소프트웨어 Adobe Brackets
일단, 다운로드 받은 Brackets을 실행하게 되면 ,
아래 이미지와 같은 페이지가 나타나게 됩니다.
그 후, 해당 이미지 버튼을 클릭해주시면 플러그인 다운로드 창이 나타나게 됩니다.
▼ 플러그인 다운로드 창
제가 사용하는 플러그인을 소개해드리도록 하겠습니다. !
1. Popup-menu-extension ( 우클릭 메뉴 확장 )
사용 : 마우스 클릭
우클릭 컨텍스트 메뉴에 잘라내기, 복사, 붙여넣기, 저장, 케이스 변환 등의 기능을 추가합니다.
( 마우스 우클릭 버튼 확장 플러그로 지금까지 본 것 중 유일하게 한국어 지원이 된다. )
2. Emmet
사용 : 다운시 도움말 옆 Emmet 메뉴가 생성된다.
High-speed HTML and CSS workflow.
( 축약코드로 빠르게 작업 할 수 있게 하는 것이라 생각하시면 됩니다. )
3. HTML Templates
사용 : 편집 > HTML Templates.. > 원하는 버전 선택
Inserts HTML from a pre-made list of templates.
( HTML 템플릿을 만들어 준다. )
4. Beautify
사용 : Format JavaScript, HTML and CSS files.
( 자동으로 인덴트 정리해 주는 플러그인이라고 생각하시면 됩니다. )
5. Brackets Icons
사용 : 자동적용
File icons in Brackets' file tree.
( 좌측의 사이드바에 있는 목록의 아이콘을 간편히 볼 수 있도록 바꿔준다. )
( + Brackets File Icon 이라고 유사한 것이 하나 더 있는데 그것보다 이 것이 더 알아보기 편할 것 같습니다. )
6. HTML Designer for Brackets
사용 : 다운시 편집기 하단에 view메뉴가 형성 됨. 클릭 후 원하는 모드 변경 후 사용.
NOW WITH RESPONSIVE DESIGN TOOLS (BETA)! Design and customize web ui with HTML and CSS.
Now with taggable Design snippet/bookmark supprot.
( 드림위버의 design뷰나 split뷰 처럼 code뷰와 함께 뷰를 자유롭게 전환하며 작업할 수 있는 것 같다. )
7. Indent Guides
사용 : 보기 > Indent Guides 체크
Show indent guides in the code editor.
( 들여쓰기 만으로는 가독성이 떨어질 때 도움을 주는 가이드 라인을 생성하여 준다. )
8. Brackets Outline List
사용 : 다운 시 우측 아이콘 바에 toggle Outline 아이콘 생성 > 클릭시 좌측 사이드바 하단에 리스트 형성
( 자신이 짠 코드의 Outline을 간편히 확인해 볼 수 있다 )
더 유용한 것들이 많을 수 있습니다.
일단은 제가 사용하는 몇가지 플러그인에 대해 알아보았습니다.
제가 알려드리는 플러그인으로 인하여 여러분들의 작업 능률이 더욱더 효과적이 되기를 바라며
이만 물러나도록 하겠습니다.!
▼ 아래 텍스트를 클릭하시면, 제가 올린 HTML 기초강좌로 넘어가게 됩니다.
2018/05/06 - [Dairy] - html 01_basic
도움이 되셨다면 공감과 덧글을 남겨주세요 글 작성에 큰 힘이됩니다. ^^