XAML or HTML

[툴] Brackets plugin 두번째 (확장 유틸)

etc

Brackets을 계속 사용하다 보니 괜찮은 플러그인이 계속 발견하게 되었다. 추가로 몇 가지 더 정리한다.

   

1. Code folding for Brackets

출처: <https://github.com/thehogfather/brackets-code-folding>

코드의 양이 늘어나면 스크롤하는 것도 점점 힘들어지기 시작한다. 한 줄로 접어서 스크롤의 길이를 줄일 수 있다.

   

2. Brackets Document Toolbar(with tabs)

출처: <https://github.com/dnbard/brackets-documents-toolbar>

   

매우 편리한 탭 형태로 열려 있는 도큐먼트를 표시 할 수 있다. 당연히 드래그앤드랍 동작으로 순서를 변경할 수도 있다. 일반적인 탭 UI 룰을 따르고 있다.

   

3. Indent Guides for Brackets

출처: <https://github.com/lkcampbell/brackets-indent-guides>

   

때에 따라 가독성을 위한 들여쓰기가 애매하게 보일 때가 있다. 가이드 라인을 생성해서 도움을 주는 플러그인이다. 보기 메뉴에서 Indent Guides를 책크해야 활성화된다.

   

   

  1. Monokai Dark Soda

출처: <https://github.com/rainje/Monokai-Dark-Soda>

호기심에 여러 테마를 설치해 봤는데 인기 순위가 높은 것들은 다 이유가 있는 것 같다. 형광 계열 색상이 가독성에 크게 도움이 되는 느낌이 든다.

   

<참고>

Brackets Extensions Weekly

http://brackets.dnbard.com/extensions

TOP-100 extensions

http://ingorichter.github.io/BracketsExtensionTweetBot/

[툴] Brackets plugin (확장 유틸)

etc

Brackets 에티터 자체도 매우 좋은데 좋은 플러그인이 많다는 것을 알게 되었다.
이것저것 설치해서 써보다가 평소 WPF 프로젝트에 사용했던 Visual Studio와 비슷한 기능이 더 있으면 좋겠다는 생각이 나서 몇가지 더 찾아봤다.

좌측 사이드 바의 파일명 앞에 아이콘을 보여준다. 보기에 이쁘기도 하고 파일 포멧이 눈에 잘 띈다.

1. Brackets File Icons

출처: <https://github.com/drewbkoch/Brackets-File-Icons>

   

   

CSS 파일 또는

JavaScript 파일의 indent 공백에 점선을 넣어 가시성을 높여준다. Dark Theme에서는 보이지 않는 버그(?)가 있다.

2. VisibleTabs

출처: <https://github.com/Carreau/brackets-visualTabs>

   

   

스크롤 대신에 미니맵을 보여주어서 코드 블록 이동할 해당 위치를 짐작하는데 도움을 준다. 가로 크기를 조정할 있으면 좋을 텐데 되지 않아 아쉽다.

3-1. brackets-minimap

출처: <https://github.com/zorgzerg/brackets-minimap>

   

3-2. Neon Minimap Brackets Extension

출처: <https://github.com/dustindowell22/neon-minimap-brackets-extension>

   

   

빠르게 CSS 파일을 Minify(압축)해서 min.css 파일을 생성해준다.

4. Minifier for Brackets

출처: <https://github.com/wylst/brackets-minifier>

   

아래 플러그인은 위 플러그인과 반대로 블록을 설정한 코드 블록을 indent를 보기 좋게 정리해준다.

5. brackets-beautify

출처: <https://github.com/drewhamlett/brackets-beautify>

   

아직 모르는 좋은 플러그인들이 더 많겠지만, 위 5가지 정도를 설치해 주고 사용하면 매우 편리하다.

   

<참고>

http://martian36.tistory.com/1226

http://blog.naver.com/20th_pilot/220203300333

https://brackets-registry.aboutweb.com/

[툴] HTML5 Outliner - Chrome

etc

'암묵적인 구조생성'

   

다운로드: chrome://extensions/

