생활코딩 동영상, 예제 링크 모음

1수업소개 4
- 학습목표HTML 수업의 목표를 이해한다.
- 동영상https://youtu.be/tZooW6PritE (02분 25초)
2프로젝트의 동기 5
- 학습목표HTML 수업을 만들어진 계기를 이해한다.
- 동영상https://youtu.be/Z7uBInm1PJY (05분 15초)
3기획 7
- 학습목표HTML 수업에서 만들게 될 예제를 간략하게 기획하고 밑그림을 그린다.
- 동영상https://youtu.be/QwCdCcsPVTQ (02분 25초)
4코딩과 HTML 8
- 학습목표코딩이란 무엇인지 이해하고 코딩을 둘러싼 다양한 배경과 개념, 환경을 이해한다.
- 동영상https://youtu.be/MLXlXCwA0T4 (05분 38초)
5HTML 코딩과 실습 환경 준비 11
- 학습목표HTML 코딩 실습을 위한 환경을 소개하고 각자의 환경에 실습 환경을 구축한다.
- 동영상https://youtu.be/iRZJHhjh8DU (10분 11초)
6기본 문법과 태그 20
- 학습목표웹 페이지를 구성하는 기본적인 요소와 문법을 이해한다.
- 동영상https://youtu.be/9GkFI1ovBbU (09분 17초)
- 예제【1-6-1】 1.html 파일 생성 후 텍스트 입력
- 【1-6-2】 <strong> 태그로 굵게 강조
- 【1-6-3】 <u> 태그로 밑줄 긋기
7혁명적인 변화 25
- 학습목표태그 학습이 가진 의의 및 HTML 학습이 가져다 줄 변화를 이해한다.
- 동영상https://youtu.be/QoQsaUWx3EU (12분 15초)
- 예제【1-7-1】 <h1>~<h6> 태그
- 【1-7-2】 제목 만들기
- 【1-7-3】 <h1> 태그를 이용해 제목 만들기
8통계에 기반한 학습 33
- 학습목표통계를 토대로 가장 자주 사용되는 태그부터 배워 이를 응용하는 학습 방법을 이해한다.
- 동영상https://youtu.be/IJR-pSLGuZM (07분 05초)
9줄바꿈: <br> vs. <p> 37
- 학습목표HTML 코딩에서 가장 자주 사용되는 줄바꿈용 태그를 배우고 두 태그의 차이점을 이해한다.
- 동영상https://youtu.be/SXtp7w7kdDc (07분 34초)
- 예제【1-9-1】 보충 설명 추가
- 【1-9-2】 새로운 줄을 표현하는 <br> 태그
- 【1-9-3】 <br> 태그 두 개 사용
- 【1-9-4】 <br> 태그 세 개 사용
- 【1-9-5】 <p> 태그로 단락 만들기
- 【1-9-6】 CSS를 이용해 단락 위에 여백 추가
10HTML이 중요한 이유 45
- 학습목표HTML 태그를 정확히 알고 의미에 맞게 사용하는 것의 의의를 이해한다.
- 동영상https://youtu.be/MgZRbCaF_rY (09분 38초)
11최후의 문법 속성과 <img> 태그 51
- 학습목표HTML의 문법 가운데 속성을 배우고 img 태그의 사용법을 이해한다.
- 동영상https://youtu.be/RhE-RHdi-NY (05분 58초)
- 예제【1-11-1】 <img> 태그
- 【1-11-2】 <img> 태그에 src 속성 추가
- 【1-11-3】 <img> 태그에 src 속성 설정
- 【1-11-4】 <img> 태그에 witdh 속성 설정
12부모 자식과 목록 58
- 학습목표서로 포함 관계에 있는 태그를 비롯해 여러 종류의 목록을 만들기 위한 태그를 배운다.
- 동영상https://youtu.be/aUtnyev_1vg (10분 07초)
- 예제【1-12-1】 목차 만들기
- 【1-12-2】 목차에 숫자와 <br> 태그 추가
- 【1-12-3】 <li> 태그를 이용해 목차 만들기
- 【1-12-4】 수업 참가자 닉네임 목록 추가
- 【1-12-5】 <li> 태그의 부모 태그인 <ul> 태그 추가
- 【1-12-6】 <ul> 태그를 <ol> 태그로 변경
13문서의 구조와 슈퍼스타들 67
- 학습목표HTML 문서의 구조를 만드는 다양한 종류의 태그를 배운다.
- 동영상https://youtu.be/sVt5nyz3Gdo (09분 07초)
- 예제【1-13-1】 <title> 태그를 이용해 제목 설정
- 【1-13-2】 HTML이란 무엇인가로 제목 변경
- 【1-13-3】 <meta> 태그 추가
- 【1-13-4】 <head>, <body> 태그
- 【1-13-5】 <html> 태그
- 【1-13-6】 DOCTYPE
14HTML 태그의 제왕 77
- 학습목표HTML 태그 가운데 가장 중요하다고 할 수 있는 앵커 태그를 소개하고 사용법을 익힌다.
- 동영상https://youtu.be/V3pkC1hE-as (08분 41초)
- 예제【1-14-1】 <a> 태그를 이용해 링크 만들기
- 【1-14-2】 <a> 태그에 href 속성 추가
- 【1-14-3】 <a> 태그에 target 속성 추가
- 【1-14-4】 <a> 태그에 title 속성 추가
15웹 사이트 완성 84
- 학습목표HTML 수업의 예제를 일차적으로 마무리하고 완성함으로써 웹 페이지를 제작하는 전체적인 과정을 이해한다.
- 동영상https://youtu.be/w5S0GACgL3U (08분 35초)
- 예제【1-15-1】 <h1> 태그를 이용해 상단 만들기
- 【1-15-2】 HTML이란 무엇인가?를 <h1> 태그에서 <h2>로 강등
- 【1-15-3】 목록에 링크 추가하기
- 【1-15-4】 CSS에 관한 내용이 있는 2.html 파일 수정
- 【1-15-5】 2.html 파일의 title 수정
- 【1-15-6】 Javascript에 관한 내용이 있는 3.html 파일 수정
- 【1-15-7】 WEB에 관한 내용이 있는 index.html 파일 수정
16원시 웹 96
- 학습목표인터넷과 웹의 탄생 과정을 배우고 최초로 만들어진 웹 페이지의 모습을 확인한다.
- 동영상https://youtu.be/pYOEy_mAMpI (14분 16초)
17인터넷을 여는 열쇠: 서버와 클라이언트 105
- 학습목표인터넷이 동작하는 기본 원리인 서버와 클라이언트의 개념과 원리를 이해한다.
- 동영상https://youtu.be/yBPyzaccbkc (09분 25초)
18웹 호스팅: 깃허브 페이지 110
- 학습목표깃허브 페이지를 이용해 무료로 간단한 웹 호스팅 서비스를 사용하는 법을 익힌다.
- 동영상https://youtu.be/n1wvs7xuUYk (13분 01초)
19웹 서버 운영하기 122
- 학습목표윈도우, macOS, 리눅스 운영체제에서 직접 아파치 웹 서버를 설치하고 운영하는 방법을 익힌다.
- 동영상https://youtu.be/ThlyDSM0FNU (03분 27초)
19.1.1웹 호스팅: 웹 서버 설치(윈도우) 124
- 동영상https://youtu.be/Bvzzee7-kuQ (06분 34초)
19.1.2웹 호스팅: 웹 서버와 HTTP(윈도우) 135
- 동영상https://youtu.be/had7IqJHEKM (08분 59초)
19.1.3웹 서버와 웹 브라우저의 통신(윈도우) 142
- 동영상https://youtu.be/gde0uNwMSa4 (06분 43초)
19.2.1웹 서버 설치(macOS) 147
- 동영상https://youtu.be/roETNgQf3x8 (06분 33초)
19.2.2웹 서버와 HTTP(macOS) 156
- 동영상https://youtu.be/fSXQh4ypskU (11분 23초)
19.2.3웹 브라우저와 웹 서버의 통신(macOS) 165
- 동영상https://youtu.be/1i9_plf2g7A (08분 11초)
19.3웹 브라우저와 웹 서버의 통신(리눅스) 170
- 동영상https://youtu.be/hMsvyzb2EE0 (12분 41초)
20수업을 마치며 1/3 177
- 학습목표지금까지 진행한 HTML 수업을 정리하고 HTML 수업의 의의를 되 새긴다.
- 동영상https://youtu.be/bTSDDyuMuUo (05분 15초)
21수업을 마치며 2/3 177
- 동영상https://youtu.be/JUNFoER12kk (10분 17초)
22수업을 마치며 3/3 177
- 동영상https://youtu.be/_PQgtWSP-uI (04분 55초)