개인적으로 유용하게 쓰고있는 브라켓 확장기능을 소개하도록 하겠습니다.



1.확장기능 설치방법 



-브라켓 좌측 상단 파일 - 확장기능 관리자 선택





2.확장기능 관리자 소개




1) 설치가능

원하는 확장기능의 검색과 설치를 할 수 있는 메뉴입니다. 검색창에는 확장기능의 이름은 혹은 기능을 넣어 검색할 수 있습니다.


2) 테마

취향에 맞는 화면 테마를 설치할 수 있습니다. 다운받은 테마는 보기 - 테마를 들어가 변경할 수 있습니다. 개인적인 추천테마는 Monokai Strikes Back입니다.


3) 설치됨

다운받은 확장기능들을 확인하고 비활성화, 업데이트, 삭제등을 할 수있습니다.


4) Default

사용자가 다운받지 않아도 브라켓에서 기본적으로 제공하는 확장기능의 사용을 비활성화 할 수 있습니다.




3.추천 확장기능


1) Emmet

코드작성 시 단축어와 tab키를 누르면 자동으로 코드가 완성되는 기능입니다. Emmet의 사용에 관해서는 다음 포스팅에 자세히 설명하도록 하겠습니다.


2) Document Toolbar

기존의 다른 에디터를 사용하던 분들은 브라켓 사용 시 화면 상단에 파일을 선택할 수 있는 탭이 없어 혼란스러울 때가 있습니다. 

기본적인 브라켓의 레이아웃은 파일선택을 좌측영역에서 할 수 있는데요, 상단에 파일 선택영역을 추가할 수 있는 확장기능입니다. 


3) Minimap

브라켓은 미니맵을 기본적으로 제공하지않습니다. 확장프로그램을 사용하면 미니맵을이용해 긴 페이지를 편리하게 볼 수 있습니다.


 


4.PSD Layer Viewer


PSD Layer Viewer는 브라켓에서 기본적으로 제공하는  확장프로그램입니다.

우측 분홍색 동그라미 영역(PSD Layer Viewer)메뉴를 클릭하면 하단에 PSDETCH창이 생성됩니다.

START 버튼을 클릭합니다.


PSD파일을 불러오는 방법은 크게 3가지로 나뉩니다.

1. PSDETCH영역에 원하는 파일을 드롭다운

2. click to open을 클릭하여 파일선택

3. Google Drive / One Drive를 선택하여 클라우드에 업로드된 파일을 여는방법





원하는 PSD파일을 열면 위의 화면과 같이 좌측에는 TOOL들이 보이고 우측에는 INFO메뉴가 보입니다.


1.

 File Info

 파일명, 용량, 크기등의 기본정보를 표시해 준다

 Layers

PSD파일의 Layer기능과 동일하게 레이어를 보여준다 

 Revision&Compare

여러개의 PSD파일을 동시에 한페이지에서 확인할 수 있다. 


2.

 Hand

 포토샵의 HAND툴과 같이 페이지를 움직일 수 있다.

 Color Picker

 원하는 부분의 색상을 스포이드로 선택하여 CSS에 바로 붙여넣기할 수 있다.

 Measure&Extract

 원하는 레이어를 바로 선택가능하며 레이어의 크기를 확인해준다.

 Crop

 원하는 영역을 레이어와 관계없이 선택가능

 Comment

 


3.

 INFO

 선택된 Layer의 정보를 보여준다.

 EXTRACT

 선택된 영역을 따로 저장하거나, 문자로 이뤄진 Layer의 경우 문자를 전체복사할 수 있는 기능이 있다.


'ETC' 카테고리의 다른 글

Bracket(브라켓) 다운로드 및 설치  (0) 2018.01.18

얼마전까지 atom에디터를 사용하다 bracket에디터로 갈아타게 되었습니다.

에디터를 바꾼 가장 큰 이유는 bracket의 PSD Layer Viewer기능 때문인데 이 기능에 대해서는 다음장의 bracket plugin에서 얘기하도록 하겠습니다.


bracket의 설치 


1. http://brackets.io/





2. 파란 Download Bracket 버튼을 클릭 후 다운로드.




3. 다운로드 후 실행파일을 열고 원하는 경로와 기능을 선택하여 "Next"버튼을 누르고 설치시작.

    - Add "brackets" launcher to PATH for command line use :  cmd창에 bracket을 입력시 bracket이 실행되도록 허용.

    - Add Open with Brackets" to Explorer context menus for all files and folders : 모든 파일에서 마우스 우클릭 시 Open with Bracket이 추가된다.


-설치완료.


여기까지 bracket의 설치가 끝났다!!

다음시간에는 브라켓 플러그인 설치방법와 유용한 플러그인의 활용에대하여 알아보도록 하겠습니다.

'ETC' 카테고리의 다른 글

Bracket(브라켓)유용한 확장기능  (0) 2018.01.19

+ Recent posts