Brackets review
Upcoming SlideShare
Loading in...5
×
 

Brackets review

on

  • 1,519 views

 

Statistics

Views

Total Views
1,519
Views on SlideShare
1,519
Embed Views
0

Actions

Likes
1
Downloads
11
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Brackets review Brackets review Presentation Transcript

  • Brackets leechwin1@gmail.com 2013. 11
  • Outline • • • • • • • Introduction Composition Menu Sidebar Editor Live Preview Extensions
  • Introduction(1) • Brackets • • Open-source code editor for the web It’s built with JavaScript, HTML and CSS
  • 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
  • Composition • Menu, Sidebar, Editor and Live Preview
  • 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
  • Menu(2)
  • Menu(3) • Show Developer Tools • • • • • Remote Inspector 선택한 html 이 아닌 Brackets 전체 에 대한 Inspector Reload Brackets New Brackets Windows Switch Languages
  • Menu(4) • Show Performance Data • • • Enable Node Debugger Log Node State to Console Restart Node
  • Menu(5) • About Brackets
  • 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
  • Editor(1) • Code hint HTML • Tags Attribute names and values • • CSS • • Property names and values JavaScript • • Property names
  • Editor(2) • Validation JavaScript • • JSLint
  • Editor(3) • Quick Edit • • • HTML Element 내에서 CSS 파일에 정의되어 있는 Element 나 class 가 있는 경우 단축키 (Ctrl+E)로 HTML Editor 내에서 CSS의 해당 내용이 보여지며 수정이 가능 JavaScript 에서는 해당 구현부분이 보여지며 수정이 가능 CSS 에서는 color 에 대해서 Color Picker 제공
  • Editor(4) • Image Preview and Pixel Guides • Image Preview 와 Pixel Guides 를 제공하여 CSS Sprite 등에 유용하게 픽셀을 계산
  • Editor(5) • Live highlight • HTML Element 해당 부분이 Preview 에서 박스로 표현됨
  • 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
  • Extensions(1) • Menu > File > Install Extension
  • 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종 이상
  • Thank you.