Chrome 브라우저 설치 후 HTML5 Outliner( http://goo.gl/VFCPuW ) 확장 프로그램을 설치한다.

 

  • 웹 페이지의 구조를 판별할 수 있는 개념으로 책의 목차와 비슷한 기능을 한다.
  • HTML5에서 추가된 요소들 대부분이 아웃라인 개념과 관련이 있다.
  • 아웃라인을 구성하는 요소에는 Heading, Sectioning 콘텐츠, Sectioning의 루트요소, Header, Footer등 다양한 요소가 있다.
  • 루트요소로는 h1~h6, p등이 될 수 있고 색션을 나눈 형태에 따라 자동으로 형성된다.

   

네이버를 예를 들어 눈에 보이지 않는 페이지의 암묵적인 아웃라인 구조를 한눈에 볼 수 있다.

   

좀 더 자세한 내용은 아래 링크를 참고하자.

   

[툴] 크롬(Chrome) 브라우저 기초 기본

etc

다운로드: https://www.google.com/chrome/browser/desktop/index.html

   

간단 사용법

   

F12를 입력해 개발자 도구를 활성화한다.

단축키 Ctrl+Shift+C를 입력한 후 요소검사를 할 객체를 클릭한다. 개발자 도구를 사용할 수 있다.

마우스 오른쪽 버튼을 클릭한 후 요소검사를 할 수도 있다.

Ctrl+[+], Ctrl+[-] 화면을 확대, 축소한다. Ctrl+[0]을 입력하면 초기화한다.

디바이스(Device) 모드로 전환해 다양한 모바일 및 태블릿 기기 뷰포트(Viewport)를 태스트한다.

웹 뿐만 아니라 앱 개발자에게 반드시 필요한 도구가 아닐까 한다.

[툴] Brackets 에디터 기본

etc

다운로드: http://brackets.io/

   

자주 사용하는 단축키(물론 주관적)

   

1. <html> 선태그를 입력하면 </html> 후태그가 자동완성된다.

2. Ctrl + D: 현재 라인을 아래 라인에 복사한다.

3. Ctrl + Shift + D: 현재 라인을 삭제한다.

4. Ctrl + Space: html 태그의 속성, CSS 속성과 값 등을 자동완성 목록을 활성화 시킨다.

5. Space: html 태그의 속성, CSS 속성과 값 등을 자동완성 목록을 활성화 시킨다.

6. Ctrl + /: 라인 전체를 주석, 반대로 해제도 가능

7. Ctrl + Shift + /: 블록 영역만 주석, 반대로 해제도 가능. html 주석은 <!-- -->, CSS 주석은 /* */

   

자주 사용하지 않는 단축키

   

1. Ctrl + [ or ] : 내어쓰기 / 들여쓰기(Indent)

2. Ctrl + Shift + 위 or 아래 방향키 : 라인 전체 이동

3. Ctrl + Alt + 위 or 아래 방향키 : 근접 라인 추가 선택/ 해제

   

간단 사용법

   

선태그를 입력하면

후태그가 자동완성된다. (선, 후 맞는 표현인지는 모르겠다. 올바른 용어 발견하면 수정예정)

   

장점

   

포토샵으로 유명한 어도비(Adobe)사의 제품답게 이미지 미리보기(Preview) 기능이 일품이다.

더 인상적인 기능은 이미지 경로 입력시 힌팅(Hinting) 기능을 제공한다는 것이다. 사람은 오타를 내기마련이다.

마지막 대박, 실시간 미리보기 기능이다. 드림위버와 같은 툴이 흔히 제공하는 기능이지만 가벼운 에디터에서는 보기드문 기능이다.

덤으로 한글화는 영어 싫어하시는 분들에게 강추다.

   

   

[툴] Sublime Text 3 에디터 기본

etc

다운로드: http://www.sublimetext.com/3

   

자주 사용하는 단축키(물론 주관적)

   

1. html 태그를 입력하고 Tab 키를 입력하면 열고 닫는(짝) 태그가 자동완성된다.

2. Ctrl + Shift + D: 현재 라인을 아래 라인에 복사한다.

3. Ctrl + Shift + K: 현재 라인을 삭제한다.

4. Ctrl + Space: html 태그의 속성, CSS 속성과 값 등을 자동완성 목록을 활성화 시킨다.

5. Ctrl + /: 라인에서는 라인 전체를 주석, 블록 설정 후 에는 블록 영역만 주석, 반대로 해제도 가능. html 주석은 <!-- -->, CSS 주석은 /* */

6. Ctrl + K + B: 왼쪽 사이드바 숨기기 / 보이기

7. Ctrl + D: 누를 때 마다 일치하는 다음 단어를 찾아서 커서를 위치하고 편집이 가능하다.

8. . Alt + F3: 한번에 일치하는 모든 단어를 찾아서 커서를 위치하고 한번에 편집이 가능하다.

   

자주 사용하지 않는 단축키

   

1. Ctrl + [ or ] : 내어쓰기 / 들여쓰기(Indent)

2. Ctrl + Shift + [ or ] : 코드블럭 닫기 / 열기

3. Ctrl + Shift + 위 or 아래 방향키 : 라인 전체 이동

4. Ctrl + Alt + 위 or 아래 방향키 : 근접 라인 추가 선택/ 해제

   

간단 사용법

   

첫 줄에서 html을 입력하고 Tab 키를 누르면

html5 문서의 기본 구조가 자동완성된다.

   

장점

   

다양한 문서 포맷을 지원한다.

선택한 포맷에 따라 자동완성을 지원한다.

깔끔한 UI, 가벼운 문서편집, 거기다 무료, 플러그인을 통한 확장성이 뛰어나다는데 아직 나는 거기까지는...