[2장_] HTML을 배우기 전에 할 일

HTML을 배우기 전에 해야 할 일

본격적으로 HTML을 배워보기 전에 앞서 우리가 설치 해줘야 할 프로그램이 있습니다.
'HTML 에디터'라는 프로그램인데요.
앞으로 HTML을 배우는 데 사용하게 될 도구라고 할 수 있겠습니다.

HTML 에디터 설치하기

우리는 GitHub에서 개발하고 무료로 배포하고 있는 'Atom 에디터'를 사용해볼 건데요.

HTML 편집기능을 제공하는 IDE(통합 개발 환경)은 여러 종류가 있으니,
본인이 선호하는 HTML 에디터가 있다면 기호에 맞는 에디터를 사용하셔도 무방합니다.

아톰 에디터를 설치하는 방법은 '아톰 에디터(Atom Editor) 설치하기'를 클릭해보세요.

Atom 에디터 세팅하기

에디터 설치를 마치셨나요? 그렇다면 이제 작업을 할 수 있도록 세팅을 해보겠습니다.
먼저, 우리가 '프로젝트(작업)를 진행할 폴더'를 생성해야 합니다.
아래 사진들을 따라 순서대로 따라와 주세요. ㅎㅎ

1. 원하는 위치에 원하는 이름으로 프로젝트 폴더를 생성해 주시면 됩니다.



저는 바탕화면 경로에 Web이라는 폴더를 생성해 주었습니다.





폴더를 생성하셨다면 에디터로 돌아와 줍니다.



2. File 카테고리의 Open Folder(폴더 열기)를 클릭해주세요.




위 사진처럼 선택해주시면 됩니다.



3. 프로젝트 폴더의 위치를 찾아서 '폴더 선택' 버튼을 눌러주세요.




'프로젝트를 진행할 폴더'를 선택해 주는 과정입니다.



4. 작업폴더를 오른 클릭 후 New File을 클릭해줍니다.




위처럼 '작업을 할 수 있는 파일'을 만들어 줍니다.


5. '원하는 파일명.html' 형식으로 작성 후 엔터를 눌러주시면 준비는 끝납니다.








저는 index.html이라는 파일명을 사용하겠습니다.

HTML로 만든 첫 페이지

파일생성까지 성공적으로 끝마쳤다면, 이제 HTML 파일로 웹페이지를 만들어 볼 건데요.

이제 원하는 내용을 html 파일에 적어주시면 웹페에지에 반영시킬 수 있습니다.
자신이 웹페이지에 출력하고 싶은 문구를 적어볼까요? ㅎㅎ

저는 "Hello, Web!"이라고 적어볼게요.

원하는 텍스트를 적었다면, 저장해보겠습니다.
단축키 'Ctrl + S' 또는 File 카테고리의 'Save' 항목을 누르셔도 됩니다.

웹브라우저로 우리가 작성한 html 파일을 여는 방법은 2가지가 있습니다.

하나는, 작업 폴더에 있는 우리가 생성한 파일을 더블클릭해서 열어주는 방법입니다.

두 번째는, html 파일이 있는 경로를 복사한 후,
웹브라우저의 주소창에 "프로젝트 폴더의 경로/파일명.html"을 써주는 방법입니다.

어떤가요 위 사진처럼 적어준 문장이 뜨시나요? ㅎㅎ
(아무것도 안 뜬다면 에디터에서 저장을 했는지 확인해보세요.)

HTML을 배우는 첫 발걸음을 내딛으신 것을 축하합니다! ㅎㅎ
다음 장에서는 HTML 태그에 대해서 배워보겠습니다.

피드백은 언제나 환영합니다.
감사합니다.

kwiskey