Examples in Each Chapter

JavaScript Introduction

JavaScript Can Change HTML Attributes

This example changes an HTML image, by changing the src attribute of an <img> tag:

JavaScript Can Change HTML Styles (CSS)

Changing the style of an HTML element, is a variant of changing an HTML attribute:

 document.getElementById("demo").style.fontSize = "25px";

JavaScript Can Validate Data

JavaScript is often used to validate input:

HTML의 구조를 들여다보고 적용된 CSS를 찾아서 이동하는 것은 빈번한 일입니다. 이를 좀 더 빠르게 접근하기 위해 사용하는 플러그인을 소개합니다.

Goto CSS Declaration 소개

원하는 ID나 class명을 빠르게 찾아주는 기능을 하는 플러그인이다.

홈페이지 : Goto CSS Declaration
포럼 : Forum Thread

Goto CSS Declaration 설치

1. 서브라임 텍스트를 실행한 후, 단축키 Ctrl+Shift+P 로 Command Palette를 불러온다.
2. install을 입력하면 자동완성되는 Package Control: Install Package를 선택하고 엔터를 누른다.

3. gotocss를 입력하여 Goto-CSS-Declaration 소개가 검색되면 선택한 후, 엔터를 눌러 설치한다.

Goto CSS Declaration 사용법

1. 좌측에 HTML(js, 혹은 다른 포맷)의 파일을 열어두고 우측에 CSS(less, sass, 다른 포맷)파일을 열어둔다.
2. 커서를 찾길 원하는 ID나 class명에 위치킨다
3. Win+Alt+. 키를 누르면 커서가 그쪽으로 이동된다.

단축키가 홈페이지의 설명과는 다르다. Preferences > Package SettingSafari > Goto-CSS-Declaration > Key BindingSafari - Default에서 확인하자.

출처 : http://webdir.tistory.com/403

서브라임 텍스트의 접기(folding)기능을 유용하게 쓰고 있었습니다만, 종료하고 다음에 서브라임 텍스트를 실행하면 접어둔 곳이 저장되지 않는 불편함이 있었습니다. 이를 보안해주는 플러그인을 찾아서 소개합니다.

BufferScroll 소개

BufferScroll은 선택, 북마크, 접은면(folding), 선택 구문과 커서의 위치, 스크롤을 기억해뒀다가 파일을 열었을때, 이를 복원해주는 플러그인이다. 또한 응용 프로그램에서 파일의 위치에 따라 다른 데이터를 기억한다(예를 들어, 첫번째 창의 파일A와 두번째 창의 파일A의 정보를 각각 기억한다).

홈페이지 : BufferScroll

특징

• 환경설정을 통해, 스크롤, 북마크, 접힌면을 실제 창과 복제된 창사이에 동기화를 활성화 할 수 있다. 동기화 설정은 기본적으로 비활성화되어 있다. menu -> Preferences -> Package Settings -> BufferScroll -> Settings Default로 이동해서 직접 활성화해야 한다.
• 요청에 의해 작업라인이 자동으로 화면의 수직 중심에 위치하도록 만들었다.
• 접힌면을 열면, 재접기(refold)가 command palette에서 선택할 수 있도록 되어있다.
• 요청에 의해 접히거나 접히지 않은 지역을 선택하는 옵션이 생겼다.

BufferScroll 설치

1. 서브라임 텍스트를 실행한 후, 단축키 Ctrl+Shift+P 로 Command Palette를 불러온다.
2. install을 입력하면 자동완성되는 Package Control: Install Package를 선택하고 엔터를 누른다.
3. buffer를 입력하여 BufferScroll이 검색되면 선택한 후, 엔터를 눌러 설치한다.

BufferScroll 버그

• 프로젝트와 창를 열고 닫고 변경하는 것에 대한 이벤트 리스너를 이 애플리케이션이 가지고 있지 않기에 포커스된 파일에 대한 데이터를 저장할 수 없다. By not providing these listeners, this package has suboptimal methods for saving it's data. Such listening change of views, focus lost, file closing, saving, etc.
• For some reason sublime API is not restoring scroll of xml/html documents, including: xml, tpl, html, xhtml See: http://www.sublimetext.com/forum/viewtopic.php?f=3&t=6237&start=0 Also this will and is causing problems for these that use the build screeen with F4. Also, is causing another problem, that you can't request to sublime to open a file at a given row, because this plugin will overwrite the scrolled line. http://www.sublimetext.com/forum/viewtopic.php?f=5&t=3503&start=20#p22324
• There is no event listener for when a view is scrolled, then this package, has another suboptimal way of listening for changes of scroll, such tracking the scroll every x time.

출처 : http://webdir.tistory.com/403

앞서도 FTP 플러그인을 소개했지만, 구매 권유창이 자주 뜨게 됩니다. 간단한 기능만을 원한다면 이번에 살펴보는 플러그인으로 충분할 겁니다.

FTPSync 소개

