선생님과 배워요 우리 지역 수업 찾기 설리번과 함께라면 나도 웹잘알
기관수업

설리번과 함께라면 나도 웹잘알

나만의 홈페이지를 만들어 보고 싶었던 적은 없었나요? ‘설리번이라면 나도 웹잘알!’ 에서 다이어리 사이트 제작을 통해 자신이 만들고 싶은 웹사이트를 만들어보아요!

카테고리
텍스트코딩 / 컴퓨터과학
수업준비사항
노트북 지참
수업장소
경기도 안양시 동안구 호계동 1039 G.SQURE, 롯데백화점 평촌점 롯데백화점 범계광장 범계큐브
접수기간
2018년 12월24일 (월) 00:00 ~ 2018년 12월29일 (토) 23:50
수업기간
2019년 01월07일 (월) 18:00 ~ 2019년 01월23일 (수) 21:00
모집인원
30명
수업 총 비용
무료
* 외부 사이트에서 수업 신청합니다.

수업 상세 내용

필수수업 내용

설리번과 함께라면 나도 웹잘알!

이 교육은 무슨 교육인가요?

  • 내웹마련 프로젝트

나만의 다이어리를 만들어가며, 우리 모두가 웹잘알이 되어갑니다! 본격 내웹마련 프로젝트!

  • 연필과 종이로 그리던 그림을 웹으로

스케치북에만 표현하던 당신의 상상력, 이제 웹에서 펼쳐보세요! 이제 웹은 단순히 웹서핑만 하는 곳이 아닙니다.

  • 반들반들 윤기나는 나의 웹사이트

네이버, 구글, 다음... 내가 사용하는 웹을 직접 만들어보아요! 다른 사이트를 사용하는 것 뿐만이 아닌 나의 사이트를 사용함으로써 나의 삶을 윤기지게 만들어봅시다!

수업 개요

  • 장소 : 경기도 안양시 동안구 시민대로 180 롯데백화점 범계광장 내 범계큐브
  • 시간 : 1월 7일부터 월, 수, 목 18~21시 (1월 7, 9, 10, 14, 16, 17, 21, 23일)
  • 대상 연령: 예비 중1 ~ 고3 (대상연령이 아니라면 우선순위가 밀릴 수 있습니다.)

진행 방식

  • 주제 : 나만의 다이어리 사이트 만들기를 목표로 탑을 쌓아가는 교육입니다.
  • 학생들의 참여를 이끌는 학생참여형 수업!
  • 간단한 복습과 함께 기본 개념도 충실하게!

수업의 목표

  • 자신이 다이어리 사이트를 직접 만들어 봄으로써, 웹에 대한 개념 습득과 더불어 성취감도 획득!
  • 스스로가 웹사이트 하나를 만들 정도의 개념 및 응용능력 확립!
필수수업 대상자/
수업 상세 설명

차시별 기획

1차시 : 안녕, HTML?

  • 마지막에 만들어보고 싶은 사이트를 구상해봅시다.

  • 인터넷, 웹이란? (컴포넌트 개념에 대한 이해)

  • HTML은 어떻게 구성되는지 알아봅시다.

  • 용어 정리의 시간(속성 태그 등등...)

  • 기본적인 텍스트 관련 태그와 head안에 들어가는 태그를 알아봅시다.

  • 자신이 만들고 싶은 사이트에 들어갈 내용을 직접 한a글과 워드에 쳐보고 꾸며본 글씨를 HTML로 표현해봅시다.

  • 첫 차시를 잘 따라오는 학생은 추가적인 head태그를 가르쳐볼 예정입니다.

2차시 : 내가 원하는 사진, 영상을 넣어볼까?

  • 실제 사이트에서 이미지와 영상이 적용되는 부분을 찾아본다.

  • 링크를 걸어주는 방법, 이미지를 넣는 방법, 영상을 넣는 방법을 알아봅시다.

  • 상대경로와 절대경로에 대하여 알아본다.

  • 자신이 저번에 만들었던 자신의 사이트에 넣고 싶은 영상과 이미지를 넣어봅시다.

  • 선생님들이 보여주는 페이지를 보고 따라서 만들어봅시다.

  • 두 번째 차시를 잘 따라오는 학생은 추가적으로 영상을 외부에서 가져오는 법과 추가적인 이미지에 입힐 수 있는 효과를 알려줄 예정입니다.

