1. Brackets
leechwin1@gmail.com
2013. 11

2. Outline
•
•
•
•
•
•
•
Introduction
Composition
Menu
Sidebar
Editor
Live Preview
Extensions

3. Introduction(1)
•
Brackets
•
•
Open-source code editor for the web
It’s built with JavaScript, HTML and CSS

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. Composition
•
Menu, Sidebar, Editor and Live Preview

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. Menu(2)

8. Menu(3)
•
Show Developer Tools
•
•
•
•
•
Remote Inspector
선택한 html 이 아닌 Brackets 전체
에 대한 Inspector
Reload Brackets
New Brackets Windows
Switch Languages

9. Menu(4)
•
Show Performance Data
•
•
•
Enable Node Debugger
Log Node State to Console
Restart Node

10. Menu(5)
•
About Brackets

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. Editor(1)
•
Code hint
HTML
•
Tags
Attribute names and values
•
•
CSS
•
•
Property names and values
JavaScript
•
•
Property names

13. Editor(2)
•
Validation
JavaScript
•
•
JSLint

14. Editor(3)
•
Quick Edit
•
•
•
HTML Element 내에서 CSS 파일에 정의되어 있는 Element 나 class 가 있는 경우 단축키
(Ctrl+E)로 HTML Editor 내에서 CSS의 해당 내용이 보여지며 수정이 가능
JavaScript 에서는 해당 구현부분이 보여지며 수정이 가능
CSS 에서는 color 에 대해서 Color Picker 제공

15. Editor(4)
•
Image Preview and Pixel Guides
•
Image Preview 와 Pixel Guides 를 제공하여 CSS Sprite 등에 유용하게 픽셀을 계산

16. Editor(5)
•
Live highlight
•
HTML Element 해당 부분이 Preview 에서 박스로 표현됨

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. Extensions(1)
•
Menu > File > Install Extension

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. Thank you.