Atom | 유용한 텍스트 에디터

HTML, CSS 등 텍스트 관련 자료를 살펴보던 중 괜찮은 에디터가 있어서 추천해보려고 한다. Atom Text Editor로 편리한 텍스트 작성을 위해 Github에서 개발하였고 주요 특징은 무료, 플러그인을 통한 확정성이다. 그리고 맘에 들었던 이유 중 하나인..깔끔하다..! 그럼 설치하여 사용해보자.

Atom Text Editor

사이트(https://atom.io/)에 접속하여 Atom Editor를 다운로드 받도록 한다.

A hackable text editor for the 21st Century

At GitHub, we’re building the text editor we’ve always wanted: hackable to the core, but approachable on the first day without ever touching a config file. We can’t wait to see what you build with it.

atom.io

HTML | CSS 를 위한 개발 패키지 3개 설치

설치 후 실행하면 다음과 같은 패널이 나타난다. 이제 지금부터 맞는 플러그인을 설치하고 사용하면되는데 본문에서는 웹 페이지 개발을 위한 플러그인 3개를 설치하고 테스트해보도록 하겠다.

Add folders 버튼을 누르고 Atom용 폴더를 하나 생성하고 Install 메뉴에서 Emmet을 검색한다. Emmet은 HTML과 CSS에서의 자동 완성 기능을 제공한다.

다음은 Atom-html-preview를 다운로드 받는다. atom-html-preview는 HTML 파일을 작성하고 열어볼 필요없이 바로 결과를 확일할 수 있도록 해준다.

마지막으로 Atom-beautify이다. Atom-beautify는 소스 코드를 좀 더 시각적으로 보기 쉽게 다양한 색상으로 표현할 수 있도록 해준다.

사용 예시

3개 패키기 설치가 완료되었다면 폴더 항목에서 우클릭 >> New File로 새파일을 만든다. 이름은 편하게 지정하고 html을 만들어보았다. 그럼 우측에 편집기에서 !를 입력하고 tab키를 누른다. 그러면 HTML 기본 틀이 자동으로 완성되는데 Emmet의 자동 완성 기능이 바로 이것이다.