3차시 : HTML로 달력과 일기 리스트들은 어떻게 만들까?

  • 달력을 제작하기 위하여 적합한 태그들을 비교/분석해봅시다!

  • 순서가 존재하는 리스트와 순서가 없는 리스트의 차이를 알아봅시다.(실생활에 적용)

  • 표를 알아봅시다. 표가 현재 어디서 쓰이는지 알아본다.

  • 표를 만드는 법, 리스트를 만드는 법을 알아봅시다.

  • 자신의 페이지에 표와 리스트를 추가해봅시다.

  • 표를 응용하여 달력을 직접 만들어봅시다.

  • 선생님들이 준 페이지를 만들어봅시다.

  • 표와 리스트에서 쓰이는 CSS의 속성(table에서는 border, list에서는 list-style-type)을 정리하여 유인물을 제작한 후에 3차시에서 잘 따라오는 학생에게 먼저 나눠주고, 수업이 끝나기 전에 모든 학생에게 나눠줄 예정입니다. (CSS사용법과 CSS에 대해서 깊게 가르쳐 주지 않고 그냥 style = “”안에다 쓰면 된다는 것만 알려줄 것입니다.)

4차시 : 더 멋진 사이트!!

  • 현재 사용되는 사이트와 자신이 만들어가던 사이트를 비교해서 더 예쁘게 할 수 있다는 것을 깨우치게 합니다.

  • 어떻게 하면 예쁘게 할 수 있을까에 대해서 알아봅시다.

  • 색상코드와 박스모델에 대해서 알아봅시다.

  • 기본적인 css 속성을 배워보고 모든 태그에 style 속성을 추가해서 자신의 사이트를 예쁘게 만들어 봅시다.

  • 선생님들이 만들어본 사이트를 따라해봅시다.

  • 4시에 잘 따라오는 학생은 더 여러가지의 스타일 태그를 가르칠 생각입니다.

5차시 : 코드가 너무 복잡해요!

  • 중간 복습을 자신의 사이트를 보면서 해봅니다.

  • 코드가 보기 쉽지 않음을 깨닫도록 도와줍니다.

  • 겹치는 코드를 제거하기 위해서는 어떻게 할 지 생각해본다.

  • style을 head로 빼고. #과 .을 이용한 스타일 적용법을 알아보고, <div>와 <span>을 알아봅시다.

  • 네이버에서 요소보기를 통해서 왜 자신이 똑같이 복사한 코드는 왜 똑같이 안 나오고 못 생기게 나오는지 알아보도록 하여 외부로 css를 빼낼 수 있음을 인지시켜 줍니다.

  • css를 외부로 빼는 방법을 알려줍니다.

  • 상대경로와 절대경로를 다시 가르쳐줍니다.

  • 아래로만 가지 않고 옆으로도 화면을을 나타낼 수 있음을 알려줍니다.

  • 5차시를 잘 따라오는 학생은 스타일 뿐만 아니라, 다른 겹치는 코드도 간편화 하는 방법을 알려줄 예정입니다.

6차시 : 내 일기장은 어떻게 생겼을까?

  • Form태그와 textfield태그들을 이용하여 일기를 기록하는 공간을 만들어봅시다.
  • 내 일기장의 전반을 배웠던 CSS 속성들과 함께 꾸밉니다.
  • 오늘의 기분들을 담는 기능, 오늘 달성한 목표들을 체크하는 기능들을 만들기 위하여 checkbox input에 대해 이해합니다.
  • 네이버에는 있지만, 자신 사이트에는 안 들어간 버튼의 존재를 인지시킵니다.
  • 자신의 사이트에 필요한 것을 인지시켜줍니다.
  • 버튼을 눌렀을 때 효과를 js의 alert 기능을 통해 알려줍니다.(깊게는 말고 어떻게 쓰면 어떤 값이 나오는지)
  • 6차시를 잘 따라오는 학생은 form에 더 많은 태그들과 input 대해서 알려줄 예정입니다.

