ATOM(아톰) 에디터 설치 및 사용

본격적으로 HTML을 코딩하기 위해서 에디터를 선택해 주어야 합니다. 컴퓨터의 운영체제 별로 윈도우는 '메모장', macOS에는 '텍스트 편집기', 리눅스에는 'gedit'라는 좋은 에디터가 있지만 이런 에디터가 가진 기능이 원래 코드를 작성하는 용도가 아니기 때문에 코드를 작성하는 데 최적화되어있는 도구를 사용할 것입니다.

제가 선택한 도구는 '아톰'이라는 에디터로 많은 에디터 중 한가지 인 아톰 에디터의 설치 및 초기 사용방법에 대해 알아보겠습니다.

 

 

아톰 에디터 설치

많은 에디터 중 아톰 에디터를 설치하는 방법은 매우 간단합니다. 아래 아톰 다운로드 링크를 클릭하면 위와 같이 아톰 에디터 다운로드 웹페이지로 이동하게 됩니다. 노란색으로 다운로드 버튼을 클릭해 설치 프로그램을 다운로드한 후 설치 프로그램을 실행하면 오른쪽 화면처럼 로켓에 연료를 싣는 것과 같은 애니메이션을 확인할 수 있습니다. 다른 프로그램 설치와 다르게 별도의 설치 과정은 필요 없고 알아서 프로그램 설치가 완료됩니다.

아톰(ATOM)에디터 설치 링크

프로그램 설치가 완료되면 위 이미지처럼 자동으로 아톰 에디터가 실행되게 됩니다. 프로그램 설치가 끝나면 오측 상단에 파란색 박스를 볼 수 있는데 YES를 클릭해주면 아톰 에디터 설치는 마무리됩니다.

 

 

아톰 에디터 초기 사용방법

아톰 에디터를 초기에 사용하는 방법이 조금은 다른데 먼저 바탕화면에 'web'이라는 폴더 한 개를 생성합니다. 앞으로 web이라는 디렉터리 파일을 우리의 프로젝트 파일로 만들어 우리가 웹사이트를 제작되는 데 사용하는 파일들이 web안에 저장한다는 뜻입니다.

바탕화면에 web이라는 폴더를 생성하고 나서 Open a Project를 클릭 후 바탕화면에 만들었던 폴더를 선택합니다. 파일을 선택하는 것이 아니라 폴더를 선택하게 되면 왼쪽 오른쪽으로 화면이 쪼개지게 될 것입니다.

이제 화면 왼쪽은 바탕화면에 생성한 'web'라는 디렉터리를 관리하는 화면입니다. 새로운 파일을 한개 만들기 위해 web폴더를 우클릭하여 New File를 클릭 후 1.html이라고 입력을 합니다. 마이크로소프트의 World를 써보신 분은 해당 문서의 확장자가 'doc'라는 것을 잘 알고 계실 것입니다. 우리나라에서 자주 사용하는 한글파일의 확장자는 'hwp'입니다. 이렇게 웹페이지는 확장자가 html이기 때문에 1이라는 이름과 html이라는 확장자를 적어준 것이라고 보시면 됩니다.

새로운 1.html 파일을 만들게 되면 우측에 코드를 입력할 수 있는 공간이 생기게 됩니다. 그럼 바탕화면에 만들었던 web라는 폴더를 확인해보면 1이라는 파일이 생성된 것을 확인할 수 있습니다. 바로 웹페이지가 생성된 것으로 여기에 내용을 입력하게 되면 웹페이지가 만들어지는 것입니다. 그럼 우측에 코드를 입력하는 공간에 Hello web page를 입력 후 Ctrl+S를 클릭한 후 저장을 합니다.

그럼 1이라는 파일 안에는 우리가 Hello web page라는 코드를 입력하고 저장을 하였습니다. 이 파일은 html확장자의 웹페이지이며 이 파일을 읽기 위해서는 구글 크롬이나 인터넷 익스플로러로 파일 열기를 하시면 됩니다.

파일 열기를 하면 웹페이지 안에 우리가 작성한 Hello web page가 있는 것을 볼 수 있습니다. 이렇게 되면 우리는 웹페이지에 원하는 내용을 입력할 수 있게 된 것입니다.

 

마치며

지금까지 아톰 에디터를 설치하고 초기에 어떻게 사용하는지에 대하여 알아보았습니다. 아톰 에디터의 경우 설치가 매우 간편하고 초기 사용방법 역시 쉽기 때문에  html 코딩을 위해 적합한 도구라고 생각이 됩니다.

 

 

관련 글

코딩과 HTML은 무엇인가

 

 

저의 글을 읽어 주셔서 감사합니다. 오늘도 즐거운 하루 보내세요.

저의 글이 조금이나마 도움이 되셨다면 로그인이 필요 없는 공감♥ 한번 꾸욱 눌러주세요.