Thumbnail
BEST 개발 · 프로그래밍 웹 개발
실용적인 웹 프로그래밍
(4.3)
10개의 수강평 ∙ 488명의 수강생

무료

지식공유자 : 설리번 프로젝트
총 20개 수업˙총 1시간 35분
평생 무제한 수강
수료증 미발급 강의
입문 대상 초급 중급이상
내 목록 추가 공유
입문자를 위해 준비한
[웹 개발] 강의입니다.

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

✍️
이런 걸
배워요!
우리 주변 웹 서비스의 스타일을 직접 바꿔보기
웹 페이지의 폼과 버튼 입력을 자동화하기
마크업 문서에 대한 이해와 HTML 기본 개념
웹 페이지 스타일을 CSS로 표현하는 법

가볍고 재미있게 시작하는 웹 프로그래밍!
직접 코드를 만져보면서 꼭 필요한 지식을 배워보세요.

강의 특징 💡

프로그래밍에 능숙하지 않은 사람을 강의 대상자로 삼아 최소한으로 필요한 지식을 알려드립니다. 기본적인 언어 소개나, 간단한 설명을 한 후에 중간마다 실습을 진행하면서 학습자의 이해도를 높이고자 했습니다. 심화적인 부분은 다루지 않으니 참고 자료 추천을 통해 자기주도적인 학습을 권장드립니다.

왜 배워야 하는지 ✒️

우리 주변의 웹 서비스에서 접하는 입력 필드, 버튼, 체크박스 등 웹 페이지의 요소를 프로그래밍으로 접근합니다. 웹 서비스 불편함을 느꼈던 부분을 직접 코드로 수정해보고, 비슷한 경험을 하는 사람들과 공유할 수 있습니다.

자세히 다루지 않은 것들 ❌

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

섹션별 소개 📖

오리엔테이션

교육 소개, 웹의 배경에 대해

웹 서비스의 스타일을 바꿔보기

HTML과 CSS를 배워서 웹 서비스의 문제를 해결하거나, 자기 취향에 맞게 서비스를 꾸며봐요.
CSS 선택자에 대해 자세히 알면, 귀여운 고양이 배경 화면을 바탕에 띄워볼 수 있습니다 :D

▲ 배경 사진 출처 : Florian Olivo

자바스크립트로 웹 서비스 자동화하기

자바스크립트 기능 중에 DOM 제어에 집중해서 주변의 웹 서비스를 프로그래밍으로 대신 다루는 방법을 소개드립니다.

▲ 간편결제 서비스 카카오페이의 결제 정보를 바로 입력하고 카카오톡으로 보내는 모습

  • 번거로운 텍스트 입력과 버튼 클릭을 컴퓨터에게 전담할 수 있을까요?
  • 1,000개가 넘는 메일함의 항목을 일괄 처리할 수 있을까요?

자바스크립트로 웹 페이지의 구조를 재구성하기

광고를 차단하고 우리가 확인하고 싶은 내용만 보여주는 웹 확장 프로그램을 만드는 방법을 소개합니다.

  • 브라우저 개발자 콘솔 내에서 돌아가는 코드를 작성해 필요로하는 정보만을 띄워봅니다.
  • 유저스크립트를 이용해 영속성을 유지합니다.
  • 다른 사이트에도 스크립트를 적용해보고 본문안에 담긴 광고를 제거합니다.

윤리적 사용

프로그래밍의 도덕적인 활용에 대해 고민합니다.

교육에 사용하는 도구

강의는 구글 크롬으로 진행하지만 구글 크롬, 사파리, 파이어폭스 등 편하신 모던 웹 브라우저를 사용하셔도 괜찮습니다.

지식공유자 소개 🎓

김무훈

디지털 서비스 사용에서 피로함을 줄이는 것에 관심 있는 프로그래머입니다.

사람과 가장 가까이 소통하는 프론트엔드에 전문성을 지향하고 있습니다.

김정인

개발동아리 활동이 즐거워서 개발을 시작했습니다.
현재는 로보틱스 공부를 하고 있고 강화학습, 서버에 관심있습니다. 글 잘쓰는 개발자가 되고 싶습니다.

  • 전남대학교 지역바이오시스템공학과 재학 / 컴퓨터정보통신공학 복수전공

박세문

어릴 적 Turbo c, boland c++를 시작으로 프로그래밍을 접하였고, 개발자로 지낸지 10여년 정도 지났습니다.
웹, 앱, 모바일, 브라우저 엔진 개발 경험이 있고, 현재는 방콕에서 글로벌 OTA 업체에서 풀스택 엔지니어로 근무하고 있습니다.

  • 현) Agoda 시니어 풀 스택 엔지니어

