HTML로 만드는 홈페이지, 누구든 쉽고 빠르고 간단하게 - 2(개발환경구축,atom)

안녕하세요 인포돈 입니다.

 

이전 단계에서 목표와 계획을 설정했죠

 

그러면 이제 바로 HTML 학습을 시작해보겠습니다~

HTML로 만드는 홈페이지, 누구든 쉽고 빠르고 간단하게 - 2(기본 다지기) 

 

모든 분들이 코딩을 배우시는 학생일 수도 있으며, 배우지 않으시는 일반적인 분들일 수도 있습니다. 그러나 지금 이 순간부터는 남의 문제를 해결하는 마인드보다는 나의 문제를 코딩으로 해결하려는 엔지니어의 마인드가 되어야 합니다!

 

10일 동안 엔지니어가 돼보면서 거대한 탐험을 시작해 보겠습니다.

 

엔지니어는 기본적으로 작은 문제대 최대한 과장하고 크게 보아야 합니다!

 

자! 이제 제가 1일 차에 배운 코딩에 대해 학습해 보도록 해요

 

---

개발 환경

 

무언가를 개발 하기 위해서는 개발에 필요한 환경이 필요합니다.

 

벌써 우리들의 컴퓨터에는 굉장히 훌륭한 개발환경이 설치되어있습니다.

 

바로 메모장이죠 다른 Linux, Unix에는 메모장과 비슷한 vi editor와 같은 프로그램이 기본적으로 깔려있죠.

 

여러분들은 이미 훌륭한 개발 환경이 설치되어있죠!

그러나 메모장의 용도는 코딩보다는 메모에 중점이 있기 때문에 엔지니어에게는 어울리지 않는 개발 환경이죠

 

그래서 저희가 이번 프로젝트에서 사용할 개발 환경은 바로 Atom이라는 개발 환경입니다.

 

간단한 다운을 통해 바로 개발 환경을 구축할 수 있습니다~

 

https://atom.io/atom.io/

해당 링크에 들어가서 아래 그림의 Download를 해서 다운을 받으시면 됩니다!

(해당 개발환경 다운이 힘드신 경우 댓글을 다시면 상세히 알려드리겠습니다)

 

다운로드 중간중간에 나오는 창들은 건드리시지 않고 next를 눌러 다운해 주시면 됩니다.

 

해당 다운을 끝내면 이제 바탕화면에 아래와 같은 아이콘이 생성이 될 겁니다.

 

해당 아이콘을 클릭하여 들어가면 이제 저희의 개발 환경 구축이 벌써 끝!

 

atom을 들어오게 되면, 다음과 같은 창이 뜨는데 모든 창을 지워주세요

(해당 빨간 동그라미에 x 표시가 있습니다)

 

해당 개발환경을 구축했다면 다음에 할 일은 바로 폴더를 생성하는 것입니다.

 

바탕화면에 web이라는 폴더를 생성해주세요 (이름은 자신이 원하는 이름을 설정하시면 됩니다)

 

그런 후 atom에 들어가 메뉴 -> File -> Add project folder를 선택한 후 생성한 web폴더를 선택해주세요

 

 

그 후 파일에 오른쪽 마우스 -> New File을 누르시면 파일 생성이 가능합니다. 파일 이름은 1.html이라고 설정해 주시면 됩니다.

 

 

이때. html을 우리가 보통 한글파일을 만드면. hwp PDF 파일은. pdf가 붙은 거와 같이 확장자입니다.

 

이제 우리가 만든 1.html 파일에 hello web이라서 작성한 뒤 각자 사용하는 브라우저를 열어봅시다.

 

 

브라우저에 들어간 뒤  Ctrl + O(알파벳)을 누르시면 파일을 선택하는 브라우저가 나올 겁니다.

 

 

 

 

이때 저희가 생성했단 1.html 파일을 선택하고 open을 누르시면 됩니다.

 

 

짜잔 그러면 저희가 작성했던 hello web이 브라우저에 뜨게 됩니다.

 

자, 지금까지 저희가 사용했던 많은 웹들은 이런 식으로 저희에게 보이게 되는 겁니다!!

 

신기하지 않으신가요? 이제까지 저희는 웹 소비자였다면, 지금부터는 웹 생산자 즉, 엔지니어가 되는 첫발을 내디딘 것입니다.

 

다음 단계는 더 흥미로운 html을 체험시켜 드리겠습니다.