Atom Editor Package Emmet – 아톰에디터 필수 패키지

Atom Editor Package Emmet – 아톰에디터 필수 패키지

Editor 꼭 필요한 패키지 설치하기

1. EMMET

웹사이트를 개발할때 꼭 필요한 에디터들의 종류가 많이 있습니다.

많이 사용하는 에디터로 Edit Plus,Notepad++,Komodo Edit 등등 무료로 사용할 수 있는 에디터들이 있습니다.

Komodo Edit 같은 경우에는 무료일 경우 기능의 차이가 조금 있지만, 사용하는 데 크게 문제가 되지는 않습니다.

Code Editor를 선택하는 이유는 각자의 취향이 맞고 사용이 편리해야 겠죠?

저같은 경우는 를 선택해서 사용하고 있는데요

제가 Atom Editor를 선택하고 사용하는 이유는, 사용이 편리한것이 첫번째 이유인데

빠르게 사용할 수 있도록 많은 팩키지들과 기능들을 각자의 취향에 맞게 선택하고 수정해서 사용할 수있다는 점 입니다.

Atom editor를 설치 하자 마자 가장 먼저 설치했던 것은 Emmet 입니다.

Emmet은 코드 자동완성이라고 생각하면 좋을 것 같습니다.

Package 설치 방법은 메뉴 > file > Settings > Install 에서 Emmet 를 검색하여 설치 합니다.

Settings 의 단축키는 Ctrl + , 입니다.

Atom Editor Package Emmet

설치가 완료되면 Emmet을 설정할 수 있는 버튼이 나오게 되고 Emmet에 관련된 여러가지 설정을 할 수 있습니다.

emmet_complete

사용을 해보기 위해 먼저 새파일을 만들고 test.html 로 저장을 합니다.

Emmet을 사용하기 위해 test.html 만들기
Emmet을 사용하기 위해 test.html 만들기

새로만든 test.html에 doctype을 선언하기 위해 doc 를 입력하면 미리 저장되어 있는
doctype에 대한 내용이 나오게 됩니다.

emmet_run

미리 저장되어 있는 doctype에 대한 내용을 Tab키를 누르게 되면 자동으로 입력이 됩니다.

YouTube video

또는, html문서에 들어갈 Tag들을 조합하여 한번에 완성할 수 도 있는데요

예를 들어

위와 같은 html코드를 만들때 일반적인 방법으로 입력 하려면

위 html코드를 복사해서 3번 붙어 넣는것이 가장 빠릅니다.

그러나 Emmet 문법을 사용하여 한번에 모두 완성할 수 있습니다.

먼저 위의 html코드를 만들려면

div.col-md-3>a

이렇게 입력하고 Tab 키를 눌러주면 자동으로 완성 됩니다.

그럼 이제 4번 반복을 자동으로 실행 되도록 Emmet 코드에 맞추어 작성 해 보겠습니다.

(div.col-md-3>a)*4

위와 같이 입력하고 Tab키를 입력하면 Emmet에서 자동으로 4 번 반복하여 코드를 완성 시켜 주게 됩니다.
 

YouTube video

 
Tab키 눌러 자동완성 시키는 기능만 으로도 빠르게 코딩을 진행 할 수 있지만,

반복되는 코드들을 간단한 Emmet문법 만으로 더 빠르게 완성시킬 수 있습니다.

Emmet 문법의 추가/자세한 내용은 바로가기 Emmet Docs 에서 확인 할 수 있습니다.

Scroll to Top