생활코딩 코딩야학 7기 - 1일차

1. 수업 소개 : https://opentutorials.org/course/3084

WEB1 - HTML & Internet - 생활코딩

본 수업은 코딩, 웹, 인터넷, 컴퓨터라는 주제로 수업을 시작합니다.

 

준비물은 상상력. 학생이 아닌 문제를 코딩으로 해결하려는 엔지니어라고 상상해야 합니다.

2. 프로젝트의 동기 : https://opentutorials.org/course/3084/18438

프로젝트의 동기 - 생활코딩

강사분의 과거 얘기를 통해 왜 이런 프로젝트를 시작하게 됐는지 설명해줍니다.

3. 기획 : https://opentutorials.org/course/3084/18437

기획 - 생활코딩

"만들기 전에는 상상하고 계획하고 구체화하는 과정이 필요합니다"

4. 코딩과 HTML : https://opentutorials.org/course/3084/18445

코딩과 HTML - 생활코딩

어느 쪽이 사람이 하는 일이고 어느 쪽이 기계가 하는 일인지 분리해서 생각해봐야 합니다. 어떤 것이 원인이고 결과인지 추론해 보는 것을 이해하는 것이 가장 중요한 부분입니다.

 

사람이 하는 일, 원인을 부르는 여러 가지 표현 = Code, Source, Language

기계가 하는 일, 결과를 부르는 여러가지 표현 = Application, App, Program...

 

원인을 통해 결과를 만드는 것이 코딩을 이해하는 핵심입니다.

 

HTML(HyperText Markup Language)의 좋은 점

1. 쉽다

2. 중요하다

Public Domain : 어떠한 저작권도 존재하지 않는 완전한 자유. 

5. HTML 코딩 실습 환경 준비 : https://opentutorials.org/course/3084/18448

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

준비물

1. 웹 브라우저

2. 코드를 작성하는 프로그램(Editor)

수업에서 사용하려는 Editor는 Atom입니다.

 

다른 에디터를 검색하고 싶을 땐 HTML Editor, 혹은 best HTML Editor 2020(year)을 검색하면 됩니다.

 

Atom을 다운로드하기 위해서 https://atom.io 에 접속합니다.

A hackable text editor for the 21st Century

Atom.io

Atom 실행 화면

Atom - 아톰 URI 핸들러 프로토콜 설정 / "Register as default atom:// URI handler" - https://gocoder.tistory.com/1328

Atom - 아톰 URI 핸들러 프로토콜 설정 / "Register as default atom:// URI handler"

먼저 Web이라는 Directory를 생성합니다. 그다음에 File > Open Folder을 클릭 후 만든 Directory를 선택합니다.

Web 추가

다음으로 Web에서 우클릭을 하여 새 파일을 만들어 줍니다.

1.html 생성

그 후 chrome에서 Ctrl + O를 누르면 열기가 생성되는데 여기서 만들어준 1.html을 선택합니다. 지금은 아무것도 없는 빈 화면입니다.

1.html 열기

이제 Editor에서 hello web이라고 입력 후 Ctrl + S로 저장해줍니다.

1.html에서 새로고침을 눌러주면 hello web이 추가된 것을 볼 수 있습니다.