브라켓(Brackets) 설치

브라켓은 html/css, javascript등의 작업을할 때 유용한 에디터입니다.

아톰, 서브라임, 비주얼 스투디오 코드, 노트패드 플러스 등.. 다양한 에디터가 있는데, 어느 에디터가 무조건 좋다~ 하는 것 없이 취향에 맞게 선택하면 됩니다.

저는 서브라임을 사용하다가, 한글 입력이 원활하지 않아 브라켓을 이용하고 있습니다. 다른 에디터와 큰 차이는 없지만, 심플하고 가볍습니다.

브라켓 웹사이트로 이동하면 바로 다운로드받을 수 있습니다.

원하는 경로에 설치합니다.

설치가 완료되어 실행하면 가이드 파일이 같이 열립니다.

우측의 빨간네모를 보면 누워있는 번개와 장난감 블록 모양의 버튼이 있습니다.
누워있는 번개 버튼은 실시간 미리보기 기능이고
블록 모양의 버튼은 플러그인 설정입니다.

다른 에디터들이 그러하듯, 브라켓도 플러그인이 있습니다.

제 기준으로 가장 기본적인 플러그인입니다.

Documents Toolbar는 실행되는 파일을 탭처럼 보여줍니다.

Emmet는 특정한 방식으로 작성된 문법을 코드로 변환시켜줍니다. 예를들어, div>ul>li*3를 입력하고 탭(Tab)키를 누르면,

<div>
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

이런 코드가 완성됩니다. 구조를 알고 있거나 반복되는 코드라면 편리하죠.

Indent Guides는 코드의 앞부분에 줄을 그어서 좀 더 구조를 쉽게 볼 수 있도록 해줍니다.

브라켓의 상단 메뉴에서 Emmet의 단축키를 확인할 수 있습니다.

브라켓 상단 메뉴의 보기 → Indent Guides를 선택하여 활성화하면

코드의 앞에 줄이 생겨서 구조를 확인하기 쉬워집니다.

누워있는 번개 버튼을 누르면 실시간 미리보기 기능이 실행되며, 동시에 작업하던 파일도 같이 실행됩니다. 브라우저는 기본적으로 크롬으로 되어있습니다.

브라켓에서 코드를 수정/추가한 뒤 저장하게되면, 실행되어있는 브라우저에 곧바로 적용되기 때문에 화면을 보면서 작업할 수 있습니다.

이것 말고도 PDF 연동/색상 추출 등 다양한 플러그인이 있습니다.