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

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

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의 경우 문자를 전체복사할 수 있는 기능이 있다.