<2> Sublime Text 제대로 활용하기
자비스와 같은 존재, Package Control
실무에서 사용되는 웹스타일을 공부하기에 앞서 웹개발에 최적화된 개발 환경을 세팅할 필요가 있습니다. 보통 비전공자분들이 Sublime Text 로 공부하는 경우가 많기 때문에 Sublime Text 를 제대로 활용하기 위한 몇 가지 팁을 전달하고자 합니다.
Sublime Text 를 제대로 사용하기 위해서는 Package Control 을 필수로 설치해야 합니다. Package Control 은 Sublime Text 의 플러그인을 관리해주는 도구로 이를 사용하여 손쉽게 개발 환경 세팅에 필요한 플러그인 설치 및 제거, 업데이트를 할 수 있습니다. Sublime Text 버전마다 설치 방법이 다르니 버전 체크 후에 아래 코드를 복사하여 콘솔창에 붙여 넣어 주면 됩니다.
Sublime Text 2 : https://packagecontrol.io/installation#st2
Sublime Text 3 : https://packagecontrol.io/installation#st3
콘솔창은 메뉴에서 View > Show Console 또는 단축키: (Ctrl + `)로 열수 있습니다.
ECU-KR 설정하기
SublimeText 3 는 기본으로 utf-8 인코딩을 사용합니다. 만약 euc-kr 로 작성된 코드를 읽고 싶다는 ConvertToUTF8 패키지를 설치하면 됩니다.
Sublime Text 3 에서 단축키 Ctrl + Shift + P ( mac 은 Command + Shift + P ) 로 Command Palette 을 불러옵니다. 그럼 아래 화면처럼 Install 을 입력하면 상단에 나오는 Package Control: Install Package 를 선택하여 엔터를 누릅니다. 이후 CovertToUTF8 을 찾아서 설치한 다음 메뉴에서 File > Set File Encoding To > Korean (EUC-KR)을 선택하면 됩니다.
Emmet(Zen Coding) 설치
Emmet 는 HTML, CSS 작업 능률을 향상시켜주는 Sublime Text 의 필수 플러그인입니다. 입력한 축약어에 대해서 내용을 자동을 완성시켜주기 때문에 HTML, CSS 를 주로 사용하는 웹 개발자에게는 "단비"같은 존재입니다.
설치 방법은 단축키 Ctrl + Shift + P > Package Control: Install Package > emmet 를 선택하면 아래 이미지처럼 정상적으로 설치가 완료됐다는 메시지가 등장합니다.
index.html 파일을 생성한 후 아래 방식으로 코드를 입력하면 클래스 또는 아이디가 삽입되어 있는 부모, 형제, 자식 관계를 나타내는 구조가 자동으로 완성되는 것을 확인할 수 있습니다.
ul>li*5 + tab
div.container>div.logo+ul.navbar>li*3>a + tab
Dummy Text, 이제 lorem 을 사용하자
HTML 작업을 하다보면 Dummy Text 를 사용하는 경우가 많습니다. lorem 을 이용하면 Dummy Text 를 자동으로 완성시켜주기 때문에 빠르게 코드 작업을 진행할 수있습니다. 사용 방법은 lorem 을 입력 후 tab 을 눌러주면 문장이 자동으로 완성됩니다.
lorem + tab
Dummy Text 글자수를 정하고 싶다면 lorem숫자 + tab 을 입력해 주면 됩니다. 그럼 입력된 숫자만큼의 단어로 구성된 문장이 자동으로 완성됩니다.
lorem10 + tab
필자의 경우에는 처음 개발 공부를 시작했을 때는 Sublime Text 를 자주 사용하다가 JavaScript 공부를 시작하고부터는 JavaScript 환경에 특화되어 있는 WebStrom 에서 주로 작업하고 있습니다. 사람마다 취향이 다르듯 개발 도구도 저마다 고유의 특징을 갖고 있기 때문에 자기 스타일에 적합한 개발도구를 선택하여 작업하면 됩니다.
