무료 코딩 프로그램 brackets 브라켓 다운로드, 에밋코딩/젠코딩 설정방법, 장점

오늘은 무료 코딩 프로그램 brackets 브라켓 다운로드, 다크모드 테마 설정 방법과 코딩을 효과적으로 빠르게 할 수 있도록 도와주는 에밋코딩(Emmet) / 젠코딩(Zen coding) 설정 방법 그리고 html 기본구문을 빠르게 만들어 주는 단축키에 대해서 알려드릴게요.

 

코딩 프로그램은 여러가지 있는데 저는 brackets 브라켓을 사용하고 있어요. 

brackets 브라켓을 사용하기 전에는 Editplus를 사용했었는데 개인적으로 brackets이 잘 맞는것 같아요.

 

코딩 프로그램은 이것이 좋다! 저것이 좋다! 결론은 내리기 애매하니 여러 가지 사용해 보시고 성향에 맞는 프로그램으로 사용하시면 되요.

 

솔직히 메모장으로만 아니면 OK!!!

 

1. 코딩 프로그램에 어떤 것들이 있나요?

코딩프로그램 brackets 브라켓을 소개하기 전에 몇 가지 코딩 프로그램에 대해서 알려드리고 넘어갈게요.

현업 혹은 학원에서 주로 쓰느 코딩 프로그램은 아래와 같으니 참고하세요.

1. brackets

2. Atom

3. Editplus 

4. Sublime text

5. VS code(Visual Studio Code) 

 

 

2. brackets 다운로드 링크

코딩프로그램 brackets 다운로드는 brackets.io/ 에서 할 수 있어요.

 

3. 에밋코딩(Emmet) / 젠코딩(Zen coding) 설정 방법

에밋코딩(Emmet) / 젠코딩을 사용하면 코딩을 일일이 다 입력하지 않아도 문자 자동완성 기능처럼 자동으로 닫힘 구문이 만들어져서 코딩을 조금 더 빠르게 할 수 있어요.

 

brackets 브라켓에서 플러그인 에밋기능(Emmet) 설치해주면 <div>입력시 자동으로 </div> 닫힌 코딩이 생성이 돼고

<li>를 입력하면 </li>닫힌 코딩이 생성 되지요.

<div></div>
<li></li>

Emmet사용을 위해서는 brackets 브라켓을 열고 오른쪽에 플러그 모양을 클릭 후 오른쪽 검색창에 Emmet를 입력하여 표시된 부분을 찾아 설치해 주면 됩니다.

 

 

emmet 정상설치 된 경우에 메뉴 맨 오른쪽에 Emmet라고 표시

설치를 마친 후 무료 코딩프로그램 brackets 열어 상단 오른쪽에 Emmet이란 메뉴가 보인다면 잘 설치가 된 거예요.

 

새 파일을 열고 문서 확장자를 html로 저장해 준 상태에서 html:5 입력 후 tab키를 눌러주면 위 이미지처럼 html기본문구가 생성이 됩니다.  일일이 입력하지 않아도 되는거죠.

 

 

 

만약 html:5 입력하고 tab키를 쳐도 html기본 문구가 생성이 안된다면 그 파일을 html문서가 아니기 때문이에요.

 

4. brackets 테마 배경색 변경 방법

코딩 무료프그램 brackets 사용 시 배경색을 dark모드로 해 주면 눈의 피로를 조금 덜어지는 듯 하여 저는 배경을 어두운 색으로 설정 해 놓고 사용해요. 

 

상단메뉴 보기 > 테마 > 테마설정에서 Brackets Dark로 선택해 주고 하단에 완료 버튼을 눌러주면 아래와 같이 화면이 어두운 색으로 변경됩니다.

 

 

두 화면을 놓고 비교해 보면 어느 화면이 덜 피로한 지 확인할 수 있어요.

 

코딩 프로그램 찾고 계신다면 브라켓 brackets도 한번 사용 해 보시길 추천해요!