브라켓9 브라켓 - 수정중인 소스 실시간 미리보기 기능 사용/ brackets 파일을 브라우저에서 미리보기 안녕하세요. 고코더 입니다. 브라켓은 해당 수정중인 파일을 실시간으로 미리보기 할 수 있는 기능을 제공 합니다. ● 1. 브라켓을 실행 한 후에 오른쪽 위에 번개(?)표시 아이콘을 클릭 합니다. 현재 저는 index.html 을 수정 중 입니다. ● 2. 그럼 컴퓨터에 임의에 포트로 해당 페이지를 보여줍니다. ● 3. 그리고 파일을 수정하면 브라우저에도 실시간으로 수정중인 소스에 내용을 즉시 보여줍니다. F5눌러 새로고침 하지 않아도 되는 편리함이 있습니다. ● 4. 그리고 파일에서 프로젝트 설정을 클릭 합니다. ● 5. 해당 프로젝트 설정 창에서 실시간 미리보기를 원하는 URL을 입력하면 실시간 미리보기시에 해당 페이지로 연결하여 오픈하게 됩니다. ● 6. 브라켓이 생성하는.. 2019. 11. 29. 브라켓 - 포터블 무설치 프로그램 다운로드 / Brackets 설치 없이 쓰는 브라켓 portable 안녕하세요. 고코더 입니다. 브라켓를 포터블로 사용할 수 있게 만든 프로그램을 어떤 개발자가 깃을 통해 배포 중입니다. ● 1. 해당 URL로 접속하여 exe로 되어 있는 프로그램을 다운로드 해주세요. https://github.com/sagiegurari/brackets-portable/releases/latest ● 2. 첨부파일로도 올려 드립니다.(압축해제된 버전) ● 3. 깃에서 다운로드 받은 파일을 실행하면 압축을 푸는 과정이 필요 합니다. 설치는 아니에요. ● 4. 압축이 풀린 폴더에서 exe를 실행하면 포터블로 브라켓이 실행 가능합니다. 마무리 포터블 좋아하는 분들에게는 좋겠네요. 2019. 11. 28. 브라켓 - 소스 비교를 위한 화면 분할 / Brackets adobe Brackets 에서 소스 2개를 수정하는 소스분할 기능 안녕하세요. 고코더 입니다. 2개의 소스를 비교하거나 HTML과 CSS를 함께 개발하는 등 한번에 소스를 같이 봐야 하는 경우가 있습니다. 이럴때는 에디터 소스 창을 분할 하는 방법을 많이 사용합니다. 브라켓에서도 소스 분할 기능을 제공하고 있습니다. ● 1. 소스를 수정 중에 왼쪽 패널에 있는 아이콘을 클릭 합니다. ● 2. 분할하는 옵션을 선택 가능합니다. 가로 분할을 선택했습니다. ● 3. 그리고 새로운 소스를 클릭하면 분할된 화면으로 에디터창이 열립니다. 마무리 HTML과 CSS를 함께 수정할때 편리합니다. 사실 모든 에디터 프로그램의 기본 기능이 되었습니다. 2019. 11. 28. 브라켓 - 확장프로그램 설치하기 / Brackets 브라켓 기능을 확장기능을 설치 하는 방법 안녕하세요. 고코더 입니다. ● 1. 브라켓도 다른 IDE처럼 다양한 확장 프로그램을 설치하여 기능을 다양하게 확장 가능 합니다. 브라켓을 실행 후에 오른쪽 망원경? 같은 아이콘을 클릭 합니다. ● 2. 그리고 나타나는 화면에서 설치가능 탭을 클릭 후에 원하는 확장기능에서 설치를 클릭 합니다. ● 3. 그럼 이어서 확장 기능을 설치를 진행합니다. 방법은 그저 해당 파일을 다운로드 하여 압축을 해제하는 방식 입니다. ● 4. 설치가 완료되면 도움발 메뉴에서 확장 기능 폴더 여기를 클릭 합니다. ● 5. 그럼 해당 폴더를 살펴보면 확장 기능 프로그램 폴더가 생겨있습니다. 확장 프로그램이 다운로드 되어 압축이 해제된 상태 입니다. 마무리 아직은 크게 쓸만한 확장이 보이.. 2019. 11. 28. 브라켓 - Brackets 수정 중인 라인 하이라이트 표시하기 코드소스 라인 강조 표시하기 안녕하세요. 고코더 입니다. 해당 라인을 수정 중이라면 하일라이트 표시가 되는게 이점이 많습니다. ● 1. 하지만 브라켓 기본 설정은 소스 라인에 포커스가 있으면 커서 라인이 깜빡 거리지만 해당 라인에 대한 하이라이트를 기본으로 제공하지 않습니다. ● 2. 메뉴에서 "활성 행 하이라이트"를 체크합니다. ● 3. 그러면 이제 수정중인 소스는 연하게 하이라이트가 표시되어 즉각적으로 확인할 수 있습니다. 마무리 현재 수정중인 소스가 어디인지 한눈에 딱 들어옵니다. 2019. 11. 11. 브라켓 - Brackets 상태 보고서 전송하지 않기 익명 통계 데이터 전송하지 않기 설정 안녕하세요. 고코더 입니다. ● 1. 브라켓을 실행하면 해당 팝업 레이어가 가장 눈에 들어옵니다. ● 2. 요약하자면 기본설정으로 익명통계를 어도비 서버로 보내고 있다는 말입니다. 보통은 옵션을 선택할때만 통계를 전송했지만 브라켓은 많은 데이터가 필요한거 같습니다. Brackets 상태보고서 Brackets 개선을 위해 고객에 Brackets를 어떻게 사용하는지에 관한 제한된 익명 통계를 Adobe에 주기적으로 전송합니다. 이 정보는 기능의 우선순위를 정하고, 버그를 찾고, 사용성 문제를 해결하는데 도움을 줍니다.고객의 데이터를 보거나 또는 데이터를 공유하지 않도록 하려면 도움말>상태보고서를 선택하세요. Brackets 상태 보고서에 관한 자세한 정보. ● 3. 하지.. 2019. 11. 11. 브라켓 - Brackets 다크모드(Dark Mode) 테마 설정 브라켓 기본 어두운 테마 사용하기 안녕하세요. 고코더 입니다. 다크모드 매니아인 저는 브라켓 툴도 어둡게 아주 어둡게 셋팅 해보려고 합니다. 요즘 나오는 IDE는 모두 다크테마를 기본으로 제공하고 있습니다. 브라켓도 당연히 제공합니다. 테마는 오히려 어도비가 더 장인이겠죠. ● 1. 브라켓을 실행하면 메뉴창들은 이미 다크모드 이지만 소스 편집창은 하얀바탕이 기본입니다. ● 2. 탑 메뉴바에서 보기를 선택하고 테마를 클릭 합니다. ● 3. 그럼 테마를 설정 할 수 있고 Brackets Dark 테마를 선택하고 완료를 클릭할 수 있습니다. ● 4. 그럼 하얀 바탕보다 눈이 편한 검은 바탕에서 소스 편집을 할 수 있도록 테마가 변경 되었습니다. 마무리 다크하지만 어둡지 않은 좋은 검은색입니다. (무슨 소리야) 2019. 11. 11. 브라켓 - Brackets 시스템 UI 언어 변경 어도비 무료 에디터 툴 브라켓 메뉴를 영어로 안녕하세요. 고코더 입니다. 브라켓은 기본적으로 시스템 언어에 따라서 메뉴가 나타납니다. 저는 당연히 한국어 OS를 설치해서 한국어 UI가 기본적으로 셋팅 되었습니다. 하지만 IDE에서 사용하는 영어는 기본적이고 공통적인 단어들입니다. 번역체로 도구를 찾기보다는 영어로 인터페이스를 바꾸어 사용하는게 좋아보입니다. ● 1. 그래서 저는 영어로 UI를 변경해보겠습니다. 탑 메뉴바에서 디버그에서 언어 변경을 클릭 합니다. ● 2. 그리고 원하시는 언어를 선택하고 재시작을 클릭 합니다. 재시작은 시스템 내부에서 새로고침되며 프로그램 자체는 종료되지 않습니다. ● 3. 그러면 이제 익숙한 영어 UI가 나타납니다. 마무리 좀 불편하더라도 영어 UI에 익숙해지는건 어떨까요? 2019. 11. 11. 브라켓 - Brackets 에디터 설치 및 다운로드 설치옵션 / 첨부파일 어도비가 만든 무료 소스 편집 에디터 안녕하세요. 고코더 입니다. 요즘 IT책을 보면 브라켓을 소개하는 경우가 있습니다. 개인적으로는 무료 소스 툴은 VS코드와 아톰이 양대산맥을 이루고 있습니다. 하지만 어도비가 만든 IDE라는 점과 최근에 사용하는 유저가 많아짐에 따라 저희 블로그에서도 다뤄 보려고 합니다. 다운로드 ● 1. 해당 URL에 접근하면 바로 다운로드가 가능합니다. http://brackets.io/ ● 2. 개인,회사 모두 무료이고 로그인도 필요 없습니다. ● 3. 첨부파일로도 올려드립니다. 설치과정 ● 4. 다운받은 파일을 설치합니다. 파일명은 아래와 같습니다. Brackets.Release.1.14.msi ● 5. 설치를 진행합니다. 체크박스 두가지 항목이 나타납니다. 설치옵션 ● 6... 2019. 11. 11. 이전 1 다음