FTP 동기화를 위한 단순하고 무료인 플러그인이다. 그냥 평소처럼 저장하면 그것이 목적지로 전송된다.

홈페이지 : FTPSync

FTPSync 특징

• Multiple named upload targets
• Ignored file regex patterns
• TLS를 사용한 안전한 전송
• 임시 파일을 이용한 다운로드(좀 더 안정적임)
• 새로운 원격 파일을 확인, 덮어 쓰기 방지
• 사이드바 컨택스트 메뉴를 통해서 수동으로 여러 파일 및 폴더를 업로드/다운로드 가능
• 업로드 및 다운로드에 대한 동시적인 여러 작업 수행가능
• 로컬 및 원격 이름 변경 및 삭제 가능
• 여러 업로드/다운로드에 대한 진행바 표시
• 파일 목록을 통한 원격 검색 및 조작

FTPSync 설치

1. 서브라임 텍스트를 실행한 후, 단축키 Ctrl+Shift+P 로 Command Palette를 불러온다.
2. install을 입력하면 자동완성되는 Package Control: Install Package를 선택하고 엔터를 누른다.

3. ftp를 입력하여 FTPSync가 검색되면 선택한 후, 엔터를 눌러 설치한다.

FTPSync 사용법

1. 사이드바에 등록된 프로젝트나 오픈된 폴더등에 마우스 우클릭 > FTPSync > Setup FTPSync in this folder 를 선택한다.
2. 폴더에 ftpsync.settings가 생성되며 자동으로 불러와 진다.
3. 이 파일을 아래를 참조하여 설정한다.

패스워드를 파일에 저장하는 것이 꺼림직하거나 수동으로 입력하길 원한다면 null (따옴표 없이)값을 부여한다.

FTPSync 단점 및 주의사항

• SFTP는 지원하지 않으며 계획에 없다.
• SSL/TLS는 SSL_REUSE를 실행하는 서버들에 대해서는 이를 지원하지 않는다.
• 수동 작업 후에, 지속적인 감시 및 동기화를 지원하지 않는다.
• 프록시 연결을 지원하지 않는다.
• 순간적인 원격 diff를 지원하지 않는다.
• 순간적인 원격 경로에 특수 문자를 지원하지 않는다.

설정에 대한 자세한 설명은 All settings에서 확인하자.

출처 : http://webdir.tistory.com/402

로컬에서 작업하고 저장하면 바로 서버에 반영되는 애플리케이션들을 보셨을 겁니다. 서브라임 텍스트에서도 이와 같은 기능을 하는 것이 있으니 이에 대해 알아봅니다.

Sublime SFTP 소개

Sublime SFTP는 서브라임 텍스트를 이용해서 FTP, SFTP를 사용할 수 있도록 확장해주는 플러그인이다. FTP, SFTP를 지원하고, Password 방식 뿐 아니라 SSH Key도 지원한다. 유료지만, 사용에는 제한이 없다. 가끔씩 구매권유 메시지가 뜬다.

SSH Key를 이용해서 접속하는 경우 윈도우 사용자는 SSH Key를 그대로 사용하면 안되고, PuTTYgen을 이용해서 ppk 파일로 컨버팅해서 사용해야 한다.

홈페이지 : Sublime SFTP

Sublime SFTP 특징

• 서버에서 할일을 줄여줌 - 서버측의 파일과 폴더를 편집하고 조작할 수 있다.
• 원격 폴더에 로컬폴더를 동기화한다.
  • 파일과 폴더를 발행하거나 변경 사항을 커밋(commit)한다.
  • 폴더 동기화 - 양방향으로 업로드, 다운로드
  • 폴더 동기화 - 양방향으로 업로드, 다운로드
  • 로컬과 서버의 파일에 대해 Diff(다른점)을 알린다.
• SSH 에이전트 지원으로 패스워드와 SSH Key 인증을 지원한다.
• 성능 향상을 위해 영구적인 연결을 만든다.

그 밖의 특징과 기능을 살펴보려면 Features를 살펴보라.

Sublime SFTP 설치

1. 서브라임 텍스트를 실행한 후, 단축키 Ctrl+Shift+P 로 Command Palette를 불러온다.
2. install을 입력하면 자동완성되는 Package Control: Install Package를 선택하고 엔터를 누른다.

3. sftp를 입력하여 SFTP가 검색되면 선택한 후, 엔터를 눌러 설치한다.
   

   

    

Sublime SFTP 설정 및 사용법

1. 사이드바에 등록된 프로젝트나 오픈된 폴더등에 마우스 우클릭 > SFTP/FTP > Map to Remote를 선택한다.
2. sftp-config.json라는 파일이 루트 폴더에 생성된 걸 편집기로 불러들인다(아래는 cafe24.com 호스팅을 사용하는 필자의 예이다).
3. 이 파일이 저장되면, 루트 폴더에 있는 모든 파일과 폴더에 사이드바의 컨택스트 메뉴에 새로운 옵션이 생긴다.

출처 : http://webdir.tistory.com/401