강의 소개
커리큘럼
90% 국비지원으로 부담 없이 시작하세요!
🎁 수강하면 얻을 수 있는 것
• 강의 및 자료 평생 소장 - 언제든 복습할 수 있어요. • 1:1 Q&A 지원 - 담당 멘토가 직접 답변해 드려요. • 수료증 발급 - 이력서, 포트폴리오에 활용할 수 있어요. • 실무 프로젝트 실습 - 업무, 일상에 빠르게 적용할 수 있어요.
이런 고민이 있나요?
비전공자인데 웹개발자의 업무를 경험해보고 적성에 맞는지 확인하고 싶어요
커리어 탐색자
웹개발 이해가 부족해서 개발자와 원활하게 소통하기 어려워요
디자이너 / 기획자
나만의 아이디어를 담은 웹사이트를 직접 만들어보고 싶어요
창업 준비자
코드를 잘 몰라서 내가 만든 이미지나 작업물을 웹사이트로 구현하기 어려워요
크리에이터
이렇게 성장할 수 있어요!
HTML, CSS를 배우며 전반적인 웹개발 이해도를 높여요
커리어 탐색자
상상만 했던 나만의 사이트를 내 손으로 직접 만들어낼 수 있어요
디자이너 / 기획자
AI 이미지 툴을 활용해 독창적인 이미지가 담긴 반응형 웹사이트를 제작해요
창업 준비자
챗GPT의 도움으로 AI 이미지와 웹 요소를 결합해 나만의 반응형 웹사이트를 완성할 수 있어요
크리에이터
강의 맛보기
크리에이터
권두영 교수
• 현) 서울미디어대학원대학교 융합미디어학부 부교수
• 현) 한국컴퓨터그래픽스학회 이사
• 스위스 취리히공과대학(ETHZ) 컴퓨터공학 박사 졸업
• 워싱턴주립대학교 공간 컴퓨팅 석사 졸업
커리큘럼
입문
11시간 10분
노드 01
프로젝트 소개 및 웹 개발 기초
웹 포트폴리오의 목적과 구성을 소개하고, HTML, CSS JavaScript 및 개발 환경 도구를 살펴봅니다.
1-1
노드를 여행하는 히치하이커를 위한 안내서
5분
1-2
학습교안
1시간
1-3
들어가며
5분
1-4
프로젝트 소개: 웹 포트폴리오 목표 및 구성
10분
1-5
웹 개발 기초: HTML, CSS, JavaScript 소개
10분
1-6
개발 환경 설정 및 필요한 도구들
15분
1-7
마무리하며
5분
노드 02
HTML 기초와 챗GPT 적용
HTML 코드를 챗GPT로 분석해 보면서 HTML 문법을 간단히 살펴 보고, 챗GPT를 이용하여 HTML 코드를 생성합니다.
2-1
들어가며
5분
2-2
웹 포트폴리오 HTML 챗GPT 분석
15분
2-3
HTML 문서 구조 및 기본 태그
15분
2-4
챗GPT로 HTML 코드 생성하기
10분
2-5
마무리하며
5분
노드 03
CSS 기초와 챗GPT 적용
CSS 코드를 챗GPT로 분석해 보면서 CSS 문법을 간단히 살펴 보고, 챗GPT를 이용하여 CSS 코드를 생성합니다.
3-1
들어가며
5분
3-2
웹 포트폴리오 CSS 챗GPT 분석
25분
3-3
CSS 기초: 선택자, 속성, 값
10분
3-4
챗GPT로 CSS 코드 생성하기
15분
3-5
마무리하며
5분
노드 04
JavaScript 기초와 챗GPT 적용
JavaScript 코드를 챗GPT로 분석해 보면서 JavaScript 문법을 간단히 살펴 보고, 챗GPT를 이용하여 JavaScript 코드를 생성합니다.
4-1
들어가며
5분
4-2
JavaScript 코드 챗GPT 분석
20분
4-3
JavaScript 이해하기: 변수, 함수, 조건문, 반복문
15분
4-4
챗GPT로 JavaScript 코드 생성하기
15분
4-5
마무리하며
5분
노드 05
반응형 웹페이지 디자인 기초
반응형 웹디자인의 개요와 원칙을 알아보고 챗GPT로 웹디자인을 해 봅니다.
5-1
들어가며
5분
5-2
반응형 웹 디자인 챗GPT 분석
20분
5-3
반응형 웹 디자인 개요 및 원칙
15분
5-4
챗GPT를 활용한 반응형 웹페이지 디자인
15분
5-5
마무리하며
5분
노드 06
AI 이미지 생성기를 활용한 이미지 제작
AI 이미지 생성기를 이용하여 이미지를 제작하고 최적화하여 웹페이지에 적용합니다.
6-1
들어가며
5분
6-2
AI 이미지 생성기 소개
25분
6-3
이미지 생성기를 이용한 웹 포트폴리오 이미지 제작
15분
6-4
이미지 최적화 및 웹페이지에 적용하기
10분
6-5
마무리하며
5분
노드 07
Processing JavaScript를 활용한 반응형 웹페이지 제작
Processing JavaScript를 이용하여 애니메이션과 인터랙션이 포함된 반응형(인터렉티브) 웹페이지를 구현해 봅니다.
7-1
들어가며
5분
7-2
Processing JavaScript 소개
20분
7-3
반응형 웹페이지 아이디어 및 구현 예시
20분
7-4
간단한 애니메이션 및 인터랙션 구현
10분
7-5
마무리하며
5분
노드 08
웹 사이트 배포 및 마무리
웹 호스팅 서비스를 선택하여 웹 사이트를 배포해 봅니다.
8-1
들어가며
5분
8-2
웹 호스팅 서비스 선택 및 도메인 설정
20분
8-3
웹사이트 배포 절차
10분
8-4
강좌 정리 및 추가 학습 자료
10분
8-5
마무리하며
5분
노드 09
부록: 웹사이트와 DB 연결하기
웹사이트와 연결된 DB를 구축합니다.
9-1
폼(Form)과 구글 스프레드 시트 연결하기
20분
9-2
챗GPT를 사용하여 코드 분석하기
15분
9-3
Google Apps Script
15분
노드 10
프로젝트: 나만의 웹사이트 만들기
배웠던 내용을 토대로 나만의 반응형 웹사이트를 만들어 봅니다.
10-1
프로젝트 가이드
10분
10-2
나만의 반응형 웹사이트 만들기
50분
노드 11
심화탐구 프로젝트: 애니메이션 및 인터랙션 추가하기
나만의 웹사이트에 애니메이션과 인터랙션을 추가해 봅니다.
11-1
프로젝트 가이드
10분
11-2
애니메이션 및 인터랙션 추가하기
40분