[Sublime Text] 설치 및 emmet(Zen-coding) 설치

Programming/퍼블리셔 2018. 7. 24. 09:13 Posted by 생각하는로뎅
반응형

- Sublime Text : 크로스 플랫폼 텍스트 에디터. 주로 프론트 엔드 프로그래밍에 사용

- emmet(Zen-coding) : 코드를 좀 더 쉽게 사용하기 위해 사용



1. Sublime Text 설치 

   (1) URL : https://www.sublimetext.com/3

   (2) OS 버전에 맞는 파일 설치을 설치한다.

  


2. Sublime Text 를 실행 후, emmet을 설치하기 위한 사전 준비를 해야한다.

   최초 설치시 메뉴 Preferences -> Package Control 메뉴가 없는데, 이 메뉴를 생성을 위해서 Package Control을 설치해야한다.


  (1) https://packagecontrol.io/installation#st3 접속한다.

  (2) 크롬 혹은 파이어폭스(*주의) 같은 브라우저로 Package Control.sublime-package 을 클릭해서 다운로드한다.

  (3) Package Control.sublime-package 라는 이름으로 파일을 다운로드가 되는데, 파일 이름이나, 확장자명이 다르지 않은지 확인한다.

  (4) Sublime Text 에서 메뉴 Preferences -> Browse Packages 를 누르면 폴더 하나가 열리게된다.

  (5) 경로 C:\유저 경로\AppData\Roaming\Sublime Text 3\Packages 에서  경로 C:\유저 경로\AppData\Roaming\Sublime Text 3\Installed Packages 으로 이동 후, Package Control.sublime-package 을 해당 폴더로 이동한다.


3. Sublime Text를 재시작한다.


4. Preferences -> Package Control 메뉴가 있다면 성공적으로 설치된것이다.


5. Preferences -> Package Control 실행 후, Package Control: install Package 을 검색하면 목록에 해당 내용이 뜨는데, 클릭한다.




6. 잠시만 기다리면 또 하나의 창이 뜨게 되는데, 그곳에다가 emmet을 입력 후, 첫번째 목록을 클릭한다.



7. 아래 같이 텍스트 창이 뜨게되면, 설치가 완료된것이다.

  


8. 기능이 재대로 작동하는지 확인하는 방법은 

   (1) Sublime Text 메뉴에서 File -> New File -> Ctrl + S 를 누른 후, 파일이름을 {원하시는 이름}.html 로 저장 합니다.

   (2) 소스 창에 !(느낌표) 를 입력하신 후, 탭키를 누르면 기본 탬블릿이 생성되는지 확인합니다.






  

반응형