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

이건 서브라임에서도 '스니펫' 이라는 패키지로 소개했던적 있습니다.이와 같은 기능을 하는... 이름도 똑같으니 당연히 기능도 같겠네요ㅋ; 아무튼 다시...Snippet은 네이버 영어사전 결과 '(작은) 정보, 한 토막' 을 나타냅니다. 이 확장 기능은 내가 자주 사용하는 뭔가를 탭(Tab key)으로 쉽게 그 토막을 꺼내서 사용한다고 생각하시면 됩니다. 쉽게 말해서 이런거죠. (이건 브라켓에 기본적으로 있는 html:5 + tab 입니다.) 이 포스팅에서는자주 쓰는 템플릿을 자신의 입맛대로 설정할 수 있게예를들면.... 리셋 css(reset css) 라던가 이런걸로 만들어 볼까 해요.저런 템플릿도 얼마든지 가능합니다. 그냥 모든게 다 가능 합니다. 속성으로 사용법만 간단하게 적을까 하다가.제가 어떻게 ..

에디터/브라켓 에디터(Brackets editor)2015. 11. 1. 19:17

이 글을 맨 먼저 포스팅 했어야 했는데브라켓 이라는 에디터 툴을 알고나서 신나서 확장 기능 먼저 포스팅 했네요..;; 브라켓 에디터의 장단점을 알려 드릴려 합니다.먼저 장점 부터.. 1. PSD를 열어서 이미지 레이어의 정보값을 확인하고 이를 활용할수 있다.2. 실시간 미리보기 기능을 통해 코딩한 결과물을 1초도 안되서 바로 확인할 수 있다.3. 확장 기능설치로 에디터를 보다 자신의 입맛대로 활용해서 코딩에 도움을 준다.4. 무료!! 무료이다!등.. 일단 생각나는 4가지가 있네요. 그리고 단점이라 한다면... 1. 페이지 인코딩 방식은 무조건 UTF-8 ..2. FTP-SFTP 설정이 살짝 복잡... 1번과 2번 때문에서브라임도 사용 안할 때가 있습니다.서브라임도 euckr 은 깨져 보입니다. (패키지 ..

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

브라켓을 사용하는 그 두번째 이유가 되는PSD 열기 입니다. 사실 이건 확장 기능 입니다.하지만!따로 설치하실 필요는 없으십니다.왜냐하면 브라켓을 설치시 기본으로 함께 깔려져 있습니다. 그래도.. 혹시나..오류가 생겨서 이 기능을 사용 못하면 해당 확장 기능을 삭제후 재설치 해주시면 바로 해결 됩니다. (경험담 입니다 ㅋㅋ;;)확장 기능 검색은 psd 로 검색하시면 됩니다. 사용방법. (이미지가 작게 보일시 클릭하면 커집니다.) 이 부분에서는 css 속성을 입력할때 wi 또는 he 로 입력만해도 아래의 width 값과 height 값을 가져옵니다.엔터로 그 값을 활용 할 수 있습니다. 여기까지가 대충 기본적으로 아! 이렇구만 하는 부분입니다. 이젠... 레이어를 잘라서 저장 시켜 보도록 하겠습니다.이걸브..

에디터/브라켓 에디터(Brackets editor)2015. 11. 1. 17:55

다른 에디터 보다브라켓을 왜 쓰는지 그 첫번째 이유가 되는 '실시간 미리보기' 기능 입니다.(첫번째 이유가 있으면 두번째도 있다는 것이죠. ^^) 실시간 미리보기 기능은 말 그대로코딩하는 동시에 실시간 아웃풋으로 확인 할 수 있습니다. 확장 기능을 설치하는것도 아니고프로그램을 깔면 그냥 기본으로 들어 있어요! 바로 이 기능이죠. 사용법은 아주 간단합니다.그 전에.. 크롬 브라우저를 설치 합니다.이 기능은 크롬이 없으면 안돼요! 이렇게 해주면 됩니다.단축키도 있네요!'컨트롤 + 알트 + p' 누르게 되면 확인 한번 눌러주세요.다음부턴 이 안내 메시지는 출력이 안됩니다. 한번만 출력되요. 새 창이 열리면서 잠시 기다리라네요그후 로딩이 완료되면..에디터로 돌아가서body 태그 안에다가 아무거나 입력해 봅시다...

에디터/브라켓 에디터(Brackets editor)2015. 11. 1. 17:37

브라켓 에디터에 Emmet 확장기능을 설치하려 합니다.이번엔 에디터 안에서 검색해서 설치를 진행해 보겠습니다. emmet 는 일단 젠코딩(Zen coding)과 많이 비슷합니다.코드의 자동완성을 도와주고 빠른작업을 하게끔 도와주는 기능이죠. (에디트 플러스(EditPlus), 서브라임 텍스트(SublimeText)등 도 이런 기능을 지원하고 있습니다. 일부 메모장 코딩을 주로 하셨던 분은 손에 익지 않을 수 있습니다만 익숙해지면 굉장히 빠른 코딩을 하실 수 있으리라 생각됩니다.) Emmet 에디터 내에서 설치하기. 이 기능의 사용법은 아래에 설치가 끝난뒤 살펴 보도록 하겠습니다. 확장 기능을 설치하면 이렇게 진행이 됩니다.확장 기능이 설치가 완료되면 닫기 버튼을 눌러 메시지창을 닫아 줍니다.그 후 다시 ..

에디터/브라켓 에디터(Brackets editor)2015. 10. 31. 01:25

확장 기능 설치법 먼저 확장 기능을 설치하는 두가지 방법이 있습니다.첫번째로는 확장 기능 압축 파일을 드래그로 설치하는 방법입니다.두번째로는 에디터 내에서 확장 기능을 검색해 설치하는 방법입니다. 저는 테마(Themes) 확장 기능을 첫번째 방법으로 설치하려 합니다.제가 원하는 테마는 첫번째 방법으로 찾을 수 밖에 없더라구요. ㅎㅎ;; 처음 브라켓 설치를 마치면 위와 같은 스크린 샷의 테마를 보실 수 있습니다.기본 테마도 충분히 눈에 편하지만 개인적으론 검정색 바탕이 좀 더 집중도를 주는것 같습니다. 일단 확장 기능을 설치하지 않고 기본 테마를 바꿔 보도록 하겠습니다. 저는 일단 서브라임과 최대한 비슷한 느낌이 나게 만들려고 검은색 바탕을 선택했습니다. 그래도 역시 서브라임 기본 테마 느낌이 안나네요 ㅎ..

에디터/브라켓 에디터(Brackets editor)2015. 10. 24. 19:03

전 서브라임 텍스트가 완전무료가 아니라서 회사에서 사용하긴 어려웠습니다.(사실 품의서 작성해서 사달라고 올리면 되지만... 쓸때없이 번거로워서...)완전 무료이면서 서브라임 텍스트 만큼 확장성을 겸비한 개발툴을 사용하려 찾아보던중 '브라켓 에디터(Brackets editor)'라는 툴을 발견하였습니다. 사실 안지는 몇달전에 알았지만 그때는 사용법을 알려고도 하지 않았다는게... ㅠㅠ;;서브라임만 있으면 다 될줄알았죠. 브라켓 에디터에서 눈여겨 봐야할 두가지 기능이 있습니다.바로 PSD 를 열 수 있다는 점과,코딩시 코딩한걸 바로 눈으로 확인할 수 있다는 것이죠. 그리고 굳이 세가지 장점을 더 해 보자면...한글 이라는 점,완전 무료라는 점,원하는 패키지를 설치후, 프로그램을 재실행 시키지 않아도 된다는 ..