실용적인 웹 프로그래밍

프로그래밍은 우리가 원하는 방향을 실현해주는 마법이에요. 주변의 웹 서비스의 문제를 해결하며 웹 프로그래밍을 경험해봅니다.

도움이 되는 분들

누가 강의를 들으면 도움 될까요?

• 가볍게 프로그래밍을 시작해보고 싶은 분
• 자신만의 소프트웨어를 만들어 보는 계기를 찾고 싶은 분

어떤 분에게 강의를 강력히 추천할까요?

• 프로그래밍 언어나 문법은 알겠지만 어떻게 활용할지 고민하는 분
• 소프트웨어 프로젝트를 처음부터 기획하는 것에 부담스러운 분

이런 걸 배울 수 있어요

• 마크업 문서에 대한 이해, HTML 기초 개념
• CSS 기초 개념
• DOM 의 기본 개념과 간단한 사용법
• 웹 페이지의 폼과 버튼 입력을 자동화하기
• 우리 주변의 웹 서비스의 레이아웃을 프로그래밍으로 바꿔보기

이런 내용은 자세히 다루지 않아요

• 우리 주변의 웹 서비스를 따라 만드는 방법
• ES6(ECMAScript 2015) 이후의 문법에 대한 내용
• 타인에게 피해를 주는 악성 스크립트 작성법

설리번 교육 구성원 목록

• 선생님 : 김정인, 김무훈, 이지안, 박세문, 양아름
• 운영진 : 이주연, 권나현

교육 일정

• 7월 26일까지 교육 자료 작성 마치기
• 이후부터 가능한 빠르게 강의 녹화와 편집을 한다.
• 비공개 모집으로 베타 테스트, 이후 공개 (마감 기한 8월 23일을 고려하면 늦어도 8월 10일 이전까지 CBT 피드백이 끝나야 한다)
• 4개의 차시로 구성 - 부분 차시의 수업 시간은 5~7분 내외

차시별 계획

0. 준비

1. 오리엔테이션

1. 설리번 프로젝트, 선생님 소개하기
2. 교육 소개하기
3. 실용적인 프로그래밍 예시
4. 앞으로의 계획
5. 마무리

1. 웹의 배경에 대해

기술적으로 웹의 이해를 돕는다.

HTML과 CSS 소개

HTML 소개

마크업 언어의 개념 소개, 요소, 문법(중첩, 블록, 인라인), 속성, 문서 구성

CSS 소개

CSS의 기본 문법 (선택자와 선언부의 구별)

CSS 선택자

비유를 통해 선택자의 종류를 구별함(태그는 선택 가능한 규칙, ID는 학생 한명, 클래스는 교실 구성원 전체),

종류별로 기술 방법, 심화된 선택자 사용법(조상-자손, 부모-자식, 여러 개 선택)

자주 사용하는 포털 서비스의 배경사진 넣어보기

1. 예시로 몇가지 웹 확장을 소개하기 (광고 차단 웹 확장, 다크 모드)
2. 자주 사용하는 포털 서비스의 배경사진 넣어보기

자바스크립트와 DOM

자바스크립트 소개, DOM API를 알아보자

자바스크립트로 웹 서비스를 다뤄보기

웹 서비스를 손이 아닌 프로그래밍으로 대신 다뤄보자

• 유저스크립트 소개
• 자동화 작업 수행하기

자바스크립트로 웹 페이지의 구조 바꿔보기

웹 페이지의 구조를 프로그래밍으로 변형해보자

• 뉴스 기사의 본문만 추출해서 구조를 재구성해보자
• 유저스크립트로 프로토타입 제작, 웹 확장으로 배포하기

3. 윤리적 사용

프로그래밍의 도덕적인 활용에 대해 고민하는 차시입니다.

4. 마무리

여태까지 배운 내용을 정리하는 차시입니다.