실습 환경 준비

이제 코딩을 하기 위해서는 에디터(Editor)라는 프로그램이 필요하다.

 

각 운영체제에는 윈도(메모장), 맥(텍스트 편집기), 리눅스(gedit) 등 이미 에디터가 준비 되어 있지만 각 사용법이 다르기 때문에 github에서 만든 Atom(아톰)으로 통일한다.

 

아래 주소에서 프로그램을 다운로드해서 설치한다.

https://atom.io/

A hackable text editor for the 21st Century

atom site

설치한 후 아톰을 실행하면 다음과 같은 창이 뜬다.

atom 초기 실행 화면

위의 화면에서 1번에 해당하는 부가적인 창들은 다 꺼준다.

그리고 2번 Add folders 버튼을 눌러 실습 파일을 저장할 폴더를 아톰 왼쪽에 표시되게 해야하는데, 아직 폴더를 만들지 않았으므로 먼저 윈도우 탐색기를 이용해 바탕화면에 프로젝트 폴더를 생성한다.

바탕화면 폴더 생성

위와 같이 바탕화면에 '웹 만들기'라는 프로젝트 폴더를 생성하였다.

 

다음으로 Add folder 버튼을 눌러 생성한 프로젝트 폴더를 아톰에서 선택한다.

프로젝트 폴더 선택

이제 '웹 만들기' 폴더에 1.html 파일을 생성한다.

파일 생성 버튼

왼쪽의 웹 만들기 폴더를 우클릭하여 새로운 파일 만들기를 선택한다.

파일 이름 입력

파일 이름인 1.html을 입력하고 엔터를 누르면 다음과 같이 파일이 생성된다.

1.html 파일 화면

방금 생성한 파일 이름을 보면 확장자가 html인 것을 알 수 있다.

MS워드의 확장자는 doc, PDF는 pdf인거와 같이 웹 브라우저에서 볼 수 있는 웹 페이지의 확장자는 html이다.

 

다음으로 1.html을 웹 브라우저를 열어보자.

웹 브라우저에서 아래와 같은 단축키를 누르면 파일 선택 화면이 나온다.

• 윈도우 : Ctrl + O(알파벳)
• 맥 : Cmd + O(알파벳)

폴더 선택

파일 선택

웹 페이지

현재 1.html 파일에 작성한 내용이 없어 빈 화면이 나온다.

 

이제 화면에 무엇인가를 표시하기 위해 편집화면에 hello web이라고 입력하고 저장한다. (윈도우 : Ctrl + S, 맥 : Cmd + S)

html 파일에 내용 입력

그리고 웹 브라우저를 새로고침하면 다음과 같이 hello web이 출력된다.

참고:

https://opentutorials.org/course/3084/18448

HTML 코딩 실습 환경 준비 - 생활코딩

https://atom.io/

A hackable text editor for the 21st Century