HTML 편집기 : Atom 에디터 설치 및 Emmet 사용법


ATOM 에디터는 HTML 등을 편집할 때 작업 속도를 올려줍니다. Emmet 패키지를 설치하면 자동 완성 기능 및 코드 블록 지정 경우의 수가 증가하게 됩니다.

HTML 편집기 Atom 설치

아톰(Atom) 에디터란?

Atom 에디터란 깃허브에서 만든 오픈 소스 무료 웹 편집기입니다. Emmet 같은 플러그인을 설치 하면 윈도우 메모장에 비해서 코드 작성 시간을 현저히 단축시킬 수 있습니다.


Atom 설치

Atom 홈페이지에 접속하여 Atom을 다운로드 받습니다.

html-editor-atom-19

아톰이 성공적으로 설치된 모습입니다. 경우에 따라서 여러가지 파일이 화면에 보일 수 있습니다.

html-editor-atom-3

Emmet 플러그인 설치

Emmet 플러그인은 코딩 자동 완성 기능이나 대량 복사 기능 등이 있으므로 Atom과 같이 설치하는 것이 좋습니다.

Atom을 실행시켜서 상단 메뉴의 File → Settings를 실행합니다. 단축키는 Ctrl + , 입니다.

html-editor-atom-18

Settings 탭에서 좌측 하단의 Install을 클릭합니다. 그러면 아래 화면 처럼 Install Packages 창이 나옵니다. 검색창에 emmet을 입력합니다. 결과로 나오는 Emmet 프로그램을 Install 버튼을 클릭해서 설치를 완료합니다.

html-editor-atom-7

Atom 파일 편집

Atom 파일 생성

새 파일을 생성하기 위해서는 상단 메뉴의 FileNew File 또는 단축키 Ctrl + n을 누릅니다.

html-editor-atom-10

Untitled라는 새 파일이 생성됩니다.

html-editor-atom-12

Atom 파일 저장

파일을 새로 생성하고 아래 코드를 복사해서 입력하면 그림처럼 메모장과 별 차이가 없는 단조로운 디자인을 보여줍니다.


<!DOCTYPE>
<html>
<head>
<title>브라우저 탭의 제목</title>
</head>
<body>
<h1>HTML 이란?</h1>
<p>HTML 이란 웹 문서의 구조를 설명하는 언어입니다.</p>
</body>
</html>

html-editor-atom-24

파일 이름을 .html 로 저장해야 HTML 문서의 코드 색 구분 기능이 Atom 에디터에서 작동합니다. 합니다. 상단 메뉴의 FileSave를 누릅니다. 또는 단축키 Ctrl + s 또는 단축키 Alt + f + s 를 누릅니다.

html-editor-atom-11

이름 맨 뒤에 확장자 .html 을 붙이면 새 파일이 html 파일로 저장 됩니다.

html-editor-atom-15

확장자를 .html로 변경하면 그림처럼 HTML 코드의 색이 태그 안의 내용과 구분이 됩니다.

html-editor-atom-25

Atom 개별 파일 열기

FileOpen File 을 클릭하거나 단축키 Ctrl + o 를 누릅니다. 개별 html 파일을 불러올 수 있습니다.

html-editor-atom-23

Atom 폴더 열기

하위 파일을 가지고 있는 폴더를 불러와서 여러 개의 html 파일을 동시에 편집하는 기능입니다.

FileOpen Folder 를 클릭합니다. 또는 단축키 Ctrl + Shift + o 를 누릅니다.

html-editor-atom-26

원하는 폴더를 선택합니다. TEXT라는 이름의 폴더를 선택해보겠습니다.

html-editor-atom-28

왼쪽에 Project 라는 메뉴가 생성되고 TEXT 폴더안의 모든 파일이 좌측에 삽입됩니다. 폴더의 대량의 파일을 동시에 편집할 수 있습니다.


html-editor-atom-27

Atom Project 메뉴 사라졌을 때 복구

좌측 Project 메뉴가 사라진 경우, 아톰 창의 좌측마우스를 올리면 노란색 화살표 부근에 흰색 화살표 모양의 아이콘이 나옵니다. 아이콘을 클릭하면 Project 메뉴복구됩니다.

html-editor-atom-29

Project 창을 복구 하는 다른 방법에는 상단 메뉴에서 ViewToggle Tree View 를 클릭할 수도 있습니다. 또는 간단하게 단축키 Ctrl + \ 를 누르면 Project 창이 켜졌다 커졌다 반복이 됩니다.

html-editor-atom-30

Atom 기본 편집 기능

Atom 들여쓰기/내어쓰기

단축키 Tab 을 누르면 데이터 또는 마우스 커서가 한 칸 오른쪽으로 이동합니다. 적절한 들여쓰기를 통해서 레이아웃을 보기 좋게 만들 수 있습니다.

html-editor-atom-31

단축키 Shift + Tab 을 누르면 데이터 또는 마우스 커서가 한 칸 왼쪽으로 이동합니다. Tab 키를 눌러서 데이터가 우측으로 필요 이상 갔을 때 다시 왼쪽으로 이동할 수 있는 단축키입니다.

html-editor-atom-32

Atom 태그 자동 완성

html 파일을 불러오거나 새 파일이라면 확장자를 html로 저장합니다. 그러면 원하는 html 코드의 알파벳 한 글자만 쳐도 자동으로 연관된 html 태그의 목록이 나옵니다.

html-editor-atom-33

예를 들어 <h1> 태그를 쳐보겠습니다. 태그의 꺽쇠 기호 < >없이 h1 만 칩니다.

html-editor-atom-35

이 상태에서 키보드 Tab 을 눌러봅니다. 그림처럼 자동으로 <h1> 여는 태그와 </h1>닫는 태그가 생성됩니다.


html-editor-atom-36

Atom 태그 대량 복사

태그 대량 복사는 원하는 태그에 곱하기 기호 * 를 붙이고 곱할 숫자를 입력하면 됩니다.

예를 들어 <h1> 태그 100개를 동시에 작성해보겠습니다. 꺾쇠 < > 없이 h1을 적고 곱하기 기호 * 를 뒤에 적고 마지막으로 원하는 숫자 100 를 입력합니다.

html-editor-atom-37

이 상태에서 단축키 Tab 을 누릅니다. <h1> 태그 100개가 생성되었습니다.

html-editor-atom-38

Atom 데이터 대량 수정

데이터를 대량 수정이란 마우스 커서를 동시에 여러 곳에 둘 수 있는 기능을 말합니다.

html-editor-atom-39

‘과’ 앞에서 마우스 왼쪽 클릭을 누릅니다. 워드나 엑셀 처럼 Ctrl 키를 누른 상태로 서로 다른 줄을 복수 선택할 수 있습니다. Shift 키를 누르면 차례대로 데이터가 선택됩니다. 커서가 여러 줄에 동시에 생성된 모습입니다. 이 상태에서 타이핑을 하면 여러 줄에 동시에 텍스트가 입력됩니다.

html-editor-atom-40

동시 블록 지정도 가능합니다. 마찬가지로 키보드 Shift 또는 Ctrl 를 누르고 마우스로 드래그를 해줍니다. 지정한 곳이 전부 블록 지정이 됩니다.

html-editor-atom-41

데이터를 입력하면 동시에 선택한 곳에서 텍스트가 입력됩니다.

html-editor-atom-42

Ctrl + Alt를 누른 상태로 키보드 방향키를 조작하면 마우스 커서를 위 아래로 일렬로 대량으로 복수 선택할 수 있습니다.