Brackets review

1,684 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,684
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
18
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Brackets review

  1. 1. Brackets leechwin1@gmail.com 2013. 11
  2. 2. Outline • • • • • • • Introduction Composition Menu Sidebar Editor Live Preview Extensions
  3. 3. Introduction(1) • Brackets • • Open-source code editor for the web It’s built with JavaScript, HTML and CSS
  4. 4. Introduction(2) • Brackets • Download site: http://download.brackets.io/ • Platform • • • • Github • • • • Windows XP, 7 or 8 (27MB) MAC OSX v10.6, v10.7 or v10.8 (28.3MB) Linux is not supported Source: https://github.com/adobe/brackets How to use: https://github.com/adobe/brackets/wiki/How-to-Use-Brackets Extensions: https://github.com/adobe/brackets/wiki/Brackets-Extensions Video • • http://net.tutsplus.com/tutorials/tools-and-tips/a-peek-at-brackets/ http://www.youtube.com/user/CodeBrackets?feature=CAQQwRs%3D
  5. 5. Composition • Menu, Sidebar, Editor and Live Preview
  6. 6. Menu(1) • New File • • 파일종류 관계없이 empty 파일 생성 Template 없음 • • Live Preview Live Highlight • Project Settings.. • • Live Preview Base URL 변경 Install Extension • • 외부 플러그인 설치가능 https://github.com/adobe/brackets/wiki/BracketsExtensions
  7. 7. Menu(2)
  8. 8. Menu(3) • Show Developer Tools • • • • • Remote Inspector 선택한 html 이 아닌 Brackets 전체 에 대한 Inspector Reload Brackets New Brackets Windows Switch Languages
  9. 9. Menu(4) • Show Performance Data • • • Enable Node Debugger Log Node State to Console Restart Node
  10. 10. Menu(5) • About Brackets
  11. 11. Sidebar • Recent Files • Review • Project • Multi Project Management • • • Resource • • • Resources Control Delete, Add 를 위해서는 프로젝트폴더 에 Resource 를 Delete, Add 후 Brackets 를 F5 로 Sync Build/Run/Debug • • New, Rename 기능만 지원 Delete, Add 미지원 • Project Configuration • 한 개 이상의 프로젝트를 열 수 없다. 하나의 프로젝트만 지원 Live Preview 에서 care
  12. 12. Editor(1) • Code hint HTML • Tags Attribute names and values • • CSS • • Property names and values JavaScript • • Property names
  13. 13. Editor(2) • Validation JavaScript • • JSLint
  14. 14. Editor(3) • Quick Edit • • • HTML Element 내에서 CSS 파일에 정의되어 있는 Element 나 class 가 있는 경우 단축키 (Ctrl+E)로 HTML Editor 내에서 CSS의 해당 내용이 보여지며 수정이 가능 JavaScript 에서는 해당 구현부분이 보여지며 수정이 가능 CSS 에서는 color 에 대해서 Color Picker 제공
  15. 15. Editor(4) • Image Preview and Pixel Guides • Image Preview 와 Pixel Guides 를 제공하여 CSS Sprite 등에 유용하게 픽셀을 계산
  16. 16. Editor(5) • Live highlight • HTML Element 해당 부분이 Preview 에서 박스로 표현됨
  17. 17. Live Preview • Live Preview • • • • • HTML, JS 는 Save 시에 Preview 에 반영 CSS 는 수정시 바로 Preveiw 에 반영 It only works with Chrome as the target browser Only one HTML file can have a live connection to the browser at a time Opening the developer tools in Chrome will close the live development connection
  18. 18. Extensions(1) • Menu > File > Install Extension
  19. 19. Extensions(2) • https://github.com/adobe/brackets/wiki/Brackets-Extensions • • • • • • • • • • • • • • • • • • Snippets Prefixr Quick Markup HTML Templates Auto-match pairs Auto Formatter TabToSpace Beautify Minifier CSSLint JSHint W3CValidator Annotate Themes Code folding Hover Preview Markdown Preview Etc.. 70종 이상
  20. 20. Thank you.

×