1강. HTML 코딩환경 만들어주기 (Atom 설치법)

2020.07.12일 오늘부로 웹 개발을 공부해볼 예정입니다. 웹 개발을 하기 위해서는 HTML을 이용하는데

실질적으로 HTML을 편집하기 위해서는 다양한 에디터가 있지만 저는 Atom을 이용해서 HTML실습을 

해보려고 합니다. 지금 부터 Atom 다운로드하는 법을 알려드리겠습니다. 참고로 무료 다운 가능합니다.

아래의 링크를 눌러주세요

 

https://atom.io 

A hackable text editor for the 21st Century

위 링크를 눌러주면 다음과 같은 화면이 나타납니다

 

Atom 홈 화면

화면에 보이는 다운로드를 눌르면 바로바로 설치가 가능합니다. 설치를 누르면 다음과 같은 화면이 나타납니다

 

설치중

이 과정에서 5분에서 10분정도가 소요되니 혹시 오류인가? 기다렸는데도 왜 안 되지? 조바심 내실 필요 없으십니다 ~

아톰을 다운받으시고 아톰을 들어가게 된다면 다음과 같은 화면이 뜨게 됩니다.

 

아톰 접속 초기 화면

그렇다면 위에 welcome과 welcome guide 가 있는데 마우스를 저곳에 갔다 두면 x자의 지우기 버튼이 보이는데 둘 다 지워 줍니다. 여기까지 따라오셨다면  바탕화면에 web이라는 폴더를 생성해줍니다.(이것은 할 수 있으시겠죠?ㅎㅎ) 파일을 만드는 이유는 앞으로 우리의 프로젝트 파일을 여기에 저장을 하기 위해서입니다. 파일까지 만드셨다면 이제 다음 사진을 보고 따라와 주세요

 

왼쪽 상단에 File을 누르시고 Open Folder를 클릭해줍니다. 그러면 다음과 같은 화면이 나타납니다.

 

아까 바탕화면에 만들어놓은 web 폴더 선택을 해주시면 됩니다. 그러면 다음과 같이 화면에 나타날 것입니다.

 

여기까지 따라오셨나요? 훌륭합니다. 그럼 다음 단계로 넘어가겠습니다. 다음은 파일을 생성해주겠습니다.

 

웹에 오른 마우스를 이용하여 New File을 클릭해주면 다음과 같은 화면이 나타날 것입니다. 

 

그중에서 저는 새로운 파일 이름을 1.html로 설정하겠습니다. 여기서 주의할 점이 있습니다. 한글의 확장자가. hwp 이듯이 프로그램에서의 확장자는. html입니다. 고로 1이 실질적인 이름이 되며. html은 확장자라고 보시면 되겠습니다. 즉. html은 고정적으로 들어가야 합니다. 여기까지 해주셨다면 Enter 키를 눌러주시면 됩니다. 

 

보시는 것과 같은 화면이 나타납니다. 그리고 바탕화면에 만들어 두었던 web 파일을 들어가면 1이라는 파일이 생성된 것 까지도 확인하실 수 있습니다. 자 그럼 이제부터 한번 가볍게 실습을 해보겠습니다. 여기까지 되신 분들은 다음과 같이 아톰 홈페이지를 들어가서 ctrl+o(알파벳)을 눌러주세요

 

그럼 다음과 같이 크롬 열기의 파일 창이 뜰 것이고 아까 만들어 놓았던 web 폴더의 1 파일을 더블 클릭해줍니다. 그러면 원래의 아톰의 홈페이지가 다음과 같이 뜰 것입니다.

 

보시는 것처럼 원래의 아톰 홈페이지가 흰 화면으로 바뀐 모습을 확인할 수 있습니다. 그렇다면 이제 아톰 에디터를 통해 입력을 하고 홈페이지에서 출력이 되는 과정을 가볍게 보여드리겠습니다. 

 

아톰에 hello web을 입력해준 후 홈페이지의 새로고침을 눌러주시면 다음과 같이 출력이 됩니다.

 

여기까지 잘 따라오신 분들은 너무나도 축하드립니다. 저도 오늘 처음 해보는 거지만 저같이 플알못도 쉽게 따라 할 수 있는 것을 보니 여러분들은 더 잘하실 거라 생각합니다. 이제부터 시간 날 때마다 열심히 프로그램 공부할 겁니다. 여러분들도 파이팅해요! 저는 지금 생활 코딩이라는 강의 홈페이지에서 강의를 보면서 공부하고 있습니다. 강의는 생활코딩이라는 홈페이지에서 무료로 동영상을 제공해주고 있습니다. 잘 활용해보세요~