Adobe Brackets는 HTML, CSS 및 JavaScript를위한 오픈 소스, 간단하고 강력한 통합 개발 환경입니다. 추가 기능 확장을 제공하기 위해 플러그인 추가를 지원합니다. 오류 감지 추가, 브라우저 관련 CSS 접두사, JSDOC 주석 등과 같은 현재 사용 가능한 플러그인. 다음 편집자는 브래킷의 사용 및 설정을 간략하게 소개합니다.
1. 프로젝트 설정
1. 개방형 브래킷, 전체 인터페이스는 매우 간단하며 상단 메뉴 표시 줄은 파일> 종료 편집기 기능 만 제공합니다. 왼쪽에는 프로젝트 조직 구조의 파일 트리가 있습니다. Ctrl/CMD+Shift+H를 사용하여 파일 트리를 호출하고 닫으십시오. 오른쪽은 편집 영역이고, 상단 부분은 도구 모음, 중간 부분은 문서 영역이며, 하부는 프롬프트 영역입니다.
2. 프로젝트를 엽니 다. 파일> 열기 폴더 명령을 사용하여 프로젝트 폴더를 엽니 다. 왼쪽의 파일 트리의 프로젝트 이름은 프로젝트 폴더 이름으로 업데이트되며 파일 트리는 현재 프로젝트의 파일 트리로 업데이트됩니다.
프로젝트 이름의 왼쪽 버튼을 클릭하여 프로젝트 편집 메뉴를 나타냅니다. 편집 메뉴에는 히스토리 프로젝트와 프로젝트 편집 명령이 표시됩니다.
폴더 명령 개방 : 새 프로젝트를 엽니 다.
프로젝트 설정 명령 : 페이지 디버깅 및 미리보기 중에 사용되는 현재 프로젝트의 웹 주소를 설정합니다.
요구 사항 설정 : http : //부터 시작하는 웹 주소 여야합니다.
위 그림과 같이 http://127.0.0.1/demo/slide로 설정하면 브라우저를 미리 볼 때 해당 페이지가 웹 주소를 통해 열립니다.
설정하지 않으면 페이지가 파일의 드라이브 문자 주소를 통해 열립니다.
2. 파일 편집
파일 트리에서 index.html을 클릭하고 기본 영역에서 index.html 문서를 엽니 다.
1. Brackest는 문서가 HTML 사양을 준수하는지 확인합니다. 아래 그림과 같이, 헤드 노드에 배치 해야하는 20 줄의 스타일 블록이 있습니다.
2. 클래스 또는 ID 속성의 레이블 이름에 커서를 놓고 CTRL/CMD + E (편집)를 누르거나 편집을 종료하십시오. 브래킷은 프로젝트에서 모든 CSS 파일을 검색 한 다음 임베디드 편집기를 열어 HTML 파일에 포함시켜 CSS 코드를 신속하게 수정할 수 있습니다.
현재 클래스/ID 태그에 여러 스타일의 정의가 있으면 편집 창에는 디스플레이 스타일을 전환 할 수있는 토글 버튼을 제공하거나 Alt + Up/Down Arrow 키를 사용하여 전환 할 수 있습니다.
일부 CSS 파일이 현재 HTML 문서에서 참조되지 않더라도 클래스/ID 스타일을 찾기 위해 브래킷은 현재 HTML 문서 및 프로젝트의 모든 CSS 파일을 감지 할 것입니다.
3. 브래킷은 또한 JS 객체 정의의 빠른 미리보기/편집을 지원합니다. 커서를 JS 함수 이름에 넣고 Ctrl/CMD + E (편집)를 누르거나 편집을 종료하십시오.
4. 브래킷에는 컬러 피커가 내장되어 RGBA, 16 진수 및 HSLA의 컬러 코딩 형태를 제공합니다. 커서를 색상 코드에 넣고 Ctrl/CMD + E (EDIT)를 누릅니다. ESC 키를 사용하여 색상 수집기 창을 종료해야합니다.
3. 인스턴트 미리보기
브래킷은 웹 페이지의 즉각적인 미리보기를 제공합니다. 이 기능을 사용하는 경우 브래킷은 Chrome 브라우저를 호출하여 현재 페이지를 엽니 다. HTML, CSS, JavaScript 및 저장을 수정 한 후 수정 된 컨텐츠는 페이지를 수동으로 새로 고치지 않고 브라우저의 페이지에 즉시 응답합니다. 이것은 브래킷의 가장 큰 하이라이트 중 하나입니다. 두 개의 모니터 코더가있는 축복을받은 분할 화면에 브래킷과 크롬을 표시 할 수 있으며 편집기/브라우저를 전환하지 않고 인스턴트 미리보기의 즉각적인 수정 및 새로 고침.
현재 라이브 미리보기 기능의 일부 제한 사항 :
Chrome 브라우저에서만 대상 브라우저로만 작동하므로 Chrome을 설치해야합니다.
Chrome의 원격 디버깅에 의존하며 명령 줄 플래그에서 활성화됩니다. MAC에서 이미 Chrome을 사용하는 경우 Instant Preview를 시작하면 브래킷이 Chrome을 다시 시작하여 원격 디버깅을 활성화 할 것인지 묻습니다.
하나의 HTML 파일 만 동시에 미리 볼 수 있습니다. 다른 HTML 파일을 전환하면 브래킷이 원래 미리보기를 닫습니다.
4. 일부 바로 가기 키
ctrl/cmd+shift+h는 파일 트리를 호출하고 닫을 수 있습니다
Ctrl/CMD + E 빠른 미리보기/편집 CSS 스타일/JavaScript 기능
ctrl/cmd + +/- 편집 영역의 글꼴 크기를 확대하고 축소
ctrl/cmd + 0 편집 영역의 글꼴 크기를 재설정
ctrl/cmd + alt + p 인스턴트 미리보기 기능 켜기
Ctrl / CMD + / 라인 주석
ctrl / cmd + alt + / 블록 주석
참고 : CSS 코드 및 HTML 코드에 댓글을 달 때 블록 주석 단축키 키만 사용할 수 있습니다.