SublimeText2
Sublime Text2 라는 Tool은 FFOS 프로젝트를 위한 HTML5 스터디를 위해 알게되었습니다.
이클립스 자동완성 기능의 맞을 알게된 저는 이 툴이 매우 편리하게 다가왔죠 ㅎㅎ
그리고 개인이 무료로 사용할 수 있는 훌륭한 Tool 입니다.
각설하고, 아래 간단한 사용법과 팁을 알려드립니다.
1. Tool 다운 Site : http://www.sublimetext.com/
2. Package control (for Plug in) Site : https://packagecontrol.io/
==> Emmet 플러그인 추천
** 공식 사이트
http://docs.emmet.io/
https://github.com/sergeche/emmet-sublime
ex) html 파일 인 경우!
html:5 + Tab키
body>div + Tab키 , ul>li*20{item $} + Tab키, table>tr*10>td*5 + Tab키,
a[href="http://ironmask84.net"]>{ironmask's life} + Tab키, .title + Tab키 (div태그의 class로 자동 생성)
3. Sublime 많은 팁 Site (유용한 Plug 포함) : https://opentutorials.org/course/671/3595
제가 추천 드리는 기본적인 단축키
1. html:5 입력후 Tab키 누르면 기본적 html5 양식 출력
2. Ctrl + / : 한줄 주석달기 (html, script, css등 다 됩니다)
3. Ctrl + Shift + / : 요소별로 선택한 요소 전체 주석
4. Alt + Shift + 2, 3, 4 : 화면 영역 분할하기 (Ctrl + 1, 2, 3, 4 로 영역 포커싱 가능)
5. Ctrl + D : 현재 선택한 단어와 동일한 단어를 연속으로 선택 가능
아래는 타 블로그의 유익한 내용을 담아봤습니다. ^^
[출처] Sublime Text2 유용한 플러그인과 단축키 배우기|작성자 이야기꾼
html 코딩 중에 브라우저로 바로 열기를 추가해 보겠습니다. 해당 기능은 플러그인으로 설치하는게 아니라 직접 코드를 만들어서 플러그인을 제작한 뒤에 단축키를 지정해줘야 합니다. 에디트플러스 쓰시는 분들은 Ctrl + B로 브라우저보기 할 수 있죠. 드림위버에는 F12가 있구요.
일단 메뉴의 Tools -> New Plugin을 누릅니다. 이상한 샘플 명령어들이 있는 파일 하나가 열립니다. 그곳에 아래 내용으로 덮어 씌우기를 합니다. 그리고 저장해 준뒤 파일을 닫습니다.
import sublime, sublime_plugin
import webbrowser
class OpenBrowserCommand(sublime_plugin.TextCommand):
def run(self,edit):
url = self.view.file_name()
webbrowser.open_new(url)
[출처] Sublime Text2 유용한 플러그인과 단축키 배우기|작성자 이야기꾼
그런 뒤에 단축키를 지정해보죠. 단축키 지정은 Preference -> Key Bindings – User입니다. 지난 포스트에서 폰트 옵션을 지정한 것처럼 제가 지정한 단축키를 따로 저장하는 파일입니다. 파일이 열리면 아래의 코드를 복사해서 붙여넣어줍니다.
{ "keys": ["ctrl+b"], "command": "open_browser" }
[출처] Sublime Text2 유용한 플러그인과 단축키 배우기|작성자 이야기꾼
저장한 뒤 파일을 닫아준뒤 html 파일 작업중에 Ctrl + B를 누르면 기본 브라우저로 html 파일이 열립니다. 그럼 말이 나온 김에 단축키에 대해 알아보겠습니다. 가장 많이 사용하는 단축키는 아래와 같습니다.
- Shift + Del(Backspace) : 현재 커서가 있는 줄 완전 삭제
- Ctrl + Del(Backspace) : 단어 단위로 삭제하기
- Ctrl + Shift + D : 현재 커서가 있는 줄 아래로 현재 줄 복사
- Ctrl + Shift + [, ] : 태그 닫기와 열기
- F11 : 전체화면모드
'나는 프로그래머다! > HTML5' 카테고리의 다른 글
JavaScript - 이벤트 응용1 (버블링과 캡쳐링) (0) | 2015.07.28 |
---|---|
JavaScript - 이벤트 (0) | 2015.07.28 |
JavaScript에서의 객체와 객체지향 (0) | 2015.07.22 |
JavaScript의 함수!! (0) | 2015.07.21 |
JavaScript 재귀함수 예시 (0) | 2015.07.20 |
jQuery 와 Element 객체와 Node 객체 (0) | 2015.07.16 |
Attribute와 Property (0) | 2015.07.14 |
DOM Tree (0) | 2015.07.13 |
JQuery 초 간단 이해 (0) | 2015.07.10 |
HTML 과 JavaScript 기본 참고 사이트 (0) | 2015.06.19 |