html 편집기 추천 : [서브라임텍스트에디터 Sublime Text Editor ] 에디트플러스(EditPlus), 커피컵(CoffeeCup), 비주얼스튜디오(VisualStudio),

가벼운 무료 HTML 추천 편집기 

서브라임 sublime text editor 다운로드

HTML 편집기에는 많은 종류가 있다.

서브라임(sublime text editor), 에디트플러스(EditPlus), 커피컵(CoffeeCup), 비주얼스튜디오(VisualStudio)등이 가장 많이 사용된다.

그중에서도 이번에 사용해볼 에디터는 서브라임 에디터!

http://www.sublimetext.com/

홈페이지 들어가면 하단에 자동으로 자신의 PC OS에 맞는걸 자동으로 인식하거나

상단의 Download를 들어가면 다운로드가 가능하다.

SublimeText2 단축키 및 한글 - 출저 - http://demun.tistory.com/2239  

SublimeText 유용한 기능과 단축키 - 출저 - https://windtale.net/blog/sublime-text-tip/

SublimeTest3 단축키 정리 출저 - http://webcreate.tistory.com/46

SublimeText2 단축키 및 한글 - 출저 - http://demun.tistory.com/2239  

Sublime Text 2 shortcut

영어	한글	단축키	설명
New File	새파일	Ctrl+N	새문서나 새파일을 만듬.
Open File	열기	Ctrl+O	새문서나 새파일을 열기
Open Folder	폴더열기		폴더열기
Open Recent		최근문서열기	최근문서열기
Reopen with Encoding	인코딩해서 다시열기		인코딩해서 다시열기
New View into File	새로보기		현재의 문서를 새탭에 열러서 새로보기
Save	저장	Ctrl+S	저장
Save with Encoding	인코딩해서 저장		현재의 문서 인코딩변경해서 저장
Save as	새로 저장	Ctrl+Shift+S	다른 이름으로 저장
Save All	모두저장		모두저장
New Window	새창으로 열기	Ctrl+Shift+N	에디터를 두개이상 실행하고자 할때 새창으로 열기
Close Window	새창 닫기	Ctrl+Shift+W	탭이 아닌 창으로 닫기
Close File	닫기	Ctrl+W	탭 또는 창 닫기
Revert File	파일되돌리기		수정되기전으로 파일을 되돌립니다.
Colse All Files	모든파일닫기		모든 파일 닫기
Exit		나가기	나가기
Undo Insert Characters	문자삽입취소	Ctrl+Z	삽입한 문자를 취소할때 사용합니다
Repeat Insert Characters	문자삽입반복	Ctrl+Y	문자 삽입 반복
Undo Insert Characters	문자삽입취소	Ctrl+U	문자 삽입 취소
Soft Redo		Ctrl+Shift+U	소프트 다시 실행
Copy	복사	Ctrl+C	복사
Cut	자르기	Ctrl+X	자르기
Paste	붙여넣기	Ctrl+V	붙여넣기
Paste and indent	붙여 넣기 및 들여 쓰기	Ctrl+Shfte+V	붙여 넣기 및 들여 쓰기
Indent	들여쓰기	Ctrl+]	들여쓰기
Unindent	내어 쓰기	Ctrl+[	내어 쓰기
Reindent	다시들여쓰기		들어쓰기나 내어쓰기한 경우 다시 되돌리는 기능
Swap Line Up	한줄위로	Ctrl+Shift+Up	현재의 행을 윗행과 교체합니다
Swap Line Down	한줄아래로	Ctrl+Shift+Down	현재의 행을 아랫행과 교체합니다
Duplicate Line	행 복사	Ctrl+Shift+D	현재의 행을 아래에 복사해서 붙여넣어줌
Delete Line	행 삭제	Ctrl+Shift+K	현재의 행을 삭제하고 위로 이동함.
Join Lines	행 합침	Ctrl+J	다음줄을 현재의 줄에 합류시킵니다.
Toggle Comment	주석 전환	Ctrl+/	주석을 만들고 없애는 기능
Toggle Block Comment		Ctrl+Shift+/	요소가 포함된 블럭 전체를 주석처리함.
Insert Line Before		Ctrl+Shift+Enter	블럭 앞에 행 삽입
Insert Line After		Ctrl+Enter	블럭 뒤에 행 삽입
Delete Word Forward		Ctrl+Delete	커서 뒤 단어 삭제
Delete Word Backward		Ctrl+Backspace	커서 앞 단어 삭제
Delete Line	한줄삭제	Ctrl+Shift+K	한줄을 삭제합니다
Delete to End	끝단어삭제	Ctrl+K,Ctrl+k	커서 다음부터 끝줄까지 삭제
Delete to Beginning	앞단어삭제	Ctrl+k,Ctrl+Backspace	커서 앞에 있는줄까지 삭제
Transpose	바꾸기	Ctrl+T	커서 왼쪽과 오른쪽 단어를 바꿈
Close Tag	태그닫기	Alt+.	열려있는 태그요소 닫기
Expand Selection to Tag		Ctrl+Shift+A	현재 커서가 위치한 요소의 전체 블럭을 선택영역으로 만들기
Wrap Selection With Tag	태그 묶음 선택	Alt+Shift+W
Set Mark	마크설정	Ctrl+K,Ctrl+Space	번호 마크를 생성합니다
Select To Mark	마크 선택	Ctrl+K,Ctrl+A	현재커서부터 마크까지 선택
Delete To Mark	마크삭제	Ctrl+K,Ctrl+W	만들어놓은 마크를 삭제합니다
Swap With Mark	마크교체	Ctrl+K,Ctrl+X	전에있던 마크를 현재있던 곳으로 교체합니다
Clear Mark	마크삭제	Ctrl+K,Ctrl+G	있던 마크를 삭제합니다
Yank		Ctrl+k,Ctrl+Y	마크영역을 현재 요소안에 삽입합니다
Fold	접기	Ctrl+Shfit+[	바로 위 부모까지 접기
Unfold	펴기	Ctrl+Shift+]	바로 아래 자식까지 펴기
Unfold All	모두 펴기	Ctrl+K,Ctrl+j	모두 펴기
Fold All	모두접기	Ctrl+K,Ctrl+1	빈줄없이 모두 접습니다
Fold Level 2		Ctrl+K,Ctrl+2
Fold Level 3		Ctrl+K,Ctrl+3
Fold Level 4		Ctrl+K,Ctrl+4
Fold Level 5		Ctrl+K,Ctrl+5
Fold Level 6		Ctrl+K,Ctrl+6
Fold Level 7		Ctrl+K,Ctrl+7
Fold Level 8		Ctrl+K,Ctrl+8
Fold Level 9		Ctrl+K,Ctrl+9
Fold Tag Attributes		Ctrl+K,Ctrl+T	현재 블럭에 있는 어트리뷰트 태그요소를 접습니다
Title Case			첫문자만 대문자로 만듭니다
Upper Case		Ctrl+K,Ctrl+U	대문자로 만듭니다
Lower Case	소문자화	Ctrl+K,Ctrl+L	소문자로 만듭니다
Swap Case			대문자를 소문자로, 소문자를 대문자로 변환
Wrap Paragraph at Ruler		Alt+Q	들여쓰기가 모아짐
Show Completions		Ctrl+Space	자동완성 툴팁 표시
Sort Lines		F9	라인에 맞쳐정렬
Sort Lines(Case Sensitive)		Ctrl+F9	라인에 맞쳐정렬(대소문자 구분)
Split into Lines		Ctl+Shift+L	선으로 분할
Add Previous Line		Ctrl+Alt+Up	커서를 위로 한행 추가하여 준비합니다
Add Next Line		Ctrl+Alt+Down	커서를 아래로 한행 추가하여 준비합니다
Single Selection	단일선택	Escape	단일 선택
Select All	모두선택	Ctrl+A	모두 선택
Expand Selection to Line	행선택	Ctrl+L	행으로 선택영역을 확장합니다
Expand Selection to Word	단어선택	Ctrl+D	단어로 선택영역을 확장합니다
Expand Selection to Scope		Ctrl+Shift+Space	범위에 있는 모든것으로 선택을 확장합니다
Expand Selection to Brackets		Ctrl+Shift+M
Expand Selection to Indentation		Ctrl+Shift+J	들여 쓰기로 선택영역 확장
Expand Selection to Tag		Ctrl+Shift+A	태그영역안까지 선택영역 확장
Find	찾기	Ctrl+F	찾기
Find Next	다음찾기	F3	다음찾기
Find Previous		Shift+F3
Incremental Find	이전찾기	Ctrl+I	이전 찾기
Replace	대체	Ctrl+H	문자열을 대체할때 사용합니다.
Replace Next	전부대체	Ctrl+Shift+H	한번에 모든 문자열을 대체합니다
Quick Find	빨리찾기	Ctrl+F3	빨리찾기
Quick Find All		Alt+F3	빠른 모두 찾기
Quick Add Next		Ctrl+K,Ctrl+D	빠른 다음 추가
Use Selection for Find		Ctrl+E
Use Selection for Replace		Ctrl+Shift+E
Find in Files		Ctrl+Shift+F	파일에서 원한는 영역찾고, 대체하기
Show Results Panel			결과 패널 표시
Next Result		F4	다음 결과
Previous Result		Shift+F4	이전 결과
Side Bar		Ctrl+K,Ctrl+B	사이드바 열기 닫기
Show Console	콘솔 보기	Ctrl+`	에디터에서 사용하는 콘솔 보기
Enter Full Screen		F11	전체 화면으로 전환
Enter Distraction Free Mode		Shift+F11	전체화면에서 가운데에 위치한 모드로 전환
Single	싱글	Alt+Shift+1	에디터 하나로 보기
Columns:2	컬럼:2	Alt+Shift+2	좌우로 두개의 컬럼으로 보기
Columns:3	컬럼:3	Alt+Shift+3	좌우로 세개의 컬럼으로 보기
Columns:4	컬럼:4	Alt+Shift+4	좌우로 네개의 컬럼으로 보기
Rows:2		Alt+Shift+8	상하로 두개의 컬럼으로 보기
Rows:3		Alt+Shift+9	상하로 세개의 컬럼으로 보기
Grid:4		Alt+Shift+5	상하로 네개의 컬럼으로 보기
Group 1		Ctrl+1
Group 1		Ctrl+Shift+1
Spell Check		F6	맞춤법 검사
Next Misspelling		Ctrl+F6	다음 철자 오류
Prev Misspelling		Ctrl+Shift+F6	이전 철자 오류
Goto Anything		Ctrl+P	바로가기
Goto Symbol		Ctrl+R	심볼 바로가기
Goto Line		Ctrl+G	행 바로가기
Next File		Ctrl+Pagedown	다음 탭으로 가기
Previous File		Ctrl+Pageup	이전 탭으로 가기
Next File in Stack		Ctrl+Tab	다음문서에서 스택으로 바로가기
Previous File in Stack		Ctrl+Shift+Tab	이전문서에서 스택으로 바로가기
Switch Header		Alt+O	해더 타이틀 변경
Scroll to Selection		Ctrl+K,Ctrl+C	커서가 있는 곳으로 스크롤
Line Up	한줄올림	Ctrl+Up	보여지는 영역이 한줄 올라감
Line Down	한줄내림	Ctrl+Down	보여지는 영역이 한줄 내려감
toggle Bookmark		Ctrl+F2	책갈피 전환
Next Bookmark		F2	다음 책갈피
Prev Bookmark		Shift+F2	이전 책갈피
Clear Bookmarks		Ctrl_Shift+F2	책갈피 삭제
Select All Bookmarks		Alt+F2	모든 책갈피를 선택
Jump to Matching Bracket		Ctrl+M	일치하는 브라켓으로 이동
Command Palette..	명령 팔레트	Ctrl+Shift+P	명령 팔레트를 불러옴
Build	생성	Ctrl+B	새로운 형식으로 생성함
Cancel Build	생성취소	Ctrl+Break	생성취소
Show Build Results			생성한 결과 보기
Next Result		F4	다음 결과 보기
Previous Result		Shift+F4	이전 결과 보기
Record Macro	매크로기록	Ctrl+Q	매크로 기록을 시작함.
Playback Macro		Ctrl+Shift+Q	매크로 재생
Save Macro			매크로 저장
Macro			매크로
Open Project	프로젝트열기		프로젝트 열기
Clear Items			아이템 삭제
Switch Project in Window		Ctrl+Alt+P	새로운 윈도우를 열어서 프로젝트 전환함
Save Project As..			프로젝트 저장
Close Project			프로젝트 닫기
Edit Project			프로젝트 편집
Add Folder to Project			프로젝트에 폴더 추가
Remove all Folders..			모든 폴더를 삭제
Refresh Folders			폴더 새로 고침
Browse Packages	브라우져패키지		플러그인이 들어있는 폴더 열기
Settings-Default			기본 설정
Settings-User			사용자 설정
Syntax Specific-User			사용자 문법
Distraction Free-User
Key Bindings-Default			키 바인딩 기본설정
Key Bindings-User			키 바이딩 사용자설정
Create Public Gist..		Ctrl+K,Ctrl+I	발행할 Gist 만들기
Create Private Gist..		Ctrl+K,Ctrl+P	개인적인 Gist 만들기
Open Gist..		Ctrl+K,Ctrl+O	Gist 열기
Insert Gist..		Ctrl+K,Ctrl+[	Gist 삽입
Add File to Gist..		Ctrl+K,Ctrl+]	Gist에 파일 첨부

SublimeText 유용한 기능과 단축키 - 출저 - https://windtale.net/blog/sublime-text-tip/

자주 쓰게되는 단축키

• 행 들여쓰기 · 내어쓰기 win: ctrl+[ · ctrl+], mac: cmd+[ · cmd+] 기본적으로 탭키를 사용할 수도 있지만, 한참 코드를 작성하다가 행단위 들여쓰기를 제어하려면 이 방식이 편하기도.

• 행 상하 이동 win: ctrl+shift+↕, mac: cmd+ctrl+↕

• 코드블럭 접기 · 펴기 win: ctrl+shift+[ · ctrl+shift+], mac: cmd+opt+[ · opt+shift+]

• 찾아바꾸기 win: ctrl+h, mac: cmd+opt+f

• 여러파일에서 찾기 win: ctrl+shift+f, mac: cmd+shift+f

• GoTo Anything win: ctrl+p, mac: cmd+p GoTo Anything을 호출한다. 해당기능은 아래서 살펴볼 것이다.

• Command Palette win: ctrl+shift+p, mac: cmd+shift+p Command Palette를 호출한다. 해당기능은 아래서 살펴볼 것이다.

유용한 기능

프로젝트단위 관리

단일파일만 작업할 것이 아니라면 일단 프로젝트부터 생성하고 보자. 아래 살펴볼 GoTo Anything이나 검색등을 잘 활용하려면 프로젝트 단위로 관리를 하는 것이 좋다. 상단 메뉴의Project - Add Folder to~ 메뉴로 작업공간을 프로젝트에 추가하자.

GoTo Anything

GoTo Anything. 파일명에 'in'이라는 단어가 들어가는 파일을 찾고 있다

이름 그대로 어디로든 이동이 가능하다. 단축키를 외워두면 좋다. (위에 소개했다)
실행하면 프로젝트 내의 모든 파일의 목록이 노출된다. 타이핑을 통해 목록에서 필터링을 통해 접근할 수 있다.
예를 들면 view/headContainer.html.erb라는 파일에 접근하려는 경우 view hc erb라는 식으로 축약해 입력해도 목록에는 원하는 파일이 노출될 것이다.

단순한 파일간 이동 뿐만이 아니라 파일내의 특정부분으로 이동도 가능하다 :line 라인넘버를 입력해서 파일의 특정라인으로의 접근이 가능하며, @symbol 심볼명을 통해 함수등 특정 심볼 정의로 이동하거나 #word 단어를 통한 특정단어위치로의 이동도 가능하다.

심지어 파일이름과 특정부분을 조합한 이동도 가능하다. html을 수정하다가 sass/common.scss의 #container 스타일 정의부분을 수정할 일이 생겼다. 이 경우 Goto Anything에서 sass comm #cont만 입력하면 간단히 원하는 위치로 이동할 수 있을 것이다. 멋지지 않은가? ;)

Command Palette

Command Palette. 'install Package' 명령을 실행하기위해 간단히 'inst pa'라고 입력했다

커맨드 팔렛트는 마우스 대신 키보드로 명령을 입력해서 실행할 수 있는 강력한 도구다. 이것도 단축키를 외워두면 인생이 편해진다. (위에 소개했다)
사용가능한 모든 메뉴가 노출되므로 하나하나 살펴보는 것도 좋고, GoTo Anything처럼 몇번의 타이핑으로 원하는 명령을 빠르게 찾을 수도 있다.
예를 들면 아래서 살펴볼 Package Control의 경우, 단지 paccon이라고 입력하는 것으로 충분하다. pcon도 괜찮고 pack도 좋다.

Package Control

Package Control의 Install Package 메뉴에서 패키지 목록을 둘러보고 있다. 패키지명과 간단한 설명이 노출된다

일단 서브라임 텍스트를 설치했으면 먼저 실행해야 하는 작업이 이 패키지 매니저란 녀석을 설치하는 것이다.
서브라임에서는 ‘패키지'라는 것이 '플러그인'의 개념이다. 패키지 매니저는 이름 그대로 서브라임이 지원하는 패키지를 관리할 수 있는 녀석이다. 복잡한 인터페이스 없이 간단한 커맨드라인명령으로 관리가 가능하다.
설치를 위해서는 먼저 콘솔창을 호출한다.

단축키 ctrl+`

하단에 콘솔창이 열릴 것이다. 아래의 내용을 복사해 콘솔창에 붙여넣고 실행(엔터)한다.

import urllib2,os; pf=‘Package Control.sublime-package’; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),‘wb’).write(urllib2.urlopen(‘http://sublime.wbond.net/’+pf.replace(‘ ’,‘%20’)).read()); print ‘Please restart Sublime Text to finish installation’

콘솔에 Please restart Sublime Text to finish installation라는 메시지가 출력되는 것을 확인하고 프로그램을 재시작한다.

만약 위의 명령으로 작동하지 않는다면 installation - Sublime Package Control을 참고해서 다시한번 설치를 시도해보자.

[2013-07-11] 현재 베타릴리즈 된 SublimeText3의 경우 위의 방식이 아닌 git을 통한 방법으로 설치를 해야한다. 공식사이트의 설명을 참고하자.

설치를 마쳤으면 이제 커맨드 팔레트를 열어 Package Control로 다룰 수 있는 명령들을 알아보자.
많이 사용하는 명령은 다음과 같다.

• Install Package: 패키지를 설치한다.
• List Package: 설치된 패키지 목록을 확인한다.
• Remove Package: 설치된 패키지를 삭제한다.
• Update Package: 설치된 패키지에 업데이트사항이 있는지 확인하고, 업데이트 내역이 있을 경우 업데이트한다.

더 자세한 내용은 Sublime Package Control에서 살펴볼 수 있다.

유용한 패키지 목록

[2013-07-11] SublimeText3의 경우 파이썬버전이 2.6 -> 3.3으로 변경되면서 호환되지 않는 패키지들이 있다. 호환성에 대해서는 Sublime Package Control Wiki의 ST3 호환성리스트를 참고하도록 하자.

내가 쓰고 있는 패키지는 다음과 같다. 코딩을 즐겁게 해준다 ;)

• BracketHighlighter
  블럭영역의 시작과 끝을 눈에 좀 더 잘 띄게(?) 해준다. 기본은 옅은 밑줄만 쳐져 있어 분간이 어려웠다.

• Theme - Soda
  조금은 뚱뚱한 느낌이 드는 기본 테마를 변경해준다. Theme는 에디터 내부 문법강조 컬러를 변경해주는 Color Scheme과는 다른 개념으로, 프로그램 전체의 룩앤필을 칭한다.

• RailsCasts Theme
  위의 Theme와는 다르게 이건 Color Scheme을 변경해준다. RailsCast 스타일이다. 현재까지 써본것중엔 기본으로 포함된 Twilight과 함께 제일 편안한 색상이다.

• Package Control
  위에서 살펴보았다. 다양한 패키지를 커맨드 팔렛트에서 관리할 수 있도록 해준다.

• Quick File Creator
  커맨드 팔렛트에서 파일, 폴더 등을 생성할 수 있다. 마우스 안녕~

• AdvancedNewFile
  [2013.07.11] ST3 호환성문제로 위의 Quick File Creator를 대체할 녀석을 찾던 중 발견. 이쪽이 더 직관적이고 사용이 편하다. 커맨드 한번으로 파일생성 가능.hello/im/arkist/msg.markdown식으로 입력하면 폴더들과 파일이 한번에 생성된다. 편하다!

• Emmet (ZenCoding)
  젠코딩을 가능하게 해준다. html 코딩할 때 이거 없으면 피곤하다.
  [2012.01.26] ZenCoding이 Emmet으로 진화했다. Fuzzy Search 기능 최고!

• SCSS
  SCSS를 위한 문법강조를 지원한다.

• ERB Insert and Toggle Commands
  ERB 블럭 입력을 도와준다.

• SublimeCodeIntel
  코드인텔리전스 기능이다. 지원언어는 다음과 같다.

  PHP, Python, RHTML, JavaScript, Smarty, Mason, Node.js, XBL, Tcl, HTML, HTML5, TemplateToolkit, XUL, Django, Perl, Ruby, Python3

• SFTP
  FTP, FTPS, SFTP 지원을 위한 녀석.
  _유료. 이것도 라이센스키를 입력하지 않으면 구매권유 팝업이 뜬다.

• Automatic Backups
  파일을 저장할때마다 백업본을 생성해준다.
  [2013.07.11] ST3 호환성을 위해 AutoBackups로 대체.

SublimeTest3 단축키 정리 출저 - http://webcreate.tistory.com/46

행 들여쓰기 · 내어쓰기 : ctrl+[, ctrl +]

코드블럭 접기 · 펴기 win: ctrl+shift+[,]

Unfold All 모두 펴기 Ctrl+K,Ctrl+j 모두 펴기

Fold All 모두접기 Ctrl+K,Ctrl+1 빈줄없이 모두 접습니다

찾아바꾸기 win: ctrl+h

GoTo Anything win: ctrl+p GoTo Anything을 호출   // 해당 폴더에 파일들을 검색, 프로젝트단위 관리 폴더 등록해야함

                       파일간 이동 뿐만이 아니라 파일내의 특정부분으로 이동도 가능하다 :line 라인넘버

                       @symbol 심볼명을 통해 함수등 특정 심볼 정의로 이동하거나 #word 단어를 통한 특정단어위치로의 이동도 가능

html을 수정하다가 sass/common.scss의 #container 스타일 정의부분을 수정할 일이 생겼다. 이 경우 Goto Anything에서 

sass comm #cont만 입력하면 간단히 원하는 위치로 이동할 수 있을 것이다

Command Palette win: ctrl+shift+p, mac: cmd+shift+p Command Palette를 호출한다

 마우스 대신 키보드로 명령을 입력해서 실행할 수 있는 강력한 도구

, GoTo Anything처럼 몇번의 타이핑으로 원하는 명령을 빠르게 찾을 수도 있다

 Package Control의 경우, 단지 paccon이라고 입력하는 것으로 충분

ctrl + P 누른후 :원하는 라인 넘버 (예 : :32)

Ctrl+G는 원하는 행으로 바로 이동

ctrl + `  파이썬 콘솔

ctrl +alt + up down 키보드로 다중편집

마우스 우측 + shift  마우스로 다중편집

마우스 우측 + ctrl + shift 마우스로 다중편집  

전체 화면 : [F11] 

Ctrl+Shift+F는 동일 폴더 내에서 단어나 문장을 찾아줍니다.

New Window 새창으로 열기 Ctrl+Shift+N 에디터를 두개이상 실행하고자 할때 새창으로 열기

Close Window 새창 닫기 Ctrl+Shift+W 탭이 아닌 창으로 닫기

ctrl + alt +Enter  <Div></div> 태그추가

Editing 

* Ctrl+C 복사 - 영역을 설정하지 않은 경우엔 한 행을 복사함 

* Ctrl+X 복사 - 영역을 설정하지 않은 경우엔 한 행을 잘라냄 

* Ctrl+V 붙이기-복사하거나 자른 것을 붙이는데 영역을 설정한 컨텐츠는 커서가 있는 자리에 붙고, 한 행인 경우엔 커서가 있는 행의 윗줄로 붙음 

* Ctrl+shift+K 행을 삭제합니다. 

* Ctrl+↩ 다음행에 입력할 수 있는 공간을 만들어줍니다. 

* Ctrl+shift+↩ 이전행에 입력할 수 있는 공간을 만들어줍니다. 

 : [Ctrl + shift + Enter] Insert Line Before 블럭 앞에 행 삽입 아래로 한라인 추가

Insert Line After Ctrl+Enter 블럭 뒤에 행 삽입

위로 한라인 추가 : [Ctrl + Shift + Enter]  

* Ctrl+shift+up,Ctrl+shift+down 해당 행을 그 윗행이나 아랫행으로 자리를 옮깁니다. 만약 영역을 설정하면 영역에 포함된 모든 행의 위치를 옮깁니다. 

* Ctrl+L 커서가 위치한 행을 선택합니다. 

* Ctrl+D 커서가 위치한 부분의 단어를 선택합니다. 반복해서 누를 경우 그 다음에 나오는 동일단어를 찾아서 선택합니다. 2번누를경우 단어 변경

* Ctrl+KK 커서위치부터 행끝까지 삭제 

* Ctrl+K+backspace 행시작부터 커서위치까지 삭제 

Delete Word Forward Ctrl+Delete 커서 뒤 단어 삭제

Delete Word Backward Ctrl+Backspace 커서 앞 단어 삭제

Transpose 바꾸기 Ctrl+T 커서 왼쪽과 오른쪽 단어를 바꿈

* Ctrl+],Ctrl+[ 해당행들여쓰기, 들여쓰기의 반대 (커서를 행 시작하는 지점에 둔 뒤 Tab, ⇧+Tab을 누르는것과 같습니다.) 

* Ctrl+shift+D 현재 행 복사하여 붙여넣기, 영역을 설정하면 설정 된 영역만 복사하여 붙여넣기 (Ctrl+C 후 Ctrl+V와 같습니다.) 

* Ctrl+J 다음행을 같은 행으로 당긴 뒤 당겨온 행의 처음으로 커서 이동 

* Ctrl+ / 현재 행 주석처리, 반복하면 주석처리 취소, 영역 선택시에는 선택한 부분만 주석처리 

* Ctrl+shift+/ 현재위치에 주석넣을 블록 생김   

* Ctrl+KU 해당단어 모두 대문자로 

* Ctrl+KL 해당단어 모두 소문자로

Close Tag 태그닫기 Alt+. 열려있는 태그요소 닫기

Expand Selection to Tag Ctrl+Shift+A 현재 커서가 위치한 요소의 전체 블럭을 선택영역으로 만들기

Wrap Selection With Tag 태그 묶음 선택 Alt+Shift+W <p> </p> 사이애 선택한 글자를 넣어준다.

확대축소 ctrl + =

 ctrl+ -

 ctrl+ 마우스휠

Ctrl+Shift+Space 범위에 있는 모든것으로 선택을 확장

Ctrl+K,+Space 왼쪽에 마크해준다

Select To Mark 마크 선택 Ctrl+K,Ctrl+A 현재커서부터 마크까지 선택

Yank Ctrl+k,Ctrl+Y 마크영역을 현재 요소안에 삽입합니다(?)

ctrl +k , ctrl + V    최근 복사했던 내용 선택하여 붙여넣기

Fold Tag Attributes Ctrl+K,Ctrl+T 현재 블럭에 있는 어트리뷰트 태그요소를 접습니다

Ctrl+Space 자동완성 툴팁 표시

Sort Lines F9 라인에 맞쳐정렬

Sort Lines(Case Sensitive) Ctrl+F9 라인에 맞쳐정렬(대소문자 구분)

CTRL + L 라인선택

CTRL +  shift + L 라인 동시 수정

숫자 선택후 ctrl + 위, 아래 하면 숫자가 올라가고 내려감

Expand Selection to Tag Ctrl+Shift+A 태그영역안까지 선택영역 확장 

F3 다음 라인이동

shift +F3 전 라인으로 이동 

Incremental Find 이전찾기 Ctrl+I 이전 찾기

Replace Next 전부대체 Ctrl+Shift+H 한번에 모든 문자열을 대체합니다

Quick Find 빨리찾기 Ctrl+F3 빨리찾기

Alt+F3   선택해준 단어 찾아준후 고칠수 있게

Ctrl+K,Ctrl+D  단어 찾아준후 고칠수 있게

Ctrl+E  태그를 단어로 만들어준다. echo -> <echo></echo>

Find in Files Ctrl+Shift+F 파일에서 원한는 영역찾고, 대체하기     

Enter Distraction Free Mode Shift+F11 전체화면에서 가운데에 위치한 모드로 전환

Single 싱글 Alt+Shift+1 에디터 하나로 보기

Columns:2 컬럼:2 Alt+Shift+2 좌우로 두개의 컬럼으로 보기

Columns:3 컬럼:3 Alt+Shift+3 좌우로 세개의 컬럼으로 보기

Columns:4 컬럼:4 Alt+Shift+4 좌우로 네개의 컬럼으로 보기

Rows:2 Alt+Shift+8 상하로 두개의 컬럼으로 보기

Rows:3 Alt+Shift+9 상하로 세개의 컬럼으로 보기

Grid:4 Alt+Shift+5 상하로 네개의 컬럼으로 보기

컬럼 나눈상태에서 ctrl + shift + 이동하고자하는 컬럼번호 하면 선택되어진 파일을 이동한다

Spell Check F6 맞춤법 검사

 ctrl + shift + T : 윈도우 powershell

Goto Anything Ctrl+P 바로가기

Goto Symbol Ctrl+R 심볼 바로가기

Goto Line Ctrl+G 행 바로가기 

Next File in Stack Ctrl+Tab 다음문서에서 스택으로 바로가기

Previous File in Stack Ctrl+Shift+Tab 이전문서에서 스택으로 바로가기

Scroll to Selection Ctrl+K,Ctrl+C 커서가 있는 곳으로 스크롤

toggle Bookmark Ctrl+F2 책갈피 전환

Next Bookmark F2 다음 책갈피

Prev Bookmark Shift+F2 이전 책갈피

Clear Bookmarks Ctrl_Shift+F2 책갈피 모두 삭제

Clear Bookmarks Ctrl_+F2 책갈피 삭제

Select All Bookmarks Alt+F2 모든 책갈피를 선택

Command Palette.. 명령 팔레트 Ctrl+Shift+P 명령 팔레트를 불러옴

Build 생성 Ctrl+B 빌드

Cancel Build 생성취소 Ctrl+Break 생성취소

 Navigation/Goto Anywhere 

* Ctrl+P 열려있는 폴더내의 파일을 빨리 찾아 열 수 있다. (Ctrl+P 후 @를 달아주면 Ctrl+R과 같다.#를 달아주면 Ctrl+ ;과 같다.:를 달아주면 Ctrl+G과 같다.) 

* Ctrl+R 파일내의 css 선택자나 id를 찾아 이동한다. 

* Ctrl+; 파일내의 단어를 찾아 이동한다. 

* Ctrl+G 파일내의 행을 찾아 이동한다.

Wrap Paragraph at Ruler Alt+Q 들여쓰기가 모아짐

General 

* Ctrl+SH+P 명령어 목록을 보여줌-command prompt 

* Ctrl+KB 사이드바를 숨겼다 꺼냈다 한다

Find/Replace 

* Ctrl+F 해당 문서에서 단어 찾기 

* Ctrl+H 교체 

* Ctrl+SHIFT+F 전체 파일에서 단어가 포함 된 파일 찾기

Tabs 

* Ctrl+SHIFT+t 가장 최근에 닫은 문서(탭)열기 

* Ctrl+PgDn,Ctrl+PgUp 여러 창이 열려있는 경우, 다음창으로 이동 (이동순서는 두 버튼이 반대로 실행됨) 

스크린 내에서의 탭 이동은 [Ctrl + Tab], 스크린간의 이동은 [ALT 1, 2, 3, 4]

* Ctrl+→, Ctrl+←해당위치에서 다음(이전)단어로 이동

Split window * Alt+shift+2~4 숫자 개수만큼 창 분할하기(세로 분할) 

sfhit+ alt + 1~5 , 8,9다중화면 변경* Alt+shift+1 1개의 창으로 보여지기 

* Alt+shift+5 2행 2열 4개의 창으로 분할하기 

* Ctrl+[1,2,3,4] 여러창으로 보인 상태에서 해당 번호의 창으로 커서이동 

* Ctrl+shift+[1,2,3,4] 여러창으로 보인 상태에서 해당 번호의 창으로 현재창을 이동

* Ctrl+M 현재 코드의 닫는 괄호로 이동, 반복시 여는 괄호로 이동 

* Ctrl+shift+M현재 괄호의 모든 내용을 선택(중괄호, 대괄호, 괄호) 

* Ctrl+shift+V       복사한 단어나 문장을 붙일 때 들여쓰기를 같이 한다.

ul>li{$}*4 1234

ul>li{$@-}*4 4321

http://docs.emmet.io/cheat-sheet/

ctrl + p : 폴더 내의 내용 검색

해당 태그를 드래그하면 같은 위치의 태그가 선택되어짐

ctrl+tab : 옆페이지 열기

ctrl+shift+tab : 반대편 페이지 열기

ctrl+shift+C : color picker // 색상 선택 플러그인 설치후 사용

http://www.ipixel.com.sg/blog/web-design/easy-color-picking-in-sublime-text/   색상 선택 플러그인

crtrl+shift+R : color picker RGBA모드

ctrl+shift+위아래 : 행 상하이동

ctrl+shift+[, ] : 코드 블록 접기 펴기

ctrl+h : 찾아바꾸기

ctrl+shift+f : 여러파일에서 찾기

ctrl+p : GoTo Anything 호출

ctrl+shift+p : command palette를 호출한다.

ctrl + shift + G : 셀렉트되어있는 부분을 특정태그로 감싼다

emmet 스피드코딩

html:5 or ! for an HTML5 doctype

p.class   // p#id

h1{내용} = <h1>내용</h1>

a[href=#]  -> <a href="#"></a>

h1+h2  -> h1과 h2가 생성

h1>h2 -> h2가 h1 child로 생성

h1>h2^span -> h1아래에 h2가 생성 h2상위의 span 생성. 즉 , h1다음에 span 이 생성

(.divclass>h1)+(.divclass2>h2)   -> divclass의 그룹과 divclass2의 그룹이 생성됨

기본적으로 .name 하면 <div class="name"> 이 생성되나 ul 태그 아래에서 .name 해주면 <li class="name"> 이 생성된다

ul>li*3 -> li가 세개 생성

넘버링 

ul>li.webcreate$*3

<ul>

<li class="webcreate1"></li>

<li class="webcreate2"></li>

<li class="webcreate3"></li>

</ul>

CSS 관련 스피드코드

w50   -> width:50px

h20p+m10e

height: 20%;

margin: 10em;

p: %

e: em

x: ex

@f

@font-face {

font-family:;

src:url();

}

@f+

@font-face {

font-family: 'FontName';

src: url('FileName.eot');

src: url('FileName.eot?#iefix') format('embedded-opentype'),

 url('FileName.woff') format('woff'),

 url('FileName.ttf') format('truetype'),

 url('FileName.svg#FontName') format('svg');

font-style: normal;

font-weight: normal;

}

@

@import url();

ov:h, ov-h, ovh, oh  : overflow:hidden;

위와같이 다양한 방법이 있다.

trs

-webkit-transition: prop time;

-moz-transition: prop time;

-ms-transition: prop time;

-o-transition: prop time;

transition: prop time;

-super-foo

-webkit-super-foo: ;

-moz-super-foo: ;

-ms-super-foo: ;

-o-super-foo: ;

super-foo: ;

-wm-trf   특정 브라우저만

-webkit-transform: ;

-moz-transform: ;

transform: ;

wmso : webkit, moz, ms, o

그라디언트 

lg(left, #dff 80%, #000)

background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.8, #dff), to(#000));

background-image: -webkit-linear-gradient(left, #dff 80%, #000);

background-image: -moz-linear-gradient(left, #dff 80%, #000);

background-image: -o-linear-gradient(left, #dff 80%, #000);

background-image: linear-gradient(left, #dff 80%, #000);

더미값 생성

lorem

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis, molestias vel nam voluptate repudiandae alias fugit obcaecati magni! Ducimus, quas ut reprehenderit eum commodi cupiditate fugit incidunt similique laborum in.

lipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, a, autem, veritatis nisi alias laborum minus placeat facilis fuga nesciunt vel tenetur eius animi commodi fugiat tempore delectus explicabo enim.

Lorem숫자 -> 해당 숫자만큼 단어생성

태그 안에 더미값 생성

p*3>lorem3

<p>Lorem ipsum dolor.</p>

<p>Incidunt, saepe, harum.</p>

<p>Adipisci, quo, neque?</p>

참조 : http://windtale.net/blog/sublime-text-tip/

       http://codeflow.co.kr/question/349/sublime-text-%EB%8B%A8%EC%B6%95%ED%82%A4/

http://docs.emmet.io/cheat-sheet/

계속 수정