visual studio code - 설치하기



Getting Started

Visual Studio Code is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, Mac and Linux. It comes with built-in support for JavaScript, TypeScript and Node.js and has a rich ecosystem of extensions for other languages (such as C++, C#, Python, PHP, Go) and runtimes. Begin your journey with VS Code with these introductory videos.




Quick Tour of VS Code using JavaScript








Posted by 홍반장水 홍반장水
[에디터] Atom 에디터


Atom is a text editor that's modern, approachable, yet hackable to the core—a tool you can customize to do anything but also use productively without ever touching a config file.



* 아톰에디터에 해당되는 블로그 글




Posted by 홍반장水 홍반장水

Monaco Editor: A browser based code editor

Monaco Editor is a browser-based code editor that powers VS Code. It’s well-documented and easy to integrate into your projects.

monaco editor

Posted by 홍반장水 홍반장水
Text editor -텍스트에디터 : Brackets


IDE 편집툴. 구글에서 지원.





New Features In Sprint 35

  • New Find/Replace UI: Replace now uses a streamlined, much cleaner UI supporting the same features as Find, including incremental search and highlighting. New case-sensitive and regular expression toggle buttons for easy access in Find, Find in Files, and Replace.
  • Launching Live Preview on Mac: On Mac, Chrome does not need to be relaunched when starting Live Preview.
  • Faster Start-up: Brackets now loads up to 50% faster thanks to minified JavaScript and pre-compiled LESS.

System Requirements


  • Multicore Intel processor
  • Mac OSX v10.6, v10.7 or v10.8
  • 256MB of RAM (2GB of RAM recommended for Live Development)
  • 200MB of available hard-disk space for installation
  • 1280x800 display with 16-bit video card


  • Intel® Pentium® 4 or AMD Athlon® 64 processor
  • Windows XP, Vista, 7 or 8
  • 256MB of RAM (2GB of RAM recommended for Live Development)
  • 200MB of available hard-disk space for installation
  • 1280x800 display with 16-bit video card


Installation Instructions

  1. Save the installer file to a location on your hard drive.
  2. Locate the installer and double-click to start the install process.
  • Mountain Lion (OS X 10.8) by default will not allow Brackets to run since it is not digitally signed. To work around this, right-click the Brackets .app and choose Open, then click Open on the dialog that appears. You only need to do this once.
  • Windows allows you to specify a custom install location. We do not recommend you install over an existing copy of Brackets.
Posted by 홍반장水 홍반장水

실무에서 사용하는 최고의 코딩툴은 어떤게 있을까요?  

Posted by 홍반장水 홍반장水


18 Essential Bootstrap UI Editors




Bootstrap has exploded since Twitter released it in 2011, becoming one of the most popular responsive frameworks available. It boasts an extensive library of pre-styled components, plugins and add-ons that make kickstarting your next web project a breeze.

There is no shortage of Bootstrap resources, but in this post, we will focus on the editing tools that allow you to customize the framework to suit your requirements.

We gathered 18 of the best free and paid Bootstrap editors, available online or as desktop tools, to help boost your web development productivity.

Are there any Bootstrap editors that you use and would recommend? If so, please share with our readers in the comments below.

1. Jetstrap


Jetstrap is a web-based Javascript library for building rapid prototypes and applications with Bootstrap. It boasts a simple but extremely powerful interface with drag-and-drop functionality.

The workspace allows you to drop elements, customize them and then see a live preview, with the entire code neatly formatted. You can test on multiple device emulators within the workspace, easily export your code, and have your website up and running quickly.

Price: Basic plans start at $16 per month and go up to $99 per month.

2. Divshot

Divshot allows for fast, visual front-end development, and works superbly with the most popular frameworks, including Bootstrap, Foundation and Ratchet. The included component libraries are completely customized for each framework, with the visual HTML editor supporting custom code, JavaScript, CoffeeScript, LESS and more.

The theme switcher is incredibly useful, meaning you can change the overall look of the entire theme with just a few clicks, or you can choose a custom option.

Price: Plans start at Free and go up to $300 per month for agencies.

3. Easel

Easel is an in-browser design tool to mock up and collaborate on projects, without shifting between your text editor and browser. It allows for rapid prototyping with the added ability of importing elements from your existing website.

If you already use Bootstrap, you can use Easel to create markup that you can drop directly into your site, or get started with Bootstrap quickly using the great collection of components. You can export either the entire document or just specific elements.

Price: Plans start at Free and go up to $99 per month for medium-sized teams.

4. Kickstrap


Kickstrap is a front-end framework with the Bootstrap library bundled and layered, and you can decide which Bootstrap CSS and JS components to use as you develop. Since you never edit Bootstrap's code directly, you can keep its layers up-to-date without overwriting your existing code.

Kickstrap is ready to use "out of the box," so there is no installation or database required. This enables you to put Kickstrap right onto your server.

Price: Free

5. Bootstrap ThemeRoller

Bootstrap ThemeRoller is an intuitive web app for creating your own Bootstrap theme using a visual interface. You can customize the color, size, fonts, forms, buttons, tables, alerts, navigation bar, menus and more.

The appe generates a unique URL for every style you create, which saves your settings so you can pause and resume your customization where you left it. You can see your changes live and download the final theme in a single ZIP file.

Price: Free

6. Lavish

Lavish is a Ruby on Rails application that generates a Bootstrap color scheme from an image, which you can customize to suit your requirements. Once you select an image, Lavish generates colors from the image for the body background, links, header, menu, tabs, text, dropdown and more. You can then swap these around until you're satisfied with the scheme, and then download the Boostrap.css file.

Price: Free

7. BootSwatchr

BootSwatchr is a visual tool, inspired by Bootswatch, for creating custom Bootstrap themes from the ground up. Just like Bootstrap it uses LESS to create dynamic, modular stylesheets to give you a live preview of the changes you make.

To get started, simply create a new BootSwatch and edit the variables you wish to change on the left. This will update the preview on the right. You can export in JSON format or download the full or minified CSS file.

Price: Free

8. LayoutIt!


LayoutIt! features a drag-and-drop interface for creating front-end code simply and quickly. It takes every element and component of Bootstrap to make coding easier, without needing to be an expert in JavaScript, HTML5 or CSS3.

It's easy to integrate LayoutIt! with any programming language; just download the HTML and start building the design into it. To begin, choose one of the base templates — starter, basic marketing or article — and being working on customizing the template as you see fit.

Price: Free

9. PaintStrap

Using PaintStrap, you can generate beautiful Bootstrap themes with Adobe Kuler or COLOURLovers. To get started, input either the color scheme theme ID or a permalink URL, and then set the colors for corresponding elements such as text, navigation, buttons, background and links.

You can generate the resulting CSS as a ZIP of all the files, individually or as a theme. You can share your color scheme in the gallery or download another user's theme.

Price: Free

10. Pingendo

Pingendo is a visual desktop application to create prototypes of responsive websites based on the Bootstrap framework. You can start a project from the collection of ready-to-use layouts, drag elements into position, resize and customize, and insert your own content.

Using the Snippets CSS panel, you can insert new elements and drag and drop in the DOM structure, while previewing the changes you make instantaneously.

Price: Free

11. BootTheme

BootTheme allows you to create themes, mockups, websites and applications using the foundation of Bootstrap, with a drag-and-drop UI. You can instantly see your changes in the Live Preview panel, use In Place Editing to change the content in the preview panel and import Bootstrap variables.

You can also create your own personal collection of themes, templates and code snippets, and share your work through a unique URL. Projects are available to download in HTML, CSS and JavaScript.

Price: Plans start at Free and go up to $19 per month for the Pro Plan.

12. Bootply


Bootply is a drag-and-drop visual editor to design, create prototypes and test the Bootstrap framework. It integrates well with other popular plugins, micro-libraries and frameworks, including FontAwesome, AngularJS, Isotope, jQuery and many others.

You can leverage the Bootply code repository to grab Bootstrap ready snippets, examples and templates. The active Bootply community makes it easy to discover, share and showcase code and snippets.

Price: Free

13. BootUI

BootUI is a visual Bootstrap editor that doesn't require any HTML or CSS skills, and it features a diverse collection of responsive templates. It's easy to get started; just select a template and double-click to edit the content. It also works offline, has free updates and currently boasts 24 responsive template options.

The editor features real-time previews of the changes you make. If you require a specific Bootstrap template, simply email BootUI and the team will produce a responsive template to match your request at no extra cost.

Price: Free trial and $49.95 to purchase

14. Fancyboot

Fancyboot is a simple but powerful customization tool for Bootstrap that allows you to edit Bootstrap installations and see live previews of your changes. You can select the plugins and components you want included, use the side menu and select the colors you wish to use.

Bootstrap includes extra variables that are not available in the official customization page. Once you have made your changes, you can download a ZIP file with the compiled and minified CSS, as well compiled jQuery plugins.

Price: Free

15. Wrap Bootstrap Live Editor

Bootstrap Live is a WYSIWYG editor for Bootstrap that offers a simple and elegant way to edit and beautify HTML, with Bootstrap-ready content and snippets. The HTML button allows you to open the default source view with code coloring and formatting.

The editor features advanced options including button configuration, custom tags, localization and more.

Price: Free

16. Bootstrap Magic

Bootstrap Magic is a Bootstrap theme generator using the latest Bootstrap 3 release and Angular JS. It provides a live preview of any changes as you make them, and includes variable importing, a color picker and smart typeahead. It also completely rebrands the framework to your own style.

Once you have customized your theme, you can instantly download it with personalized CSS and LESS variables in a minified version.

Price: Free

17. Style Bootstrap

Style Bootstrap is an in-browser GUI utility to customize the Twitter Bootstrap look and feel. You can customize the body style, typography, buttons, navigation, forms, alerts and more. Once you've finished crafting your theme, you can download the generated CSS.

Price: Free

18. X-Editable


X-Editable provides in-place editing with Bootstrap, jQuery UI or pure jQuery, and the library allows you to create editable elements, including both "popup" and "inline" modes.

It boasts a wealth of features, including client-side and server-side validation, keyboard support, live events, customizable container placement and more. X-Editable provides faster development, easy adding and removing of fields, a simple backend script for data updates and is more convenient for small forms.

Price: Free

Posted by 홍반장水 홍반장水

Sublime Text 2

Version 2.0.2

Release Date: 8 July 2013

  • Sublime Text 3 beta is now available from
  • Removed expiry date
  • Backported various fixes from Sublime Text 3
  • Improved minimap click behavior. The old behavior is available via the minimap_scroll_to_clicked_text setting
  • Added copy_with_empty_selection setting, to control the behavior of the copy and cut commands when no text is selected



The current version of Sublime Text 2 is 2.0.2.

Sublime Text 3 is currently in beta, and contains many improvements over Sublime Text 2.

Sublime Text 2 may be downloaded and evaluated for free, however a license must be purchased for continued use. There is currently no enforced time limit for the evaluation.

Please submit feature requests to For notification about new versions, follow sublimehq on twitter.

'Extreming X' 카테고리의 다른 글

[Cloud]  (0) 2013.07.17
파일검색 프로그램 - Everything search engine  (0) 2013.07.11
[EDITOR] Sublime 2.0.2 Update  (0) 2013.07.10
컬쳐랜드 오류에 대해서...  (0) 2013.06.20
OpenWeatherMap - free weather data and forecast API  (0) 2013.06.20
SSO(Single Sign On)  (0) 2013.06.14
Posted by 홍반장水 홍반장水

ICEcoder — In-browser code editor


브라우저에서 사용 할 수 있는 오픈소스 코드에디터.

IE에서는 사용하기 어렵다. 일반적인 에디터 기능은 구현되어 있다.


ICEcoder is an open-source code editor that lets you work directly within the browser, whether you’re online or offline. It includes broken tag indicators, highlighting themes, secure login, and much more.



You can run ICEcoder either online or locally, on Linux, Windows or Mac based platforms. The only requirement is to have PHP 5 available (5.3 recommended). You can have this either as a vanilla installation or via a program such as WAMP or XAMPP (for Windows) or MAMP (for Mac).




Demo Page:






Posted by 홍반장水 홍반장水

WebMatrix is a free and lightweight web development tool.
Create, publish, and maintain your website with ease.

Create Websites Optimized for
More Devices and Platforms  -

Posted by 홍반장水 홍반장水