- 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) 소스 창에 !(느낌표) 를 입력하신 후, 탭키를 누르면 기본 탬블릿이 생성되는지 확인합니다.
'Programming > 퍼블리셔' 카테고리의 다른 글
모바일 웹, PC 반응형에 쓰이는 기본 meta 태그 (0) | 2018.07.24 |
---|---|
일정 시간 후 다른 페이지로 이동하는 meta 태그 (0) | 2018.07.24 |
검색 관련 meta 태그(robots, 트위터, 카카오톡 등) (0) | 2018.07.24 |
HTML4와 HTML5, XHTML1.0 문서형, 문자셋 지정 방법 (0) | 2018.07.24 |