ATOM에서 HTML Preview 사용하기

ATOM HTML Preview 설치 및 활용

---

웹 프로그래밍을 본격적으로 공부하기 위해서,

ATOM에서 시작을 해보기로 했습니다.

기본적으로 '.html'확장자를 만들어서 제작하다 보면 그때그때마다

웹브라우저를 띄워서 확인하는 것은 엄청 번거로운 일이 아닐 수 없습니다.

그래서 ATOM에 HTML Preview기능을 설치하기로 했습니다.

Atom HTML Preview 설치

---

1. Atom을 실행하여 Menu에서 File->Setting(단축키 'Ctrl+,')로 Setting탭 활성화

2. '+install'로 이동

3. Search packages 검색창에 'html preview' 검색(저는 package를 정하지는 않았었습니다.)

검색을 하니 atom-html-preview가 최상위에 올라와 있습니다.

사람들이 추천을 많이 해서 인지, 아니면 정말 좋아서 인지 제일 다운로드 횟수가 많습니다.

그래서 저도 망설이지 않고 atom-html-preview를 install 하였습니다.

Atom HTML Preview 사용법

---

사용법을 알기 위해서 아래와 같이 패키지의 이름이나 박스 안을 클릭하면 됩니다.

패키지 이름을 클릭하면 ATOM사이트가 웹브라우저를 통해서 열립니다.

패키지 박스안을 클릭하면 ATOM에서 바로 사용법등이 펼쳐집니다.

사용법은 두 가지 방법이 있습니다.

1. 단축키 'CTRL + SHIFT + H'를 사용하는 방법
2. Menu바 Packages->Preview HTML->Enable Preview를 클릭하는 방법

hello.html을 만들어서 우측에 Preview를 실행한 모습입니다.

HTML 작성 시 Preview가 실행되어 있으면 바로 인식하여 Preview에 적용된 화면을 보여 줍니다.

앞으로 유용하게 사용할 수 있을 거라 생각됩니다.

부족한 내용이나, 잘못된 곳이 있으면 댓글로 알려주세요.