7차시 : 내가 쓴 글이 TXT파일로 저장된다고?

  • 수업 전 집에서 Bitnami를 통해 PHP를 위한 기본 프로그램들을 집에서 설치해옵시다!
  • 상대경로와 절대경로를 다시 가르쳐줍니다.
  • 깔아왔던 Bitnami를 통하여 Apache서버를 직접 열고 파일을 띄워봅시다. (서버에 대한 개념은 아직)
  • PHP를 통하여 파일을 직접 저장해봅시다.
  • 파일을 읽는 기능도 만들어 봅니다.
  • 내가 일기를 쓰는 페이지와, 일기를 읽는 페이지들 만들어 다이어리 사이트의 기능들을 모두 구현합니다! (기능에 대한 구체적은 설명은 하지 않고 이건 이런 기능을 한다.)
  • 남는 시간은 자신의 사이트의 계획서를 좀 더 구체화 시켜보고, 수정하기 시작합니다.
  • 7차시를 잘 따라오는 학생에게는 PHP에 대한 개념들을 더욱 구체적으로 가르쳐줍니다.

8차시 : 수고하셨어요!

  • 자신의 계획서를 바탕으로 마지막으로 자신의 사이트를 한시간 정도 수정합니다.
  • 자신들이 만들었던 사이트를 바탕으로 누구나 방문할 수 있는 사이트로 만들어봅시다!
  • 각자의 사이트를 서로에게 발표하는 시간을 가집니다.
  • 다 같이 맛있는 간식을 먹으며 마치는 시간을 가집니다.
필수주관/
강사 프로필

2015년 설리번 프로젝트 1기 시작, 22명의 선생님이 68명의 초중고생에게 코딩 교육

2016년 설리번교육연구소 준비위 구성, 경기도교육청 꿈의학교 선정

2016년 서울시-비영리IT지원센터 ‘디지털사회혁신랩’ 1기 선정 및 수료

2016년 12월 Microsoft-JA Korea-미담장학회-설리번 공동주관 ‘Hour of Code’행사 진행 100명 중학생 대상 코딩 교육 진행

2017년 1월 포스택 영재기업인교육원 코딩교육 세션 진행

설리번 프로젝트 2기 교육봉사 진행, 30여명의 선생님이 144명의 초중고생에게 11개의 커리큘럼 진행

2017년 5월 Microsoft-Ja Korea-설리번 ‘DigiGirlz’아두이노 세션 전담 진행 90명 여자 초중고생 대상, 청각장애인 학생 대상 코딩교육 ‘Re-Imagine Your World With Code’진행

2017년 11월 담넘어 개꿈클래스 코딩교육 전담 진행, 서울시 양천구내 600여명 중학생 대상 코딩 교육.

2018년 1월 설리번 프로젝트 2기 교육봉사 진행, 40명의 선생님이 대전을 포함한 서울, 인천, 안산, 수원 85명의 초중고생에게 코딩교육 진행.

2019년 1월 설리번 프로젝트 4기 교육 준비중, 60명의 선생님이 목포 지역을 포함한 12개 지역에서 200명 이상의 초중고생에게 코딩 교육 진행 예정

공지사항

* 교육생 선발은 수업시작 4-5일 전 무작위 추첨하여 선발 결과 안내드립니다.
* 수강신청 후 선발된 학생/학부모에게는 개인 연락처로 연락 드릴 예정입니다.

기타

* 노트북은 개별 지참해야 합니다.
* (앱개발 수업의 경우) 안드로이드 폰을 반드시 지참해야 합니다.

 

상세 내용이나 기타 문의사항은 https://sullivanproject.io 페이지에서 확인해주세요~

연관수업

등록된 연관수업이 없습니다.