브라켓(Brackets) 단축키 변경 방법

HTML, CSS, JavaScript 코드 구성을 쉽게 생성할 수 있는 프로그램 중 하나가 바로 Brackets(브라켓) 입니다. VS Code도 있긴 한데, 코드 정리는 브라켓이 한 수 위입니다. 전 그렇게 생각해요. 둘 다 써본 결과가 그렇습니다. 그래서 지금은 둘 다 사용중입니다. 다만 프로그램 두 개를 동시에 사용하면 발생하는 문제가 단축키입니다. 햇갈려요... 그래서 최대한 통일을 시키려고 합니다. 일단은 정말 자주 사용하는 단축키죠. 실시간 미리보기 기능을 단축키로 지정해 보려고 합니다. 브라켓을 실행 후 디버그 > 사용자 키맵 파일 열기로 들어갑니다. 그러면 새 창으로 keymap.json 파일이 열릴 것입니다. 현재 저는 단축키를 등록했기에 위의 화면에서 빨간색 코드가 있는 것입니다. 처..

Programs/Brackets 2023. 9. 21. 00:06

브라켓 강추 플러그인! Custom Work 대신 Document Toolbar 추천

VS Code를 잘 사용해오다가 도저히 코드 정리하는게 마음에 들지 않아서 다시 브라켓(Bracket)을 설치했습니다. 앞으로 코드는 VSC로 작업하고 마무리인 코드 정리는 브라켓에서 진행해야 할 것 같습니다. 단순 코드 정리가 아닙니다. 실제로 VSC에서 친효스킨 HTML을 정리하면 스크립트를 끊는 구간이 아주 그냥 지 멋대로입니다. 그래서 오류가 발생하는 경우도 있어요. 브라켓에서 정리할때는 전혀 이런 문제가 없습니다. 비쥬얼 스튜디오에서는 태그 입력이 정말 쉽습니다. 각 프로그램별 장단점을 최대한 활용해볼 생각입니다. 과거글 중 하나가 바로 브라켓 추천 플러그인이었습니다. 해당 글에는 커스텀 워크(Custom Work)라는 플러그인을 추천하고 있는데 문제는 이게 간헐적 오작동을 합니다. 그래서 도저..

Programs/Brackets 2023. 9. 13. 00:07

브라켓 Emmet 플러그인 막강한 기능! 간단 입력 후 빠르게 태그 완성하는 방법

와! 이 좋은걸 이제서야 알았습니다. 외국의 CSS 웹코딩 영상을 보다가 알게 된 사실입니다. 그분은 간단하게 입력하더니 순식간에 div 태그가 클래스명이 넘버링되며 5개가 완성이 되더군요. 저같으면 먼저 div 태그 안에 클래스를 자동완성으로 넣고 이걸 다시 네개를 더 복사 후 클래스명을 각각 다르게 수정했을겁니다. 근데 유튜브속의 저 사람은 이걸 단 1~2초만에 해내더군요. 그저 대박이었습니다. "혹시 저 사람이 사용하는 프로그램에서 기능을 지원하는걸까?" 이런 생각이 들었고 열심히 구글링을 해보는데 어떤 문서에서 Emmet을 사용하면 된다는걸 목격하게 됩니다. "어? Emmet이라면 브라켓 필수 플러그인 중 하나인데...?!" 순간 소름이 돋았고 바로 브라켓을 실행시켜서 테스트해 봤습니다. 원래 사..

Programs/Brackets 2022. 1. 3. 00:09

브라켓 (Brackets) 글꼴을 코딩 전용 폰트 D2Coding 으로 적용하는 방법

프로그래밍을 하시는 분들에게 있어서 폰트는 아마도 중요한 위치에 있을지도 모르겠습니다. 장시간 모니터를 쳐다봐야하고 그 작디작은 오밀조밀한 글씨들을 장시간 보면 피로감이 쌓여오기만 합니다. 그래서 가독성이 높으며 한글과 영어의 이질감이 최대한 없는 그런 코딩 전용 글꼴(Font)은 프로그래머 분들에게는 중요한 위치에 자리잡고 있다고 생각합니다. 저는 전문 프로그래머는 아니지만 지금도 열심히 웹언어를 배우고 있고, 티스토리 반응형 스킨을 개발중에 있기 때문에 브라켓을 사용합니다. 그것도 장시간 사용하죠. PC를 한번 포맷해서 그전에 쓰던 환경에 최적화 되어 있다가 초기화된 브라켓을 쓰니까 영 적응이 안 되더군요. 그래서 혹시 브라켓용 좋은 폰트가 있을까 싶어 검색해보니 몇 개를 추천받았는데, 그 중에서 D..

Programs/Brackets 2019. 2. 1. 00:06

