sublime text 3 단축키 정리
Sublime Text의 편리함은 이루 말할 수 없다.
누구나 사용해보면 그 매력에 푹빠져
다른 편집기는 사용 못할 것이다
다양한 기능과
지원되는 수많은 플러그인으로
각종 기능을 가득 담고있는 Sublime Text
버전 3의 단축키를 모아보았다,
정리가 제대로 되어 있지 않는 느낌이 들것이다.
내용을 계속 추가중이니
참고바랍니다.
혹시 제가 적어놓지 않은 필수 단축키가 있다면
알려주시면 감사하겠습니다.
행 들여쓰기 · 내어쓰기 : 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>
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.
태그 안에 더미값 생성
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/
계속 수정
'웹관련정보' 카테고리의 다른 글
text-area 늘리기 텍스트 박스 늘리기 (0) | 2014.03.04 |
---|---|
후이즈에서 hostinger로 도메인 설정하기 (2) | 2014.02.28 |
웹에서 각 나라별 ip로 혹은 OS언어 구분하여 사이트 언어 구성하기 (0) | 2014.02.13 |
jquery 버튼 클릭후 input 값가져오기 (0) | 2014.01.17 |
jquery 이용하여 input 숫자만 입력가능하도록 (0) | 2014.01.17 |