에디터/브라켓 에디터(Brackets editor)2016. 1. 6. 00:10

브라켓의 단축키 기능에 대해 많이 알지 못하였는데 검색 중 좋은 블로그를 발견하여 글을 남깁니다.좋은 정보 포스팅을 허락해 주신 '윤휘'님께 감사의 말씀 올립니다. Web Flavor - 브라켓 단축키 링크http://90yhwi.blog.me/220578222368 위 주소의 링크의 글 에서는 스크린샷과 함께 아래의 내용이 정리되어 있습니다.단축키의 정확한 사용 방법을 직관적으로 알 수 있어서 어떠한 사용을 할 수 있는지 확인해 보시는게 좋습니다. 브라켓 단축키 윈도우 용컨트롤 + q : 브라켓 종료컨트롤 + w : 현재 파일 닫기컨트롤 + e : 편집

에디터/브라켓 에디터(Brackets editor)2015. 11. 26. 16:09

예전 포스팅으로 브라켓 PSD 열기를 포스팅 한 적이 있습니다. 브라켓(Brackets)에서 PSD 사용하기 링크http://recoveryman.tistory.com/entry/%EB%B8%8C%EB%9D%BC%EC%BC%93Brackets%ED%99%95%EC%9E%A5-%EA%B8%B0%EB%8A%A5-PSD-%EC%97%B4%EA%B8%B0 브라켓에 PSD 를 볼려면PSD 파일을 '어도비 크리에이티브 클라우드' 에 업로드 해서 파일을 여는 방식인데요.그래서 어도비에 로그인을 하라는 창이 뜨는 것이죠. 이 포스팅은 바로 이렇게 등록된 PSD 를 삭제 하는 방법 입니다. 먼저 어도비 크리에이티브 클라우드에 들어갑니다. 어도비 크리에이티브 클라우드http://www.adobe.com/kr/creativ..

에디터/브라켓 에디터(Brackets editor)2015. 11. 5. 02:48

드디어 에디트 플러스를 안쓸 수 있게되었습니다. 이전엔 FTP 하면 에디트 플러스가 최고인줄 알았지만.. 에디트 플러스의 FTP 처럼 사용하기 쉬우면서도 서브라임 텍스트 처럼 내 입맛대로 에디터를 꾸밀 수 있는 녀석이 바로 브라켓(Brackets)이라는걸 이 확장 기능의 존재로 굳혀졌 습니다. 이 확장 기능의 설치부터 사용법까지 모든걸 동영상으로 첨부합니다! 동영상이 작게 보이시면 일단 동영상을 플레이 한 뒤, 우측 아래에 '전체 화면' 을 눌러주세요 설치. 서버 셋팅. 서버에 올리기. 대상 폴더 새로고침. 여기까지가 브라켓 에서의 FTP, SFTP 관리 기능 입니다. 지금 막 생각해 본게 이젠 EUC-KR 의 적용 여부 부분 을 알아보고, 브라켓 에서의 유용한 단축키 라던지 그런걸 알아본뒤 포스팅 하는..

에디터/브라켓 에디터(Brackets editor)2015. 11. 5. 02:14

이 확장 기능은 js 에서 작성된 문자들을 보기 좋게 정리 시켜 주는 확장 기능 입니다.사용자 마다 이런 기능이 필요 할 수 있고 필요 없을 수도 있겠다 싶더군요. 일단 어떤 확장 기능 인지 아래 첨부한 동영상을 보시면 이해가 빠릅니다. 흠 은근히 많이 쓰일꺼 같이 보이는 느낌이 드는건 저만 그럴지도..;; 아무튼 이것도 바로전에 소개 해드린 확장 기능인 HTML Wrapper와 비슷한 사용법 입니다. 드래그한 영역을 보기 좋게 정리시켜 주죠.또한 단축키를 연타하면 불필요한 공백마져 정리시켜 줍니다. 그냥 JS만 정리시켜 주는게 아니라SVG path 까지 정리 시켜 주는 똘똘한 녀석입니다. 설치. OneLiner 으로 검색합니다. 사용법.위에 적은대로 동영상에서 나온 범위 를 마우스로 드래그 합니다.그리..

에디터/브라켓 에디터(Brackets editor)2015. 11. 5. 02:01

이 확장 기능을 소개하는 제목을 봐선젠코딩 이나 Emmet 으로 생각할 수 있을꺼 같습니다. 아래 첨부된 동영상을 봐주시면 좋겠습니다. 동영상에 아주 잘 나와있지만한번 더 이야기 하면 이렇습니다. 이러한 마크업을 했다고 가정하면menu1 부터 menu 5 까지 드래그 해서 단축키만 입력하면 1234567 menu1 menu2 menu3 menu4 menu5cs 자동으로 다음과 같이 됩니다. 1234567 menu1 menu2 menu3 menu4 menu5cs 영상을 보셔서 아시겠지만 목록태그인 ul 태그만 되는게 아니라여러가지 태그들이 되네요. 설치. HTML Wrapper 으로 검색합니다. 사용법.사용법은 아주 간단합니다.확장 기능을 설치 후동영상에 나왔던 것처럼 해당되는 문구를 드래그 합니다.그리고..

