서브라임텍스트 - 위키북스 도서 요약 및 팁

위키북스 서브라임텍스트 도서 요약하기

서브라임 텍스트(Sublime Text)는 파이썬 기반의 텍스트 편집기입니다. 텍스트 편집기는 프로그래밍을 위해서는 필수이며, 주로 코드를 작성하는 데 사용하므로 코드 편집기(Code Editor)라고도 합니다. 현재 사용되고 있는 편집기는 상당히 많습니다. 아마도 한 종류의 프로그램 중에서 가장 개수가 많은 프로그램이 바로 편집기가 아닐까 합니다. 이렇게 편집기가 많은 이유는 운영체제에 따라 편집기가 다르기도 하고 사용하는 언어나 개발자의 편의를 위해 더 나은 프로그램을 개발하다 보니 늘어날 수 밖에 없는 것 같습니다.

참고로 통합 개발 환경이란 코드 작성을 위한 편집기 기능 외에도 텍스트를 기계어로 변환하기 위한 컴파일러(Compiler), 인터프리터(Interpreter), 오류를 찾아서 수정하기 위한 디버거(Debugger), 서버 접속을 위한 FTP, 프로그램 테스트를 위한 시뮬레이터, 자동화 도구 등을 한 곳에서 실행할 수 있는 프로그램을 말합니다.

서브라임 텍스트는 비교적 최근에 만들어진 편집기 입니다. 개발자인 존 스키너(Jon Skinner)가 2008년 1월 처음 개발한 이후 2011년 1월에 일반에 공개되었습니다. 버전이 2부터 시작하는데, 이것은 이 당시의 빌드 번호가 2020였기 때문이며, 현재 3버전(빌드번호 3059)까지 나와있습니다. 서브라임 텍스트의 특징은 버전명이 항상 베타 버전으로 나오고 새로운 버전이 나오면 베타가 제거되고 새 버전이 베타 버전이 됩니다. 그래서 베타 버전으로 표시되는 기간이 상당히 깁니다. 그래서 현재 3버전도 나온 지 1년이 넘었지만 아직도 베타 단계인 것입니다. 아마 4버전이 나오면 베타 딱지가 떨어질 것입니다.

