1일차 : 수업소개부터 실습환경 준비까지

1일차 : 수업소개부터 실습환경 준비까지

 

직장동료들에게 컴퓨터 언어 강의를 하게 된 것이 생활 코딩 수업의 시작이라고 하네요.

마침 유튜브가 생기면서 시간적/공간적/비용적 제약없이 강의를 공유할 수 있었다고 합니다.

(덕분에 저도 집에서 편하게 강의를 듣고 있습니다!)

 

하지만 수업의 선후관계라던가 예제 코드, 첨부 링크, 보충 설명 등을 동영상들 만으로 정리하는 것이 어려웠죠.

이러한 문제점들을 해결하기 위해서 웹사이트 기획을 시작했다고 합니다.

 

▶ 기획 : 무언가를 만들기 전에 무엇을 만들 것인가를 미리 상상하고, 계획해보는 과정

 

이런 기획으로 탄생하게 된 것이 바로 생활코딩 웹사이트입니다.

저도 이 수업들을 다 듣고 나면 이런 웹사이트를 만들 수 있겠죠?

 

기획을 했으면 구현을 해야합니다. 구현을 하기 위해서는 코딩을 해야겠죠.

 

◆ 사람이 하는 일 → 코딩 → 기계가 하는 결과

 

사람이 하는 일 : 코드(부호/신호), 소스(원천), 언어(컴퓨터 언어)

기계가 하는 일 : 애플리케이션, 앱, 응용 프로그램, 웹페이지, 웹사이트, 웹앱

코딩 : 코드를 통해서 결과를 만든다.

 

코드의 종류 : C, C++, Java, JavaScript, Python, PHP, SQL 등등

 

◆ 웹페이지를 만드는 코드 : HTML

 

HTML이 중요한 이유 : 1. 쉽다 2. 많이 쓰인다

 

또한 웹은 퍼블릭 도메인 즉 저작권이 없습니다.

 

자 그럼 코딩을 시작하기 위해 에디터를 준비해 봅시다.

 

운영체제 기본 에디터들은 다음과 같습니다.

- 윈도 : 메모장

- 맥 : 텍스트 편집기

- 리눅스 : gedit, nano, vim

 

에디터마다 사용법이 다른데 생활코딩에서는 Atom을 채택했네요.

 

A hackable text editor for the 21st Century

 

여기서 다운받을 수 있습니다.

 

에디터를 다운 받으면, 실습 파일을 저장할 폴더를 미리 만들어 주세요. (바탕화면에 WEB이라는 폴더를 만듭시다)

 

그리고 에디터에 폴더를 추가한 후 (Menu-File-Add project folder), "1.html" 이라는 파일을 하나 만들어 봅시다.

 

 

html 확장자를 가진 파일이 하나 생성되었죠?

이걸 열면 빈화면의 웹페이지가 나옵니다.

 

자 그리고 나서 에디터에 문구를 입력하고 저장을 하면!

쨔잔!! 웹 페이지에 그대로 문구가 나옵니다.

 

신기하네요..ㅎㅎ 저만의 페이지! 곧 만들 수 있을 것 같습니다!

 

 

 

 

아 그리고 이런 과정이 어려운 분들을 위해 동영상으로도 친절하게 설명을 해줍니다. 참고하세요!