프로그래밍/프로그램 설치

[Editor]아톰(atom) 설치 및 사용 방법 - HTML 에디터

혬코 2021. 12. 17. 16:06

HTML 에디터 중 하나인 Atom은 Github에서 개발한 Editor Application이다.

무료라는 점, 직관적으로 표현이 가능한 점, 패키지를 추가하면 다양한 기능을 쓸 수 있다는 점 등 다양한 장점을 가지고 있다!

Atom의 설치 방법은 아래 사이트에 들어가서

https://atom.io/

 

노란 박스의 Download를 클릭하면 알아서 설치 된다.

설치가 끝나고 파일을 실행하면 이런 화면이 뜨는데, 제일 왼쪽의 Project 탭만 남겨두고 모두 꺼주면 된다.

웹페이지를 만들기 전에 바탕화면이나 어디든 본인이 실습한 파일을 저장할 폴더를 생성해줘야 한다.
나는 Project1이라는 폴더를 바탕화면에 만들어두었다.

다음은 Project 탭의 "Add folders"를 선택해서 본인이 생성해놓은 폴더를 선택해주면 된다.
(실수로 Project 탭을 닫았다면 위쪽 메뉴에 File - Add Project Folder를 선택하거나 단축키 Ctrl + Shift + A를 누르면 된다.)

그러면 아래와 같이 Project 탭에 "Project1" 폴더가 추가 된 것을 볼 수 있다.
(저는 기존에 WEB이라는 폴더를 이미 추가해 놓은 상태라 2개의 폴더가 보이는 것입니다...!)

이제 Project1에서 실습할 파일들을 만들어 주면 된다.
Project1 폴더를 선택하고 오른쪽 마우스를 클릭하고 New File을 누른 뒤

본인이 원하는 웹페이지 이름과 확장자(html)를 입력하고 Enter를 눌러주면 된다.
ex) "웹페이지 이름.html"

나는 1-1이라는 웹페이지 이름을 설정하여 1-1.html을 입력했다. 웹페이지 이름은 되도록 영어나 숫자를 권고한다.

그러면 Protect 탭에서 폴더 아래 파일이 생성된 것을 확인 할 수 있는 것으로 작성 준비는 끝이 난다.


++++++++
파일을 저장하기 위해 만든 폴더(나는 Pjoject1 폴더)에 들어가서 내가 만든 웹페이지(1-1)를 열 수도 있으며, windows 사용자는 크롬, 익스플로러에서 Ctrl + O 키를 눌러 저장된 파일을 찾아 열 수도 있다.

테스트로 Atom에서 HELLO!라고 입력하고 Ctrl + S 키로 저장한 후 웹페이지를 열거나 이미 열려있다면 새로고침 또는 F5키를 누르면 Atom에서 적었던 그대로 출력하는 것을 확인 할 수 있다.