[Web] ATOM 에디터

ATOM 에디터

HTML은 메모장에서 돌아갈 정도로 가볍지만, 이 경우 가독성과 생산성이 그리 좋지 않다

따라서 ATOM이나 sublime text등과 같은 여러 툴들이 생겨나게 되었다.

이러한 텍스트 에디터의 장점으로는 코드 하이라이터로 가독성이 좋고,

자동완성 기능으로 생산성이 비약적으로 향상된다는 것이 있다.

또한, 플러그인등의 설치로 확장성도 높아진다.

오늘은 이러한 텍스트 에디터 중 ATOM에 대한 설치와 사용법에 대해 알아보자

ATOM은 git재단에서 지원하는 무료 에디터 이다.

공식 홈페이지는 다음과 같다.

https://atom.io/

홈페이지에 접속하여 ATOM을 다운받는다

윈도우나 맥 둘다 설치과정이 그리 어렵지 않으니, 방법은 생략한다.

설치가 완료 되었으면 ATOM을 실행시킨다.

1. 폴더 지정 및 새 파일 만들기

  

File -> Open Folder를 누르고 자신의 work space 폴더를 지정하면

오른쪽과 같이 파일들 전체를 관리할수 있어 편리하다.

수정등의 세부작업이 필요할 때 파일을 더블 클릭하면된다.

해당 폴더에 새 파일을 만들기 위해서는 폴더위에서 오른쪽 클릭 -> New File을 선택한다.

 

이 때 파일 이름을 입력하라는 창이 뜨게된다.

적당히 자신이 원하는 이름과 확장자를 넣어서 파일을 만들어주자

완료가 되면 파일이 만들어지고 다음과 같은 화면이 뜬다.

밑의 HTML 코드는 임으로 작성하였다

2. 자동완성 패키지 설치

다음은 자동 완성 플러그인을 설치해보자 

우선 File -> setting에 들어간다.

맥의 경우 ATOM -> preference에 들어가면 된다.

좌측에 intall 탭을 클릭 후 emmet이라고 검색한다.

이후 첫번째있는 패키지를 인스톨한다.

다시 작업 화면으로 돌아와 HTML 태그를 작성할 때 하단에 자동완성 기능이 추가가 된다

여기서 TAB을 누르면 자동으로 끝 태그까지 입력이 된다.

또한, 태그 사이에서 엔터를 입력하면 자동으로 들여쓰기가 된다.