에디터/브라켓 에디터(Brackets editor)2015. 11. 3. 02:12

이 확장 기능은 대단한건 아니지만 엄청난 겁니다. 클릭하시면 원본사이즈로 보실 수 있습니다. 이 GIF로 CSSFier 라는 확장 기능에 대한 설명이 충분 했으리라 생각이 듭니다.마크업을 복사해서 css쪽에 붙혀넣기 만 하시면 저렇게 css 범위를 자동적으로 잡아줍니다. CSS 뿐만 아니라SCSS/LESS 까지 이런식으로 된다는 겁니다. 설치. CSSFier 검색 합니다. 이거 사용법은 정말 설치법만 알면 됩니다.뭐 단축키 그런거 없어요.그냥 마크업을 복사해서 css 파일에 붙혀 넣으시면 됩니다. ****css 파일 에다가 붙혀넣기 해야 합니다.이걸 한번 더 강조하는 이유는html 파일에서는 변환이 안되기 때문입니다.

에디터/브라켓 에디터(Brackets editor)2015. 11. 2. 23:09

브라켓 에서 좌측 상단에 작업파일 리스트 가 있습니다.저는 그게 약간 신경 쓰이더군요. 스샷의 글귀만 읽어봐선 굉장히 편한 기능인데이게 필요 없다니 생각하실지 모릅니다. 근데 사용자 마다 느낌이 틀립니다.저같은 경우는 작업을 할 때에 활용을 안하는 기능은 일단 눈에 안보이는게 집중력을 키워주는것 같습니다. 저같은 사용자가 있기에스샷에 나오는 저 부분을 지우는 확장 기능도 나왔으리라 생각이 듭니다. 설치. Tabs - Custom Working 검색 합니다. 노란색의 저 부분은 좌측 메뉴를 접었다 폈다 할 수 있습니다. 분홍색 상자에 있는 버튼들은 아래의 GIF 를 보시면 이해하실께예요.클릭하시면 커집니다. 이건 즉시 적용 되네요!개인적인 느낌으론 화면이 뭔가 깔끔하게 정돈된거 같아 보입니다.신경 쓰였 거..

에디터/브라켓 에디터(Brackets editor)2015. 11. 2. 22:53

보통 에디터는 좌측에 보면 그냥파일들이 글씨로만 되어 있죠. 위 사진처럼 그냥 글씨로만 보여 집니다.보통 다른 에디터 들도 마찬가지입니다. 이번에 소개해 드릴 확장 기능은 저렇게 심심하게 글씨만 나오지 않게아이콘으로 꾸며줄려 합니다.알아보기 좀 편하다기 보단 그냥 아기자기해서 이뻐보이는 아이콘 입니다. 설치. Brackets File Icons 검색 합니다. 설치 완료 후에도 바로 적용되지 않더라구요.다른 작업물을 클릭하신후, 다시 원래 작업했던거로 돌아오시면 적용되어 있습니다.또는 프로그램을 종료 후 다시 실행시켜도 적용 됩니다.

에디터/브라켓 에디터(Brackets editor)2015. 11. 2. 22:35

브라켓의 확장 기능 중 '컬러 하이라이터'라는 확장 기능이 있습니다.서브라임 텍스트 에도 패키지로 설치할 수 있는 기능입니다. 위 GIF 는 서브라임 의 컬러 하이라이터 패키지 입니다.이 기능이 브라켓 에서도 크게 다르지 않게 사용 됩니다. 이걸 사용하는 이유는색이 들어가는 부분에 진짜 색으로 보여줍니다. 그냥 글자가 아니라 정말 색으로 보여주는 것이지요. 근데 이게 위 GIF 처럼 글자만 색으로 표시하는게 아니라모든 헥사 코드의 색상을 전부 진짜 색으로 보여줍니다. 물론 브라켓 에서는 이 확장 기능을 설치하지 않으시더라도마우스를 올리면 색을 보여줍니다. 이렇게 보여주긴 합니다. 다만..'마우스를 올릴 경우에만 색을 확인 할 수 있습니다' 이 확장 기능의 목적은 저는 이렇게 생각합니다.'마우스를 올리지 ..

에디터/브라켓 에디터(Brackets editor)2015. 11. 2. 21:57

브라켓을 사용하다가 뭔가 허전한 부분이 있더라구요.그건 바로 서브라임의 미니맵 기능 이였습니다. 이 사진은 서브라임 텍스트의 미니맵 입니다.서브라임을 설치 하시면 기본적으로 깔려 있는 기능이죠. 하지만 브라켓 에서는 따로 확장 기능을 설치 하셔야 합니다.딱 봐도 미니맵 처럼 생겼는데 확장 기능 이름도 'Minimap' 입니다. 설치. Minimap 으로 검색해 줍니다. 설치 완료 후에도 바로 적용되지 않더라구요.다른 작업물을 클릭하신후, 다시 원래 작업했던거로 돌아오시면 적용되어 있습니다.또는 프로그램을 종료 후 다시 실행시켜도 적용 됩니다.