티스토리 뷰
초보자들 드루와 서브라임 텍스트 기초 세팅 가이드 (Sublime setting for beginners)
안녕하세요 AimHo 입니다.
그동안 Notepad++를 사용해서 html 코드를 작성했었는데,
너무 기능이 없는 툴이라 코드를 작성할 때 불편한 점이 많았습니다.
그래서 어떤 툴을 사용해볼까 알아보았는데, 서브라임 텍스트(Sublime Text)가 가장 유명하더군요
사용자 입맛에 맞게 플러그인 몇 개 설치하면 사용하기 편할 것 같았습니다.
그래서 서브라임 텍스트를 설치 했습니다.
어떤 플러그인이 유용한지 몰라서 유투브의 니꼴라스 TV의 서브라임 기초 세팅 영상을 참고해서 기초 세팅만 적용해보도록 하겠습니다. 자 이제 서브라임 텍스트 설치부터 플러그인 설치까지 차례대로 시작해보도록 하겠습니다!
서브라임 텍스트 설치
1. 서브라임 홈페이지에 접속해서 프로그램을 다운로드 받습니다.
(다운로드 링크: https://www.sublimetext.com/)
2. 다운로드 받은 파일을 실행시켜서 서브라임 텍스트를 설치해줍니다.
건드릴 옵션도 없으니까 엔터만 쳐주면 됩니다^^
3. 설치끝!
플러그인 설치를 위한 준비 Package Control
플러그인 설치를 위해서 일단 먼저 설치해줘야 할 것이 있습니다.
바로 Package Control 인데, 이게 있어야 서브라임 텍스트의 유용한 플러그인들을 설치할 수 있습니다.
그럼 Package Control을 설치해볼까요?
1. 설치된 서브라임 텍스트를 실행시켜 줍시다.
2. 위에 있는 항목 중 'View -> Show Console' 을 선택해줍니다. (단축키: ctrl + `)
3. 웹 브라우저에서 Package Control 사이트에 접속합니다. (링크: https://packagecontrol.io/)
4. 오른쪽 메뉴 중 Installation 항목을 선택합니다.
5. 복잡한 코드가 생성되는데 Sublime Text3의 코드들을 모두 복사합니다.
6. Console에 복사한 코드를 붙여넣고 엔터를 칩시다.
콘솔창에 reloading ~~~ 라고 표시되는데 기다리고 있으면 설치됩니다.
7. Console 창에 변화가 없으면 위 항목에서 'Preferences -> Package Control'이 있는지 확인해보세요!
8. package control 창에 'install package'라고 입력하고 첫번째로 나오는 항목을 선택합니다.
그러면 왼쪽 하단에 조그만한 progress bar가 움직이는 걸 볼 수 있습니다.
자 이제 본격적으로 플러그인 설치를 할 수 있게 되었습니다.
플러그인 설치: Sidebar enhancements
플러그인 없이 순정으로 사용하면 코딩하기 지루하고 불필요한 작업들 그리고 불가능한 작업들이 많다고 합니다.
인터넷의 많은 html 코딩 툴 비교 글에서도 서브라임 텍스트의 장점은 플러그인 설치를 통해 진가를 발휘한다고 했으니 한번 느껴봅시다.
먼저 'Sidebar enhancements' 플러그인을 설치하도록 하겠습니다.
Sidebar enhancements를 설치하면 옆에 Side bar에서 폴더도 만들고 이름도 변경할 수 있는 기능이 추가됩니다.
'package control 창 -> install 입력 -> Sidebar enhancements 엔터' 하면 설치가 완료됩니다.
이제 서브라임 텍스트를 재시작해서 아무 폴더나 열어보면 파일 생성, 복사 등 여러 기능을 사용할 수 있습니다.
플러그인 설치: EMMET
이건 코딩할 때 매우 유용한 플러그인 입니다. 저 플러그인을 설치하고 코드 몇 줄만 쳐보면 어떤 기능을 갖고 있는 플러그인인지 알게되실 겁니다.
네 맞습니다. Emmet는 코딩을 할 때 몇자만 입력하면 정형화된 코드를 자동으로 입력해주는 플러그인입니다. 코딩작업을 할 때 효율적인 작업을 할 수 있게 도와줍니다.
예를 들어 index.html 파일을 생성하고 html:5라고 입력하고 Tap키를 입력하면?
어떻습니까 정말 신기하지 않나요?
div name 클래스를 만들고 싶으면 'div.name', div name ID를 만들고 싶으면 'div#name' 라고 입력하면 끝입니다.
이 밖에 더 많은 Emmet의 사용법을 알고 싶다면 아래 링크를 참고하세요!
(Emmet API: https://docs.emmet.io)
텍스트로 적어놓은 내용이 부족하시다면 니꼴라스TV의 영상을 보시면서 따라해보세요
이상으로 서브라임 텍스트 기초 세팅 가이드 포스팅을 마치도록 하겠습니다.
