[HTML Editor] 브라켓(Bracket) 설치 / 확장기능 (플러그인) 설치 / 필수 확장 기능 추천.

html과 css, javascript 등을 코딩할 때, 다양한 에디터들이 있지만, 오늘 소개할 에디터는 Adobe에서 만든 오픈소스 에디터인 브라켓(Bracket)입니다. 브라켓은 html, css, javascript등을 코딩하는데 최적화되어 있으며, 코딩할 때 중요한 태그 자동 생성기능 및 브라우저 실시간 확인등의 확장 기능을 통해 편리하게 마크업을 할 수 있도록 도와줍니다.

 

브라켓(Bracket)의 가장 큰 장점은 플러그인 없어도 라이브 미리 보기 기능을 기본으로 제공하고 있다는 것입니다. 실시간으로 html, css, javascript 파일을 수정하면 바로바로 웹서비스에 반영되어 볼 수 있습니다.

 

1. 브라켓(Bracket) 다운로드 & 설치.

 

https://brackets.io/

A modern, open source code editor that understands web design

 

- 다운로드를 클릭하면 다운로드가 실행됩니다.

- 현재 Bracket-2.2.1.exe 파일이 다운로도 됩니다.

- 다운로드가 완료되면 실행시켜서 설치를 시작합니다.

 

- 동의에 체크하고 다음으로 진행.

- 설치는 필요한 것만 골라서 설치를 하겠다는 분은 사용자지정으로 필요한 것만 지정하여 설치하면 되고, 그런 것을 잘 모르겠다라는 분은 일반으로 설치를 하면 됩니다.

 

- 설치가 완료되면 Run 버튼을 클릭하여 실행시킵니다.

- Run 버튼을 누르면 알아서 설치 완료 창은 사라지고 설치된 브라켓(Bracket)이 실행됩니다.

- 이렇게 설치한 후 바로 사용이 가능하지만, 좀 더 편리하게 사용하기 위해서는 몇가지 확장기능(플러그인)을 설치해야 합니다. 플러그인을 설치하기 위해서는 하단에 있는 블럭모양을 클릭하면 됩니다.

 

- 블럭 모양을 클릭하면 위와 같은 팝업창이 나타납니다.

- 그럼 여기서 몇가지 설치할 것들을 찾아서 설치하도록 하겠습니다.

 

1) Emmet  (코드 자동 생성을 위한 플러그인)

- 저는 이미 설치를 했기 때문에 설치 버튼이 나타나지 않지만, 설치가 안되었다면 우측에 설치버튼이 생깁니다. 설치를 클릭하면 설치가 됩니다.

 

 

- Emmet 설치가 완료되면, 창의 메뉴에서 도움말 옆에 Emmet이 생성되었음을 볼 수 있습니다. 또한 플러그인 설치됨 탭을 클릭하면 Emmet이 설치되어 활성화되어 있는 것을 볼 수 있습니다.

 

2) 우클릭 메뉴 확장

- 검색창에 "우클릭"만 쳐도 우클릭 메뉴 확장 플러그인이 나타납니다.

- 사용방법은 "마우스 오른쪽을 클릭하면 메뉴에 잘라내기, 복사, 붙여넣기, 저장, 빈 줄 삭제, 실행 취소등 여러가지 기능이 추가됩니다.

 

3) Beautify

- Beautify는 작성한 코드를 보기 좋게 자동으로 정리해주는 기능입니다.

- 사용방법은 Ctrl + Shift + L 

 

4) Custom Work

- Custom Work는 웹 문서별로 탭을 만들어주는 역할을 합니다.

- 기본 브라켓은 왼쪽 영역에 파일명들로 나열되서 제작한 문서들을 이동시키는데 불편함이 있지만, Custom Work를 이용하면 해소시킬 수 있습니다.

- 설치하게 되면 별도의 작업없이 바로 적용이 됩니다.

 

5) color Highlighter

- 이는 코딩을 하면서 다양한 컬러를 사용하게 되는데, 이때 색상코드에 색상이 입혀져서 나오기 때문에 보기 좋습니다.

 

6) Interactive Linter

- 어느 문서든 에러난 곳에 전구모양 아이콘으로 왜 에러가 났는지를 알수 있도록 해줍니다.