[Tip] brackets 설치방법 및 단축키 정리

brackets은 Adobe에서 만든 웹 개발에 주 초점을 맞춘 소스 코드 편집기이다.

 

# brackets 설치방법

1. brackets를 검색해 해당 사이트에 들어갑니다.

 

2.  brackets 홈페이지에서 Downloads를 클릭합니다.

 

3.  위의 다운로드 후 아래의 순서대로 클릭해주면 설치가 완료됩니다.

    (시간이 오래걸릴 수 있어요!)

 

 

# brackets 부가 기능 설치

- 번개표시 : 실시간 미리보기

  블록표시 : 필요한 확장기능 검색 및 설치

 

1. brackets의 우측에서 블록 모양의 버튼을 클릭합니다.

2. 우측 상단의 검색창에 설치를 원하는 키워드들을 입력해줍니다.

 

- 추천 확장 기능 파일

① Emmet : 태그 등의 자동완성 기능

               설치 시 여는 태그 대신 단어 입력 후 tab키 입력 시 자동완성된다.

    ex) ! tab

 

② Beautify : 들여쓰기 등 자동정렬기능

 

③ HTML Tag Autocompleter for Brakets : 태그 수정 시 열린 태그와 닫힌 태그를 자동 수정해주는 기능

# brackets 단축키

단축키	단축키 내용	기타사항
ctrl+n	새로 만들기
ctrl+alt+b	들여쓰기 정렬기능
ctrl + d	줄 복사
ctrl + shift + 방향키	선택한 방향으로 해당 내용 이동
ctrl + shift + d	해당 줄 삭제
ul>li*n + tab키	n개 만큼 li 생성
html>head>style^body	한번에 해당 태그들 생성	^는 body 태그 생성 위함
선택자 + 우클릭 + 빠른 편집	해당 태그 빠른 편집 가능
속성 + 우클릭 + 빠른 문서보기	해당 속성에 대한 설명과 용법 나옴