서브라임 텍스트 플러그인 - Emmet LiveStyle

한번 쯤은 브라우저의 개발자도구들에서 임시로 수정한 내용들이 바로 저장되었으면 하는 바램이 있었을지도 모릅니다. 그 시발점에 있는 플러그인을 소개합니다.

 

Emmet LiveStyle 플러그인 시연

 

 

Emmet LiveStyle 소개

Emmet LiveStyle은 새로운 세대의 실시간 양방향(에디터↔브라우저)의 CSS 편집을 위한 플러그인이다. 현재는 Chrome, Safari과 서브라임 텍스트에서 작동한다. 위 동영상은 LiveStyle의 가장 강력한 기능을 보여준다. SASS/SCSS/LESS 에서도 작동한다.

홈페이지 : Emmet LiveStyle

LiveStyle 특징

• 즉시 업데이트 : 어떤 파일을 저장하거나 페이지를 다시 로딩할 필요없이 변경사항이 반영된다.
• 로컬 파일이 필요치 않다.
• 크로스플랫폼
• 멀티 뷰와 멀티 디바이스를 지원한다. 다른 창에서 같은 페이지를 열고 그것들 모두 즉시 업데이트가 가능해진다. 가령, 브라우저 창을 다른 크기로 두개를 띄워두고 한 개를 수정하면 두 개의 창이 모두 반영되어 반응형 디자인을 구상할때 편리해진다.
• 멀티 사이트 업데이트를 지원한다. 가령, 데스크탑 및 모바일 버전 같은 CSS를 공유하지만 다른 웹사이트인 경우 실시간으로 편집이 가능하다.
• 매우 쉬운 설치 : 어떤 복잡한 매핑이나 패턴등이 필요없이 단지 LiveStyle 브라우저 창 하나와 편집기와 연관된 CSS 파일을 열면 된다.

Emmet LiveStyle 설치

아래에서는 Sublime Text와 Chrome의 플러그인을 설치하는 방법에 대하여 다룬다.

서브라임 텍스트 플러그인 설치

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

3. live를 입력하여 LiveStyle이 검색되면 선택한 후, 엔터를 눌러 설치한다.

 

 

아래처럼 안내문구가 나오면 설치가 잘 된것입니다.

 

 

서브라임에서 플러그인을 설치한 후 개발자도구로 사용할 수 있도록 간단한 설정을 해줍니다.

Prefernces - Emmet LiveStyle - Settings - Default 에 보시면 "debug": false 라고 있습니다.

 

 

 

여기서 fault 를 true 로 변경해도 되고, 관리를 위해 user 파일을 열어서 아래처럼 그 부분만 복사해서 true 로 변경해서 저장합니다.

참고로 관리를 위해서는 Default 파일을 건드리지말고 User 파일을 사용하세요.

 

 

 

이렇게하면 디버그에서도 이 플로그인을 사용할 수 있습니다.

여기까지 되었다면 이제 크롬에서 확장기능인 Emmet LiveStyle 를 설치해야 합니다.

크롬에서 아래 링크를 클릭하면 Emmet LiveStyle 의 확장기능을 설치하는 페이지로 이동합니다.

Google Chrome 확장 설치

 

설치후 크롬 주소줄에 chrome://extensions 를 입력하거나, 상단 우측의 목록 아이콘을 클릭해서 도구 - 확장 크로그램으로 가되 아래와 같은 화면이 보일겁니다.

Emmet LiveStyle 에 체크표시가 되어 있는 것이 보일겁니다. 안되어 있다면 체크하세요.

 

 

 

 

크롬 웹스토어에서 직접 LiveStyle을 설치한다.

설치하면 개발자모드(F12)에 LiveStyle 이라는 마지막 패널이 추가된다.

 

 

 

개발자도구의 LiveStyle 탭을 클릭하면 아래처럼 LiveStyle 플러그인을 사용할거냐고 묻는 체크박스가 나옵니다.

 

 

체크를 하면 아래처럼 현재 페이지에 로딩된 스타일시트가 나옵니다.

그러면 준비는 끝입니다.

 

 

 

현재페이지의 스타일시트는 아래와 같습니다. 

 

 

이제 크롬 브라우져와 서브라임텍스트를 한 화면에 놓고 진행해보겠습니다.

서브라임텍스트에서 보시면 body 에 스타일이 크롬에서 보는 스타일과 동일한것을 알 수 있습니다.

 

 

이제 크롬 개발자도구에서 스타일을 수정을 해보겠습니다. 위 사진에서 보듯 color 값이 #fff 로 흰색으로 지정이 되어 있습니다.

이걸 blue 로 변경해보겠습니다.

blue 라고 입력했지만 아직 서브라임에서는 변경이 안되었지요.

 

 

하지만 모두 입력후 줄바꿈 또는 입력후 커서가 다른곳으로 이동하면 입력이 끝난것으로 인식하고, 서브라임텍스트에는 보시는바와같이 color 값이 변경되면서 그곳이 선택되어진것을 보실수 있을겁니다.

 

 

 

Safari 확장의 경우는 Safari extension을 참고하라.

Emmet LiveStyle 사용법

실시간으로 CSS 편집을 사용하려면 :

1. 서브라임 텍스트를 실행하고 CSS 파일을 열거나 새로 하나를 만든다.
2. 수정하고 싶은 페이지를 크롬 브라우저로 방문한다.
3. 개발자도구를 열고 LiveStyle 패널에 Enable LiveStyle을 활성화한다.
4. 활성화 됬을때, 왼쪽에 페이지의 외부의 스타일시트의 목록과 오른쪽에 편집기 파일의 목록을 볼 수 있다. 단순히 편집기 파일을 선택하면 브라우저 하나와 연결된다.

에디터의 파일 목록들은 에디터에서 생성하거나 열고 닫는 파일들을 자동적으로 매순간마다 체크하여 업데이트해 준다.

간혹 LiveStyle이 연동되지 않는 경우가 발생합니다. 이때는 콘솔창을 열고(Ctrl + `) 에러 메세지를 확인하고 문제가 발생하는 CSS 구문을 삭제하거나 수정해보길 권합니다.

출처 : http://webdir.tistory.com/400 / http://demun.tistory.com/2362