지지나

Brackets 설치, 검정 배경으로 변경하기 및 단축키 사용법 본문

기획자의 프로그래밍 걸음마/HTML, CSS

Brackets 설치, 검정 배경으로 변경하기 및 단축키 사용법

Gygyna 2020. 9. 3. 15:57

집에서는 항상 Atom 에디터를 사용하다가 아무래도 브라켓을 설치하는게 낫겠다 싶어서 설치해보았어요.

브라켓 설치와 단축키 사용법에 대해서 중요한 것만 간단하게 설명하겠습니다.

 

브라켓 설치는 아래 링크타고 들어가서 다운받고 Next버튼만 누르면 됩니다ㅎㅎ 금방 끝나요.

brackets.io/

 

A modern, open source code editor that understands web design

Brackets is a lightweight, yet powerful, modern text editor. We blend visual tools into the editor so you get the right amount of help when you want it. With new features and extensions released every 3-4 weeks, it's like getting presents all year long.

brackets.io

 

그리고 실행시켜보면 기본값으로 흰 바탕이 나오는데요, 사용하다보면 눈이 아파서 검은 배경이 편합니다.

[보기] - [테마] 로 들어가서 설정을 바꿔줄꺼에요.

 

현재 테마를 다크로 설정하고 완료버튼을 눌러서 저장하면 됩니다.

 

그리고 기본적인 필수 단축키를 몇 가지 정리해 보았어요. 

 

Ctrl + D: 줄 복사

Ctrl + Shift + D: 줄 삭제

주석처리 할 부분을 블록처리하고 Ctrl + Shift + /: 주석

**주석처리한 것을 해지할 때에도 동일한 단축키를 사용합니다.

 

그리고 다중입력을 하고 싶으면  Ctrl을 누른 상태에서 마우스 왼쪽버튼을 누르고 하나씩 선택을 해 주면 됩니다.

예를 들어 이렇게 선택한 후,

<li> 태그 전체에 클래스를 지정하고 싶으면 기다란 커서가 있는 상태에서 한번에 입력되는 것을 볼 수 있어요.

 

Ctrl + Shift + 방향키(↑,↓): 줄 바꿈

 

프로그래밍할때 정말 중요한 들여쓰기는 블록 설정 후 tab키를 눌러서 일괄적으로 적용할 수 있고,

이를 되돌리려면 shift + tab키를 이용하면 됩니다.

 

Ctrl + (+, -)키: 브라켓 편집이 텍스트 크기 조절

 

2개월 정도 이런 단축키는 전혀 모른 채 수업 들었는데, 한번 정리하고 나니 세상에 이렇게 편한게 있었구나ㅋㅋㅋ

처음부터 단축키를 사용하지 않아서인지 정리함과 동시에 머리속에 콕콕 박혔네요.

 

덕분에 공부할 때 배로 수월해질거라 생각합니다. 

다음번에는 Emmet 설치 및 사용법으로 찾아볼께요~

Comments