본문 바로가기

brackets7

브라켓 - 수정중인 소스 실시간 미리보기 기능 사용/ 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 다크모드(Dark Mode) 테마 설정 브라켓 기본 어두운 테마 사용하기 안녕하세요. 고코더 입니다. 다크모드 매니아인 저는 브라켓 툴도 어둡게 아주 어둡게 셋팅 해보려고 합니다. 요즘 나오는 IDE는 모두 다크테마를 기본으로 제공하고 있습니다. 브라켓도 당연히 제공합니다. 테마는 오히려 어도비가 더 장인이겠죠. ● 1. 브라켓을 실행하면 메뉴창들은 이미 다크모드 이지만 소스 편집창은 하얀바탕이 기본입니다. ● 2. 탑 메뉴바에서 보기를 선택하고 테마를 클릭 합니다. ● 3. 그럼 테마를 설정 할 수 있고 Brackets Dark 테마를 선택하고 완료를 클릭할 수 있습니다. ● 4. 그럼 하얀 바탕보다 눈이 편한 검은 바탕에서 소스 편집을 할 수 있도록 테마가 변경 되었습니다. 마무리 다크하지만 어둡지 않은 좋은 검은색입니다. (무슨 소리야) 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.