HTML 소개CSS 소개 교육 제작을 담당했습니다. 개인 사정으로 김정인, 양아름 선생님이 대신 강의를 진행합니다.

양아름

미림여자정보과학고등학교에서 개발을 배우며 자연스레 프로그래밍에 관심을 가지게 되었습니다.
다양한 경험을 하는 개발자가 되고 싶습니다.

  • 미림여자정보과학고등학교 뉴미디어소프트웨어과

이지안

🙏 사전에 베타테스터로 참여해주신 김수현, 김유리, 윤희나, 이예슬, 허유준님 감사합니다.

지식공유자가 알려주는
강의 수강 꿀팁!
🎓
이런 분들께
추천드려요!
가볍게 프로그래밍을 시작해보고 싶은 분
프로그래밍 언어와 문법은 알지만 어떻게 활용할지 고민하는 분
소프트웨어 프로젝트를 처음부터 기획하는 것에 부담스러운 분
자신만의 소프트웨어를 만들어 보는 계기를 찾고 싶은 분
📚
선수 지식,
필요한가요?
CSS 또는 JavaScript 지식이 있으면 좋습니다

안녕하세요
설리번 프로젝트 입니다.
설리번 프로젝트의 썸네일

 설리번 프로젝트는 2015년부터 현재까지 수강생들이 자발적으로 기술을 활용하여 사회적 문제를 해결할 수 있도록 돕는 기술교육 봉사활동을 진행하고 있는 커뮤니티입니다고등학생대학생직장인에 이르기까지 기술교육에 열정을 가진 사람들이 선생님으로 함께하고 있습니다

 설리번 프로젝트에 대한 자세한 링크는 다음 홈페이지를 참고해주시기 바랍니다.
https://sullivanproject.io/
https://fb.com/sullivanproject.in/

설리번 프로젝트는 이번 상반기에 3가지의 온라인 교육을 다음과 같이 준비하였습니다.

. 공부에 대한 흥미를 돋우는 게임 제작하기

층간 소음 문제를 해결할 수 있는 앱 제작하기

프로그래밍 기초·실습

잘 부탁드립니다.

공동 지식공유자: 김무훈의 썸네일
커리큘럼 총 20 개 ˙ 1시간 35분의 수업
이 강의는 영상, 수업 노트, 첨부 파일, 미션이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 준비
오리엔테이션 미리보기 02:49
웹의 배경에 대해 알아봅시다 02:23
섹션 1. HTML과 CSS
섹션 2. 문서로 정보를 찾아보기
문서에 대한 소개
이전 실습의 코드를 직접 생각해내기
섹션 3. 자바스크립트와 DOM
섹션 4. 자바스크립트로 웹 서비스 대신 다뤄보기
소개 02:09
폼 입력을 다뤄보기 미리보기 06:11
유저스크립트 매니져로 스크립트 항상 주입하기 03:47
전자 우편함의 내용 일괄 처리하기 08:52
섹션 5. 자바스크립트로 웹 페이지의 구조 바꿔보기
소개 01:04
자바스크립트로 뉴스 기사 본문만 보이게하기 미리보기 11:18
유저스크립트로 영속성 유지하기 10:28
여러 사이트에 적용하기 14:54
웹 확장으로 배포하기 09:00
섹션 6. 윤리적 사용
윤리적 사용에 대해 알아봅시다 01:35
섹션 7. 마무리
마무리 01:21
강의 게시일 : 2020년 08월 20일 (마지막 업데이트일 : 2020년 09월 09일)
수강평 총 10개
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
4.3
10개의 수강평
5점
4점
3점
2점
1점
VIEW 좋아요 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
TW KIM thumbnail
good!
2021-05-12
이상락 thumbnail
직접 사용 해 볼수 있는 강의 감사합니다.
2020-12-17
nels thumbnail
내가 웹 사용시 불편한 것을 고치고 그것을 웹 확장프로그램으로 나눌 수 있는 것에 대해 배울 수 있었던 좋은 시간이었네요
2020-10-20
히보기 thumbnail
너무좋네요~~!
2021-05-13
umso1019 thumbnail
강의 하시는 분이 계속 바뀌고 다들 책읽는 느낌이라 집중이 잘 안돼요.. 약간 학교에서 발표하는 느낌입니다..
2021-04-15

무료

내 목록 추가 공유
지식공유자 : 설리번 프로젝트
총 20개 수업˙총 1시간 35분
평생 무제한 수강
수료증 미발급 강의
입문 대상 초급 중급이상
수강 전 궁금한 점이 있나요?
문의하기
문의
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의를
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스