[Settings] Sublime text(서브라임 텍스트) 설치

 

업무에 필요한 프론트엔드 개발에 필요한 내용을 정리해놓은 포스팅입니다.

 

프론트엔드는 HTML5, CSS3는 기본이기 때문에, 업무속도 향상을 위해 소스들을 미리 적어두면 좋습니다.

프론트엔드에만 집중해 필요한 개발환경을 셋팅해보겠습니다. 

 

< 1. 브라우저 >

코딩을 할 때는 크롬이나 파이어폭스에서 확인하는 것이 좋습니다.

물론, 나중에는 익스플로러와 엣지에서도 잘 작동하는지 확인해야합니다.

 

 

1. PC용 브라우저

저는 작업표시줄에 브라우저(크롬, 웨일, 엣지, 익스플로러, 오페라, 파이어폭스)들을 여러개 두고 시간 날 때마다 체크하며 화면이 잘 나오는 지 확인하고 있습니다.

 

 

2. 모바일

- 크롬 (ios, 안드로이드 공통)

- 사파리 (아이폰) / 삼성 인터넷 브라우저 (안드로이드)

를 주로 체크하고 있습니다.

 

---

 

< 2. 에디터 설치 >

퍼블리싱보다 기능 개발을 주로 하시는 프로그래머분들은 이미 다른 프로그램을 사용 중이시겠지만, html과 css에 집중해서 개발할 경우 아래 에디터들을 추천합니다.

 

에디트플러스 : https://www.editplus.com/kr/

서브라임텍스트 : https://www.sublimetext.com/3

노트패드++ : https://notepad-plus-plus.org/

아톰 : https://atom.io/

압타나 : http://www.aptana.com/

 

저는 그 중에서 서브라임 텍스트를 선호하는 편입니다. 아래는 서브라임 텍스트 설치 방법입니다.

 

1. 서브라임 텍스트 3 설치

 

1) 다운로드

https://www.sublimetext.com/3 

서브라임 텍스트 사이트로 들어가셔서 다운로드를 받아주세요.

portable version이 아니라 앞 쪽의 OS X, Windows라 적힌 부분을 다운받습니다.

 

 

2) 설치 진행

가벼운 프로그램이기 때문에 설치는 아주 간단합니다.

next를 눌러서 설치를 완료해주세요.

 

설치가 완료되었습니다.

설치가 완료되며 시작프로그램에 아래와 같이 프로그램이 확인됩니다.

 

실행해보시면

이러한 편집창이 나타나게 됩니다.

 

2. emmet(zen-coding) 설치

추가로 zen-coding(옛날 명칭), emmet이라 불리는 프로그램을 설치해주는 것이 좋습니다.

 

1) package control 설치

처음 서브라임 텍스트스를 설치하면 preferences에 package control이 없습니다.

이 package control이 있어야 온라인으로 기타 라이브러리등을 설치할 수 있기 때문에

https://packagecontrol.io/installation

에 접속하여 설치해줍니다.

 

 

(1) 중간 Manual의 3번째를 다운로드

Download Package Control.sublime-package and copy it into the Installed Packages/ director(주의) 익스플로러에서 다운 시, 확장자 오류가 있을 수 있으므로

Chrome이나 Firefox 브라우저에서 다운을 받는 것이 좋습니다.

 

(2) 다운로드가 잘 받아졌습니다.

 

위와 같이 확장자가 바뀌지 않고 sublime-package로 된 것을 확인합니다

 

(3) sublime text로 돌아와서

 

preference - browse package 클릭합니다.

 

상위의 Sublime text3 폴더를 클릭합니다. 

이 중 Installed Packages에 방금 다운 받은 Package Control.sublime-package 파일을 옮깁니다.

 

창을 닫은 후, 같은 경로로 다시 들어가면 

하단에 package Settings, Package Control 메뉴가 생긴 것을 볼 수 있습니다. 

 

 

2) emmet(zen-coding) 설치

이제 필요한 emmet을 설치합니다.  

Package Control을 누릅니다. 

 

install Package를 입력해 패키지를 설치합니다.  

 

설치가 끝나면 Emmet을 입력해 

Emmet for sublime text를 선택합니다.

설치가 끝나면 해당 화면이 나옵니다. 

 

 

3) emmet(zen-coding) 확인

설치가 완료된 것을 확인해봅니다. 

서브라임 텍스트를 재 실행 후, html 파일을 하나 저장해줍니다. 저는 01test.html이라고 적었습니다. 

해당 화면에서 !를 누른 후 tab을 눌러줍니다. 

 

!+tab

그러면 아래와 같이 

html 코드가 자동으로 입력이 됩니다. 

이렇게 나오시면 emmet 설치가 완료된 것입니다.