오랜만에 인사드리는 캔바냥이예요.
오늘은 코딩을 할 때 사용하는 프로그램 중 Brackets(브라켓, 브래킷)이라는 프로그램을 가져와봤어요.
오늘은 프로그램을 설치한 후 한글로 프로그램이 나온다면 영어 버전으로 바꾸고 사용할 때 편리하기 위해 필요한 Emmet(에밋) 기능을 설치하는 방법까지 알아보도록 해요.
혹시 프로그램이 설치되어있지 않은 분들은 간단하게 설치할 수 있어요.
우선 검색어에 brackets라고 검색을 하시면 (구글 검색) 제일 위쪽에 나오는 사이트로 들어가서 다운로드 후 설치 그냥 진행해주시면 금방 깔 수 있어요. 이게 다입니다.
다른 과정은 전혀 필요 없으니 일단 설치가 되어있다는 가정하에 설명드릴게요.
언어 변경하기.
제일 처음 프로그램을 설치하면 한글 버전으로 나와요.(이대로 사용해도 좋지만 저는 여러 가지 이유로 영어 버전으로 바꿔볼게요.)
메뉴에서 [디버그] 메뉴를 눌러주세요.
그러면 이렇게 언어 변경이라는 메뉴가 있을 거예요. 클릭!
언어 변경이라는 대화 상자가 뜨고 여기서 원하는 언어를 선택해줘요. 저는 English(US)로 바꿔줄게요.
Brackets 재시작을 눌러주면 돼요.
이렇게 자동으로 꺼졌다 켜지면서 영문 버전으로 바뀐 게 보이죠? 그러면 끝!!
이제 Emmet(에밋)을 설치해볼게요.
우선 Emmet기능이 무엇이냐? 하면 코드를 자동 완성해주는 기능이라고 생각하면 좋아요.
태그를 작성할 때 일일이 <html></html>이렇게 적어주는 게 아니라, 'h' 하나만 입력하고 키보드의 Tab키를 누르면 자동으로 열린 태그 닫힌 태그까지 완성해주는 역할을 하는 기능이라고 생각해주세요.
(이제부턴 영어 버전으로 화면이 나오겠죠?)
[File] - [Extension Manager..] 메뉴를 눌러주세요. 한글로는 [확장 기능 관리자]입니다.
또는 이렇게 화면 맨 오른쪽에 '레고 블록'처럼 생긴 아이콘도 똑같은 Extension Manager(확장 기능 관리자) 버튼이에요.
들어가면 이렇게 화면이 나올 텐데요. Installed [설치됨] 메뉴를 눌러주면 아직 아무것도 설치돼있지 않은 상태일 거예요.
설치가 돼있다면 이렇게 나오겠지만 아직 여러분들은 아무것도 설치돼있지 않아서 빈 화면만 나올 거예요.
이제 설치를 해볼게요.
다시 Available [설치 가능] 메뉴를 눌러서 검색창에 emmet을 검색해주세요.
그러면 이렇게 나올 거예요. 여기서 Emmet이라고 된 부분을 받아주세요. Install 클릭!
설치가 자동으로 되면서 설치가 완료되면 이렇게 성공이라고 떠요.
다시 Installed [설치됨] 메뉴로 들어오면 이렇게 Emmet이 설치된 게 보일 거예요.
확인도 해볼게요. 저는 간단히 확인하기 위해서 바탕화면에 test.html이라는 파일을 하나 만들어놓고
Brackets에서 '!'(느낌표) 하나 적고 Tab키를 눌러주었어요.
그러면 이렇게 자동으로 </html>까지 완성해주는 모습을 볼 수 있죠.
혹시 웹디자인기능사를 준비하고 계시는 분들은 시험장에 에밋 기능이 설치되어있는지 확인부터하고 설치해주면 좋아요. 그런데 만약 설치돼있지 않다면 설치를 위에서 설명드린 것처럼 해주면 되는데요.
하지만 수험장에는 인터넷을 막아놓았죠. 인터넷이 안되면 설치하기 힘들 수 있으니 자주 사용하고 시험에 필요한 코드는 본인이 스스로 작성할 수 있을 만큼 숙지해서 가는 게 좋아요.
자 그럼 오늘은 여기까지예요. Brackets의 Emmet기능 잘 활용해서 멋진 코딩 하세요.
'컴퓨터&SNS&블로그 팁 > 기타 팁' 카테고리의 다른 글
| 웹디자인(홈페이지 디자인) 벤치마킹, 참고하기 좋은 사이트 BEST 10 (0) | 2019.09.26 |
|---|---|
| 파일질라(FileZilla)설치와 언어 변경 방법 (1) | 2019.09.23 |
| 이클립스(Eclipse)설치와 java 실행 하기(Window 10 기준) (0) | 2019.09.16 |
| Java 다운로드, 설치, 환경변수 설정(window 10기준) (0) | 2019.09.15 |
| 상업용 무료 폰트 다운 받는 사이트 소개 (0) | 2019.08.20 |
댓글