WEB1 - HTML & Internet - Day 2

WEB1-5. HTML 코딩 실습 환경 준비

1. ATOM Editor

ATOM 에디터는 Github에서 개발한 문서 및 소스코드 편집기입니다.

주요 특장점은 무료로 사용할 수 있다는 점과 플러그인을 통한 확장성입니다.

 

링크: https://atom.io/ 

A hackable text editor for the 21st Century

ATOM 메인 페이지

ATOM 메인 페이지화면에서 확인할 수 있는 재미있는 점은 가운데 ATOM(원자) 모양과 함께 Github의 마스코트가 우주비행선 복장으로 인사를 하고 있는 부분입니다.

 

저는 업무 환경에서 사용하고 있던 Visual Studio Code를 활용하도록 하겠습니다.

(강의에서 안내해주신 것처럼 실습자에게 익숙한 에디터라면 무엇이든 사용 가능합니다)

 

2. Visual Studio Code

링크: https://code.visualstudio.com/

 

Visual Studio Code는 마이크로소프트에서 오픈소스로 개발하고 있는 소스 코드 에디터입니다.

주요 특장점으로는 메이저 OS(운영체제)를 지원하며, 무료로 사용할 수 있습니다.

 

Visual Studio Code 메인 페이지

 

3. HOL (Hands-on-labs)

1. 바탕화면에 앞으로의 실습을 진행할 폴더를 생성합니다.

새 폴더 생성

 

2. 생성한 폴더의 이름을 web으로 변경해줍니다.

 

3. Visual Studio Code를 실행 후, 상단의 파일 탭을 확장하여 폴더 열기를 선택합니다. 

   이전 단계에서 생성한 web 폴더를 선택합니다.

 

4. 생성한 web 폴더에서 작업할 준비가 되었습니다.

 

5. 아래의 이미지처럼 새 파일 아이콘을 클릭하여 파일을 생성합니다.

 

6. 파일의 제목은 1.html로 생성 후 저장합니다. (저장 단축키는 Ctrl+S 입니다)

 

7. 생성한 1.html 파일을 웹 브라우저에서 확인하는 과정을 진행합니다.

   실습자에게 익숙한 웹 브라우저를 사용하도록 합니다. 저는 크롬의 시크릿 모드에서 진행하도록 하겠습니다.

 

8. 웹 브라우저를 실행 후, Ctrl+O(알파벳) 단축키를 사용하여 파일을 열 수 있습니다.

   1.html 파일을 선택하고 열기 버튼을 클릭합니다.

 

9. 성공적으로 1.html 파일이 웹 브라우저에 열렸습니다. 

   파일의 경로(~/Desktop/web/1.html) 확인도 가능합니다.

   아직은 1.html 파일에 작성한 내용이 없어 빈 화면이 보여집니다.

   다음 단계에서 편집을 진행하도록 합니다.

빈 화면이 표시되어도 당황하지마세요!

 

10. 1.html 파일에 Hello World 를 입력 후, 저장합니다.

 

11. 웹 브라우저에서 새로고침 버튼을 클릭하면, 수정된 내용을 확인할 수 있습니다.

시작은 Hello World!

 

수고하셨습니다!!