SublimeText2

Posted by ironmask84
2015. 6. 19. 14:54 나는 프로그래머다!/HTML5


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 : 현재 선택한 단어와 동일한 단어를 연속으로 선택 가능


아래는 타 블로그의 유익한 내용을 담아봤습니다. ^^


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)


그런 뒤에 단축키를 지정해보죠. 단축키 지정은 Preference -> Key Bindings – User입니다. 지난 포스트에서 폰트 옵션을 지정한 것처럼 제가 지정한 단축키를 따로 저장하는 파일입니다. 파일이 열리면 아래의 코드를 복사해서 붙여넣어줍니다.


{ "keys": ["ctrl+b"], "command": "open_browser" }


저장한 뒤 파일을 닫아준뒤 html 파일 작업중에 Ctrl + B를 누르면 기본 브라우저로 html 파일이 열립니다. 그럼 말이 나온 김에 단축키에 대해 알아보겠습니다. 가장 많이 사용하는 단축키는 아래와 같습니다.


  • Shift + Del(Backspace) : 현재 커서가 있는 줄 완전 삭제
  • Ctrl + Del(Backspace) : 단어 단위로 삭제하기
  • Ctrl + Shift + D : 현재 커서가 있는 줄 아래로 현재 줄 복사
  • Ctrl + Shift + [, ]  : 태그 닫기와 열기
  • F11 : 전체화면모드


 

HTML 과 JavaScript 기본 참고 사이트

Posted by ironmask84
2015. 6. 19. 14:46 나는 프로그래머다!/HTML5


기본 강의 사이트
--> https://opentutorials.org/module/904/6619

sublimeText 사이트
--> http://www.sublimetext.com/

sublimeText Package 사이트
--> https://packagecontrol.io/

웹프로그래밍 전문 블로그
--> http://webdir.tistory.com/319

'나는 프로그래머다! > 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
SublimeText2  (0) 2015.06.19