HTML코딩과 실습환경 준비

우리가 웹페이지를 만들기 위해서는 HTML이라는 언어를 이용해야 한다.

이를 위해 준비해야 할 것이 2가지가 있다.

1. 웹브라우저 2. HTML(컴퓨터 언어)

 

이 HTML을 작성할 수 있는 프로그램이 필요한데 이것을 에디터라고 부른다.

윈도우에서는 메모장, 맥에서는 텍스트 에디트 라는 프로그램이 있다.

각각의 에디터가 코드를 작성하는 용도의 프로그램이 아니기 때문에

코드를 작성하는데 최적화 되어있는 전문적인 도구를 사용할 것이다.

바로 ATOM이라는 프로그램이다. 이 프로그램은 현 동영상의 시점인 2017에서는 쓸만하지만

추후에는 더 좋은 프로그램이 나올 수 있다.

따라서 그런 프로그램을 찾기 위한 키워드로는 

"Best HTML Editor 2019" 이다.

 

https://atom.io/

A hackable text editor for the 21st Century

자신의 컴퓨터 운영체제에 맞는 버전을 다운로드한다.

이 프로그램을 통해 코드를 짜고 웹브라우저를 통해 결과를 확인할 것이다.

바탕화면에 Web이라는 Directory를 만들자.

그리고 Open Folder를 해서 방금 만든 Directory를 선택한다.

선택을 하고 나면 이렇게 창이 두개로 나눠지게 되는데

왼쪽은 방금 만든 Directory를 관리하는 창이다. 오른쪽은 선택한 파일의 코드를 작성하는 곳이다.

왼쪽 창에서 오른쪽 클릭을 통해 New File을 1.html이라는 이름으로 만든다.

그러면 이런식으로 새로운 파일이 생성되게 된다.

해당 디렉토리로 들어가게 되면 생성한 파일이 보인다.

다음으로는 생성한 파일을 웹브라우저를 통해서 접근을 해보자.

웹브라우저를 연 다음에 윈도우를 쓰면 ctrl + alphabet(한/영 키) + o 키를 누르면 된다.

이렇게 선택을 하게 되면 웹브라우저에 이 파일이 열리게 된다.

Atom프로그램을 돌아가서 1.html 에 hello web이라는 코드를 작성하고

저장을 해본 다음에 열었던 페이지를 새로고침하면 hello web이 보이게 된다.

웹브라우저를 만들고 실행하는데 성공을 하게 된다.