아톰(Atom, https://atom.io)은 최근에 개발돼 2014년 5월 오픈소스로 공개된 텍스트 편집기입니다. 이전까지는 초대장을 받아야 사용할 수 있었습니다. 아톰은 깃허브(Github)의 지원을 받아 개발된 편집기로서 대부분의 기능과 대자인이 서브라임 텍스트와 유사합니다. 또한 서브라임 텍스트 사용자가 이 편집기를 쉽게 사용할 수 있게끔 단축키도 거의 같습니다. 아톰은 OSX를 기준으로 만들어졌으며, 윈도우와 리눅스에도 직접 빌드해서 설치할 수 있습니다. 다만 빌드 및 설치 방법이 까다롭습니다.

 

 [유용한 단축키 - 개인 취향]

전체 글자 대문자 전환 : 블럭 후 Ctrl + K, U (연속해서 누르세요.)

전체 글자 소문자 전환 : 블럭 후 Ctrl + K, L (연속해서 누르세요.)

사이트 바 열고 닫기 : Ctrl + K, B (연속해서 누르세요.)

 

서브라임 텍스트 콘솔 열기 : Ctrl + '
커맨드 팔레트 박스 열기 : Ctrl + Shift + P

집중모드 전환 (F11, Shift + F11)

들여쓰기/내어쓰기 : Ctrl + [, Ctrl + ]

Paste and Indent(들여쓰기로 붙여넣기) : Ctrl + Shift + V

줄의 복사 : (Line – Duplicate Line : Ctrl + Shift + D)

줄의 이동 : Line – Swap Line Up/Down – Ctrl + Shift + Up / Down

줄의 삭제 : Line – Delete Line – Ctrl + Shift + K

줄의 병합 : Line – Join Lines : Ctrl + J

줄 단위 주석 처리 : Comment – Toggle Comment : Ctrl + /

빈 줄 추가 : Edit - Text – Insert Line Before / After : Ctrl + Shift + Enter / Ctrl + Enter

블록 주석 처리 : Comment – Toggle Comment : Ctrl + Shift + /

단어 삭제 : Text – Delete Word Forward : 커서를 기준으로 오른쪽 단어 삭제(Ctrl + Del)

단어 삭제 : Text – Delete Word Backward : 커서를 기준으로 왼쪽 단어 삭제(Ctrl + BS)

글자 위치 변경 : Text – Transpose(Ctrl + T)

태그로 선택 감싸기(Wrap Selection with Tag) : Tag – Close Tag (단축키 : Alt + . )

단어 선택 취소 : Ctrl + D, … Ctrl + D (반복), Ctrl + U

컬럼 선택(Column Selection) : 시작할 곳 클릭 – Shift 키 + 마우스 오른쪽 버튼

하나의 단어 제외 : Shift + Alt + 마우스 오른쪽 버튼

하나의 단어 추가 : Ctrl + Shift + 마우스 오른쪽 버튼

 

[교재 요약]

 

새탭 열기 - CTRL + N

탭 간 이동 - Alt + 숫자키(1~9) / CTRL+TAB / CTRL + PgUp, PgDown

현재 열린 탭 닫기 Ctrl + W

 

View - Side Bar - Show SideBar / Hide SideBar

단축키 : Ctrl + K, B (연속해서 누르세요)

 

레이아웃 관련 단축키 : Alt + Shift + 1~5, 8~9

보기(View) - 레이아웃(Layout) - Column:2

Alt+Shift+1 : 컬럼이 없는 초기화면

Alt+Shift+2 : 2개의 컬럼(세로분할)

Alt+Shift+3 : 3개의 컬럼(세로분할)

Alt+Shift+4 : 4개의 컬럼(세로분할)

Alt+Shift+5 : 2×2 형태의 4개로 분할

Alt+Shift+8 : 상하 2개의 행(가로분할)

Alt+Shift+9 : 상하 3개의 행(가로분할)

 

화면이 분할된 경우 단축키

현재 작업 중인 창에서 다른 창으로 커서를 옮기려면 Ctrl + 1 ~ 4

화면이 2 개인 경우 Ctrl + 1과 Ctrl +2 만 사용합니다.

 

컬럼이 2개인 상태에서 한쪽 컬럼이 더 넓다면 Alt+Shift+2를 누르면

2개의 컬럼이 균등하게 원래 상태로 되돌아갑니다.

마우스를 이용하려면 경계선에 마우스를 올려서 양방향 화살표가

나왔을 때 더블클릭하면 됩니다.

 

서브라임텍스트 콘솔 열기 - 패키지 컨트롤 설치할 때 씁니다.

Menu - View - Show Console

단축키 : Ctrl + `

 

커맨드 팔레트 박스 열기 : Ctrl + Shift + P

 

테마 및 코드 색상 변경

서브라임 텍스트는 기본적으로 다양한 컬러 스킴을 지원합니다.

Menu - Preferences - Color Scheme

 

테마 다운로드하기

Package Control : Install Package 를 선택 후 Enter

Theme - Soda 테마 찾아 다운로드

 

테마 설정하기

Menu - Preferences - Settings - User 빈파일 열어서 작성

{

    "theme" : "Soda Light 3.sublime-theme",

    "soda_classic_tabs" : true,

    "soda_folder_icons" : true

}

 

코드 색상 다운로드하기

코드 색상 다운로드 : http://buymeasoda.github.io/soda-theme/

colour-scheme.zip 다운 받습니다.

다운받은 파일을 다음 경로에 복사해 붙여넣습니다.

Preferences - Browse Packages - 폴더 열림

User 폴더로 들어가서 다운받은 파일 붙여넣기

편집기에서 Preferences - Color Scheme - User - Espresso Soda 를

선택하면 컬러 스킴으로 변경되며

"theme" : "Soda Light 3.sublime-theme" 라는 코드가 추가됩니다.

 

코딩 폰트 변경

Menu - Preferences - Font - Larger(또는 Smaller)

// 단축키 : Ctrl + = 또는 Ctrl + Shift + =

Preferences.sublime.settings 파일이 열린 상태에서 키를 누르면

폰트 사이즈의 숫자가 변경되는 모습을 확인할 수 있다.

 

메뉴에서 Preferences - Settings - User 를 선택하면 사용자 파일이 열립니다.

줄의 상단 패딩 설정하기

{

"font_size" : 14,

"soda_classic_tabs" : true,

"soda_folder_icons" : true,

"theme" : "Soda Light 3.sublime-theme",

"font_face" : "",

"line_padding_top" : 5

}

 

서브라임텍스트에서 마지막 탭을 닫아도 창이 닫히지 않게 만들기

Preferences - Settings - Default 를 선택한 후

"close_windows_when_empty": false,

이 값을 변경해준다. Windows 에서 기본값은 false 이다.

 

집중모드 설정(F11, Shift + F11)

설정변경방법 : Preferences - Settings - More - Distraction Free - User

- line numbers 는 줄 번호를 나타나게 합니다.

- gutter 는 줄 번호가 나타나는 열을 말하며, 이것이 false로 설정돼 있으면 line_numbers 가 true로 돼 있어도 줄번호가 나타나지 않습니다.

- draw_centered 는 코드가 중앙에 나타나게 합니다.

- wrap_width 는 코드가 나타나는 부분의 폭을 의미하며, 0으로 설정하면 모니터 화면 크기로 늘어납니다. 단위는 하나의 글자 크기입니다.

- word_wrap 는 단어 넘김 기능으로 위의 wrap_width 폭을 초과하는 코드는 다음 줄로 넘깁니다.

- scroll_past_end 는 편집기 하단에 코드가 없더라도 끝까지 스크롤할 수 있는 기능입니다.

 

서브라임텍스트 설정 참고 : http://eduardolopes.github.io/sublime-config

 

단축키 바인딩하기

Menu - Preferences - Key Bindings - Default 를 선택하면 나타납니다.

사용자 단축키 조합 만들기

Menu - Preferences - Key Bindings - User 를 선택한 후 편집합니다.

 

참고사항

서브라임 텍스트에서 일어나는 모든 행동을 기록하는 명령어

Ctrl + ' 를 눌러 콘솔 창을 열고 sublime.log_commands(True) 를 입력

Ctrl + ' 를 눌러 콘솔 창을 열고 sublime.log_commands(False) 를 입력

 

파일(File) 메뉴

- Open Recent : 최근에 열었던 파일의 목록이 나옵니다.

- Reopen with Encoding : 파일의 인코딩을 수정하면서 다시 여는 기능입니다.

- Save with Encoding : 원하는 인코딩으로 파일을 저장합니다.

- New View into File : 열려있는 파일을 다른 탭에 다시 열고 두 파일을 동시에 편집할 수 있는 기능으로 하나의 파일을 편집하면 저장하지 않아도 다른 파일에도 적용됩니다. 두개의 파일을두개의 컬럼에 열고 비교하면서 수정할 때 유용합니다.

- Revert Files : 수정한 파일을 처음 열었던 상태로 되돌리는 기능입니다.

 

편집(Edit) 메뉴

- 저장기록에서 붙여넣기(Paste from History) : Ctrl + K, Ctrl + V

Edit - Paste from History 를 선택하면 클립보드에 저장된 기록이 나타납니다.

저장한 내역이 없다면 아무것도 나타나지 않습니다.

- Edit - Line - Indent(들여쓰기)/Outdent(내어쓰기) : Ctrl + [ 또는 Ctrl + ]

- Edit - Line - Reindent(들여쓰기 복구)

다른 곳에서 코드를 복사해온 경우 들여쓰기를 일관되게 처리할 수 있다. 다른 사람이 작업한 파일을 열어보면 탭이 4개로 돼 있는 것도 있고, 2개로 돼 있는 것도 있으며, 어떤 곳은 한 줄에 탭과 스페이스가 동시에 사용된 경우도 있다. 이 같은 현상은 코드 작성에 집중하다 보면 흔히 일어날 수 있다.

코딩 라인에 점은 스페이스, 대시는 탭을 나타나게 하려면 Preferences - Settings - User 를 선택하고 다음을 추가한 후 저장한다.

“draw_white_space”: “all”

탭과 스페이스가 섞여 있고 탭 크기가 서로 다른, 정리가 안 된 파일을 정리하려면 우선 우측 하단의 탭 크기 부분을 클릭해 Convert Indentation to Tabs 를 선택합니다. 그러면 Spaces:4가 Tab Size:4로 바뀝니다. 그런 다음 메뉴에서 Edit - Line - Reindent 를 차례로 선택하면 탭과 스페이스가 섞여 있던 것이 탭으로 바뀌면서 크기도 4로 변경됩니다. 이제 탭 크기를 2로 변경하면 됩니다.

Paste and Indent(들여쓰기로 붙여넣기) : Ctrl + Shift + V

줄의 복사 : (Line – Duplicate Line : Ctrl + Shift + D)

줄의 이동 : Line – Swap Line Up/Down – Ctrl + Shift + Up / Down

줄의 삭제 : Line – Delete Line – Ctrl + Shift + K

줄의 병합 : Line – Join Lines : Ctrl + J

코드의 줄에 커서를 놓고 Join Lines(Ctrl+J)를 선택하면 공백 한 칸이 만들어지면서 다음 줄에 있는 코드가 붙여집니다. HTML 코드의 경우 공백이 만들어지지만 세로 형태의 텍스트를 가로로 전환할 때는 이 기능이 아주 유용합니다. 세로로 정렬된 텍스트에서 Ctrl+J 키만 계속 누르면 가로로 정렬되고 공백도 만들어집니다.

줄 단위 주석 처리 : Comment – Toggle Comment : Ctrl + /

블록 주석 처리 : Comment – Toggle Comment : Ctrl + Shift + /

빈 줄 추가 : Edit - Text – Insert Line Before / After : Ctrl + Shift + Enter / Ctrl + Enter

단어 삭제 : Text – Delete Word Forward : 커서를 기준으로 오른쪽 단어 삭제(Ctrl + Del)

단어 삭제 : Text – Delete Word Backward : 커서를 기준으로 왼쪽 단어 삭제(Ctrl + BS)

커서가 위치한 곳에서 줄의 오른쪽 끝까지 삭제하려면 Ctrl + K를 두 번 누르고, 줄의 왼쪽 끝까지 삭제하려면 Ctrl + K, Ctrl+BackSpace를 차례로 누릅니다.

글자 위치 변경 : Text – Transpose(Ctrl + T)

태그로 선택 감싸기(Wrap Selection with Tag) : Tag – Close Tag (단축키 : Alt + . ) // 종료태그

글자에 블록을 설정하고 Wrap Selection with Tage(단축키 : Alt+Shift+W)를 선택하면 기본 태그인 p 태그로 감싸며 원하는 태그를 입력하면 변경됩니다.

 

지점표시(Mark)

일정한 곳에 커서를 두고 Set Mark(단축키 : Ctrl+K, Ctrl+Space)를 선택하면 줄 번호에 점이 표시됩니다. 원하는 곳을 클릭한 후 Select to Mark를 선택하면 마크가 있는 곳까지 선택됩니다. Swap with Mark(단축키 : Ctrl+K, Ctrl+X)를 선택하면 선택 영역이 제거되고 처음 마크한 부분으로 커서가 이동하며, 다시 같은 키를 차례로 누르면 커서가 이전 위치로 이동하면서 선택됩니다. 즉 스와핑되는 것이죠. Clear Mark(단축키 : Ctrl+K, Ctrl+G)를 선택하면 지점 표시가 제거되며 선택 영역은 그대로 유지됩니다.

 

코드 접기(Code Folding)

블록 설정을 하고 Code Folding – Fold (단축키 : Ctrl+Shift+[ )를 선택하면 코드가 접히면서 아이콘이 만들어집니다. 여러 곳의 코드를 접은 경우 해당 아이콘 오른쪽에 커서를 두고 Unfold(단축키: Ctrl+Shift+] )를 선택하면 펼쳐지며, 모두 펼치려면(접기 취소) Unfold All(단축키 : Ctrl+K, Ctrl+J)을 선택합니다. 다만 원래대로 모두 접는 기능은 없습니다.

태그의 들여쓰기 레벨별로 접으려면 Fold Level(단축키 : Ctrl+K, Ctrl+숫자 키)을 사용합니다. Fold All(단축키 : Ctrl+K, Ctrl+1)을 선택하면 최상위 태그(HTML의 경우)를 제외한 자식 요소가 접힙니다.

Fold Tag Attributes(단축키 : Ctrl+K, Ctrl+T)를 선택하면 태그의 속성이 모두 접힙니다. 이 기능은 전체 코드를 단순하게 보는 데 유용합니다.

 

자동 완성

HTML 파일을 편집할 때 태그를 입력하기 위해 첫 글자를 입력하면 이 글자가 들어간 태그가 자동으로 나타납니다. 스타일시트에서도 속성의 첫 글자를 입력하면 CSS의 속성이 나타나며, 특히 서브라임 텍스트는 퍼지 기능이 있어서 두 개의 글자를 입력하면 이 글자가 들어간 모든 속성이 나열됩니다. 즉, bc로 시작하는 속성이 아니더라도 b와 c가 포함된 모든 속성이 나타나는 것입니다. 이러한 자동 완성 기능은 에멧(Emmet) 플러그인을 설치하면 더욱 풍부한 기능을 사용할 수 있습니다.

일반 텍스트의 경우 글자를 입력하고 Edit – Show Completions(단축키 : Ctrl+Space)를 선택하면 태그나 문서 내의 모든 단어 중에서 입력한 글자가 들어간 단어를 보여줍니다. 목록에서 마우스 휠은 작동하지 않으므로 스크롤바를 클릭해서 드래그하거나 Up/Down 키를 사용해 검색합니다. 원하는 단어를 찾은 경우 엔터 키나 탭 키를 누르면 완성되고 값을 바로 입력할 수 있게 커서가 위치하며, 입력 후 다시 탭 키를 누르면 다음 입력할 위치로 바로 이동합니다.

각진 괄호로 시작한 후 글자를 입력하면 자동 완성 목록이 바로 나타나지만 글자부터 입력할 경우 Ctrl+Space 키를 눌러야 자동완성 목록이 나타납니다. 하지만 글자를 입력한 후 탭 키를 누르면 가장 가능성 높은 태그나 단어가 바로 완성됩니다.

 

선택(Selection) 메뉴

- 단어의 선택 : 한 단어를 선택한 후 Ctrl + D, … Ctrl + D (반복)

단어 선택 취소 : Ctrl + D, … Ctrl + D (반복), Ctrl + U

단어 선택 후 다음 단어 건너 뛰기 : Ctrl + D, Ctrl + K, Ctrl + D

문서 내의 같은 단어를 모두 선택하려면 단어에 커서를 배치한 후 Alt + F3를 누릅니다.

컬럼 선택(Column Selection) : 시작할 곳 클릭 – Shift 키 + 마우스 오른쪽 버튼

하나의 단어 제외 : Shift + Alt + 마우스 오른쪽 버튼

하나의 단어 추가 : Ctrl + Shift + 마우스 오른쪽 버튼

키보드로 선택하는 법 : Ctrl + Alt + Down 그런 다음 Alt + Shift + Right

줄 선택(Line Selection) : Ctrl + L

들여쓰기 선택 확장(Expand Selection to Indentation) : Ctrl + Shift + J

같은 레벨로 들여쓰기된 요소는 모두 선택되며, 다시 같은 키를 누르면 부모요소까지 확장됩니다.

[실습]

입력예시) HTML, CSS, JS, Javascript, framework, bootstrap, JSP, front-end

HTML 다음에 입력된 , (컴마 스페이스)를 선택 후 Ctrl + D를 눌러 front-end 이전까지 선택합니다.

Delete를 눌러 제거한 다음 엔터 키를 누르면 모든 단어가 세로로 배치됩니다.

HTML

CSS

JS

Javascript

framework

bootstrap

font-end

커서를 HTML 앞에 배치한 다음 Shift+Down을 눌러 모두 선택합니다.

줄로 나누기 단축키인 Ctrl+Shift+L을 누르면 각 단어 오른쪽에 커서가 만들어 집니다.

쌍따옴표 키를 한번 누르면 각 단어를 감싸는 따옴표가 만들어집니다.

Right 키를 누르면 선택이 해제되면서 커서는 줄 끝에 남아 있습니다.

커서를 HTML 앞에 배치한 다음 Shift+Down을 눌러 모두 선택합니다.

줄로 나누기 단축키인 Ctrl+Shift+L을 누르면 각 단어 오른쪽에 커서가 만들어 집니다.

Left 키를 누르면 선택이 해제되면서 커서는 좌측 끝에 커서가 남습니다.

좌측 대괄호 키를 입력한 다음 Esc 키를 누릅니다.

 

보기(View) 메뉴

- Ctrl + K, Up 방향키 : 2 개의 컬럼이 만들어지면서 작업 중인 탭이 오른쪽 컬럼에 배치됩니다.

컬럼 간 이동 : Ctrl + 1, Ctrl + 2, Ctrl + 3

Ctrl + K, Ctrl + Up 방향키

원상복귀 : Alt + Shift + 1

전체화면 모드 : F11, Shift + F11

가기(Goto) 메뉴

원하는 곳으로 가기(Go to Anything) : 단축키 Ctrl + P

·# (샵) : 열린 파일에서 검색하기

·: (콜론) : 줄번호 바로 찾기(Ctrl + G)

 

도구(Tools) 메뉴

Command Palette : Ctrl + Shift + P

 

[실습]

새 HTML 문서를 만들기 위해 Ctrl + N을 누르면 일반 텍스트 파일이 만들어집니다.

여기서 Ctrl + Shift + P를 누르고 HTML 로 검색해 선택하면 바로 문법이 바뀝니다.

 

2부 패키지 활용

1. Emmet(Zen Coding) : 자동 완성 기능

- Ctrl + N → Ctrl + Shift + P → HTML 검색 → 첫 줄에 html:5 입력 후 tab 키 ^^

- ul.nav>li 입력 후 tab 키 → <ul class=“nav”><li></li></ul>

- ul.nav>li*3>a 입력 후 tab 키

→ <ul class=“nav”>

<li><a href=“”></a></li>

<li><a href=“”></a></li>

<li><a href=“”></a></li>

</ul>

- em>.item 입력 후 tab 키 → <em><span class=“item”></span></em>

- 단어를 선택한 후 Ctrl+Shift+G 를 누르면 하단에 패널이 나타나면서 div 태그로 감싸게 되고 클래스를 입력하면 div 이 지워지고 코드에는 클래스 속성과 값이 나타납니다.

2. FTP 연결하기

3. 사이드바 기능 향상(SideBarEnhancements)

4. 컬러 피커(Color Picker) : Ctrl + Shift + C

5. 코드 축약(Minifier) : 코드의 공백을 모두 제거하고 한줄로 만드는 패키지

6. HTML/CSS/JS Prettify : Minifier로 축약한 파일을 대상으로 Ctrl + Shift + H 코드 정렬

7. BracketHighlighter : 태그나 따옴표, 괄호를 잘 구분하는 플러그인

8. AutoPrefixr : CSS3 의 속성을 웹표준에 맞춰 접두어를 변경해주는 기능

9. Canluse : Ctrl + Alt + F, 해당 CSS 속성의 웹표준 상태 확인

10. CSSComb : 스타일시트를 보기 좋게 정리해주는 패키지

11. Sublime Alignment : Ctrl + Alt + A , 코드 정리

12. Trimmer : 불필요한 공백을 제거하는 패키지, Ctrl + Alt + S

13. HyperLinkHelper : 도메인에 URL 링크를 만들어 줌 Ctrl + Shift + Alt + L, Ctrl + Alt + L

14. 파일 가져오기(Fectch)

15. SublimeLinter : 코드 작성시 에러를 즉시 감지해서 알려주는 패키지

16. 패키지 리소스 보기(PackageResourceViewer)

17. 서브라임 텍스트에서 커맨드 라인 열기 : Terminal 설치 후 Ctrl + Shift + T

18. SublimeREPL : 편집기 내부에서 커맨드 라인 기능을 사용할 수 있도록 함

19. Goto Documentation

20. Javascript & NodeJs Snippet : 코드 조각 패키지