브라켓(Brackets) 웹에디터 설치해두면 유용한 추천 플러그인 모음

열심히 브라켓 (Brackets) 으로 웹코딩을 배우고 있습니다. 아직까지는 쉬운 부분만 나와서 그런지 이해를 못하고 있는건 없습니다. 그리고 직접 태그 요소들을 하나하나 배워가면서 작성하고, 그 결과값을 확인하는 재미가 무척이나 쏠쏠합니다. 과연 이 재미가 언제까지 지속될지는 저도 모르겠지만, 확실한건 이해할때까지 무조건 배운다는 마음입니다. 브라켓을 이용하면 여러가지 추천 플러그인이 많은데, 그 중에서 제가 사용하는 플러그인을 좀 나열해 보려고 합니다. 나중에 저도 까먹을수도 있으니 일종의 백업용이죠. 설치하면 정말 유용한 기능을 가진 것들이므로 이제 막 브라켓을 이용하시는 분들에게는 강추하는 부분입니다. 현재 저의 브라켓 설치 플러그인 정보 입니다. 위에서부터 하나하나 어떤 기능을 갖고 있는 플러그..

Programs/Brackets 2018. 10. 10. 00:04

웹에디터 브라켓 Brackets 테마 다운로드 및 변경 방법

열심히 웹코딩 수업을 받고 있습니다. 배울수록 신기하고 새롭습니다. 예전 직업전문학교에서도 분명 똑같이 배운것 같은데... 아무래도 웹코딩에 특화된 수업이어서 그런지 더 체계적으로 배울 수 있는 것 같습니다. 브라켓 프로그램으로 태그를 넣고 열심히 코딩을 하고 있습니다. 현재 같은 수업을 받는 분들 중에서는 이 브라켓 테마를 자신이 좋아하는 버전으로 입맛에 따라 바꾸신 분들이 계시더군요. 어떻게 하는건지 검색해보니 생각보다 쉽게 다운받고 변경할 수 있었습니다. 그래서 저도 바로 똑같이 적용시켜 보았습니다. 당연히 먼저해야 할 일은 브라켓을 실행하는 것 입니다. 그리고 맨 오른쪽에 있는 저 모양의 아이콘을 눌러주세요. 새로운 창이 하나 뜹니다. 여기에서 다양한 확장 프로그램 및 테마를 설치할 수 있습니다...

Programs/Brackets 2018. 9. 14. 00:06

브라켓 (Brackets) 자주 사용하는 유용한 단축키 모음

웹페이지 코딩을 하는 프로그램 중에서 브라켓 (Brackets) 이라고 하는 프로그램이 있습니다. 지금 다니는 학원에서도 브라켓을 통한 코딩을 했었고, 그 사용이 무척이나 편리하고 용이해서 좋았습니다. 브라켓에서 자주 사용하는 단축키가 몇 개 있습니다. 한번 알아보도록 하겠습니다. Ctrl + / : 선택하고자 하는 태그의 전체를 주석처리 및 해제 Ctrl + Shift + / : 클릭한 공간에 주석태그 생성 및 해제 Ctrl + D : 커서가 위치한 태그를 아래 행으로 그대로 복사 Ctrl + Shitf + D : 커서가 위치한 행 삭제 Ctrl + Shift + ↑ : 커서가 위치한 행 위로 이동 Ctrl + Shift + ↓ : 커서가 위치한 행 아래로 이동 Ctrl + Shift + L : Bea..

Programs/Brackets 2018. 9. 12. 00:04

[어도비 브라켓] Adobe Brackets 노트패드같은 HTML CSS 자바스크립트 코딩 편집 프로그램

[어도비 브라켓] Adobe Brackets 노트패드같은 HTML CSS 자바스크립트 코딩 편집 프로그램 세상은 넓고 프로그램은 많네요^^오늘 또 괜찮은 프로그램을 소개 받았어요. 이 프로그램은, 우리반에서 열심히 공부하면서 자신의 퀄리티를 드높이고 있는팔짱곰 개허탈 신진호 군의 소개를 받고 알게된 프로그램이죠. 바로, 어도비 브라켓 이라고 하는 프로그램 입니다^^ http://brackets.io/ 어도비에서 별도로 제공하는 프로그램 브라켓 이구요,사이트는 위의 주소로 들어가시면 이렇게 위치럼 화면에 나오게 되는데, 저기 빨간 네모 부분을 클릭하시면, 프로그램이 다운로드 됩니다^^용량은 약 35MB 정도 하네요. 다운로드 받으면, 이런 모앙의 아이콘이 있을 것입니다.더블클릭해서 설치진행 하세요^^ 설치..

Programs/Brackets 2015. 6. 22. 18:43

친절한효자손 취미생활