실전! 웹사이트제작! Step by Step! (뮤자인_반응형웹)
실전! 웹사이트제작! Step by Step! (뮤자인_반응형웹)
수강정보
(6개의 수강평)
24명의 수강생
25% 할인, D-6
36,300원
48,400원
지식공유자 : J.영
32회 수업 · 총 5시간 10분 수업
기간 : 평생 무제한 시청
수료증 : 발급 강의
수강 난이도 : 초급

이 강의는

[웹사이트제작 Step By Step] 3단계 강의로, 뮤자인(https://musign.net) 메인페이지를 그대로 제작해 보는 과정입니다. 사이트에서 담고 있는 화려한 인터렉티브 웹을 그대로 제작, 구현해 보는 과정으로 복잡한 레이아웃도 쉽고 빠르게 제작하는 실무 핵심 노하우를 그대로 알려드립니다^^

이런 걸 배워요

  • 다양한 디바이스에 최적화된 반응형웹 퍼블리싱 (Media query)
  • SVG를 이용한 애니메이션
  • 가상 선택자(before, after) 이용한 이미지 애니메이션
  • Transform 속성을 이용한 인터렉티브 텍스트 애니메이션
  • 스크롤 이벤트 애니메이션 jQuery(scrolla.js) 활용과 응용
  • 스크롤 위치에 따라 배경 컬러가 바뀌는 효과 (jQuery)
  • 마우스 오버시 밑줄이 따라다니는 GNB 애니메이션 (jQuery)
  • GNB 햄버거 메뉴 오픈 애니메이션

HTML과 CSS만 알아도

웹페이지 & Interative Web 제작 OK!

  • 이 강의는 HTML과 CSS에 대한 기본 지식을 갖춘 분들을 대상으로 실제 웹페이지를 그대로 구현하며 진행됩니다. 


Step By Step!
지금 바로 시작하세요.

웹페이지 제작에 필요한 jQuery의 기초부터 활용까지 배울 수 있으며, 
라이브러리와 플러그인을 활용하여 단시간에 멋있고 화려한 웹페이지를 제작할 수 있도록 여러분을 도와드립니다.


실무에서 꼭 필요로 하는 인터렉티브 요소들로 구성된 웹페이지 강의를 통해
업무 스킬과 실무 핵심 노하우를 한번에 얻을 수 있습니다.

실무는! 속도전이며, 확장성입니다.
작업시간 내에 빠르게, 고퀄리티의 프로젝트를 완료하시는 분만이 실력있는 디자이너, 퍼블리셔로 인정받고 대우받을 수 있습니다.

뮤자인 사이트를 함께 만들어 보면서, 화려한 웹사이트도 빠르게 제작해나갈 수 있는 노하우를 익혀보세요!

1. html과 css를 통한 초간단 레이아웃 작성법
2. transfrom을 활용한 텍스트 애니메이션
3. 마스크효과를 이용한 애니메이션
4. SVG 제작 적용 및 애니메이션
5. 스크롤시 진행되는 애니메이션

*반응형웹페이지 제작

-  PC모드 해상도 1720px~1401px 반응형웹 제작
-  태블릿해상도 1400px~1025px 반응형웹 제작
-  태블릿해상도 1024px~68px 반응형웹 제작

*반응형웹페이지 제작

- 모바일해상도 767~321px 반응형웹 제작
- 모바일 320px까지의 반응형웹 제작

* menuOpen bar 제작

* 개발자도구 활용법

강의가 끝나고 나면
얻는 것 :D

1. 탄탄한 레이아웃 제작 실력

웹페이지 제작을 위해서는, HTML과 CSS를 기반으로 한정확한 레이아웃 작성이 가장 중요합니다HTML CSS에 대한 기초는 있으나, Layout Design에 대해 전혀 감이 오지 않으신 분들도 괜찮습니다. 기초부터 꼼꼼하게 알려드리는 본 강의를 성실하게 따라오시면어느새 레이아웃 제작의 탄탄한 기본기가 다져져 있는 것을 느끼실 수 있을 거예요!

2. 업무 생산성 UP!

업무 생산성을 높이려면 라이브러리와 플러그인을 이용해서 단시간에 인터렉티브한 웹사이트를 구현할 수 있어야 합니다. 본 강의에서는 웹페이지 레이아웃 제작부터 반응형 페이지 제작까지 확실히 공부할 수 있으며, 실무에서 필요로 하는 스크립트, 플러그인, 애니메이션 등을 이용해서 웹페이지를 만듭니다. 강의를 들으며 꾸준히 실습하다 보면, 어느새 업무 역량이 UP! UP!

3. 고퀄리티 포트폴리오

업무 역량을 드러내고 새로운 기회를 잡기 위한 효과적인 준비물 중 하나는 바로 고퀄리티의 포트폴리오입니다. 강의를 들으며 실습하다 보면 나만의 포트폴리오가 쌓일 거예요. 본 강의뿐만 아니라, 이후 이어지는 웹사이트 제작 실습 강의를 들으며 꾸준히 웹페이지를 구현하다 보면 취업에서 나의 가장 큰 무기가 되어 줄 포트폴리오를 완성할 수 있을 것입니다.

실전! 웹사이트 제작
다른 강의 보기

Basic Course (한화캐미컬_반응형웹)
PC모드 레이아웃, 반응형 페이지 제작 완벽 이해!
Application Course 1 (와이스튜디오_반응형웹)
시선을 사로잡는 웹페이지 제작 커리큘럼!
Application Course 2 (대방산업_인터랙티브웹)
화려한 고난도 인터랙티브 웹도 내 손으로 직접!

html, css, html/css,  website, 웹사이트, 코딩 ,oding ,jquery, 제이쿼리, 레이아웃, 인터렉티브웹, interactive web, web design, 웹디자인, 포트폴리오,  퍼블리싱

html, css, html/css,  website, 웹사이트, 코딩 ,coding ,jquery, 제이쿼리, 레이아웃, 인터렉티브웹, interactive web, web design, 웹디자인, 포트폴리오,  퍼블리싱

도움 되는 분들

  • HTML/CSS기초는 있으나 웹페이지 제작이 두려우신 분
  • 그래픽 디자이너가 프론트앤드개발자로 전향하고 싶으신 분.
  • 웹디자이너, 퍼블리셔로 취업을 위해 빠르게 포트폴리오를 제작하고 싶으신 분
  • 웹디자이너, 퍼블리셔로 취업을 위해 다양한 레이아웃을 설계 구현하고 싶은 분들
  • 실무 확장성을 고려하여 빠르게 멋지고 화려한 사이트를 제작하고 싶으신 분

지식공유자 소개

 안녕하세요? J.young입니다.

20여년간의 웹디자인 & 앱개발회사에서 디자인팀 총괄로 팀을 운영하며,
틈틈히 대학과 학교 및 직업훈련기관에서 UI.UX디자인,웹디자인,웹퍼블리셔,
프론트엔드개발강의를 하고 있습니다.

디자인이나 코딩에 대한 기초가 전혀 없는 학생들을 대상으로,
전문가(웹디자이너/ 퍼블리셔) 양성을 위해 ~
- 기초부터 실무까지!
- 실무에서 원하는!
- 실무에서 바로 써 먹을 수 있는 포트폴리오제작! 강의로
전문가로써 당당히 실무에 진출할 수 있도록 지도하고 있습니다.

그런만큼... 많은 제자들이 현직 디자이너로 퍼블리셔로 그 역량을 발휘하고 있습니다.

- 웹디자이너 퍼블리셔가 되고 싶어도 어디서 부터 어떻게 시작할지 막막하신분들..
- 이직을 위한 정규코스 학원을 다니고 싶어도 직장생활로 인해 엄두도 못내시는분들..
- 코딩에 '코'자도 모르시는 분! 학원이나 유튜브 등으로 html/css기초는 배웠지만 -
도통...웹사이트제작이란 남의 이야기이신 분들....

J.young이 도와드리겠습니다.!!
또한!! 학습하시다 궁금하신 점 있으시면 댓글 남겨주시면
도움이 되드릴 수 있는 답을 드리도록 최선을 다하겠습니다.

실무경력
- 2015년~2017년(주)엘리에셀 총괄 이사
- 2003년~2015년 (주)어뮤징웨어 총괄 이사
- ~~2003년: 서우씨앤디 디자인실장

강의경력
- 인천문예전문학교 (멀티미디어웹강의)
- 서울현대직업전문학교 (스마트웹 & 앱강의)
- 폴리텍대학 (디자인강의)
- 한국IT전문학교 (멀티미디어디자인 강의)
- 두드림직업전문학교 (디자인강의)
- 광명시여성비전센터 (웹디자인강의)
- 이젠컴퓨터학원강의 분당점 (디자인강의)
- 더조은컴퓨터아카데미 서초점 ([웹디자인기능사]디지털웹&앱디자인-과정평가형자격-A)
- 하이미디어컴퓨터학원 서초점 (영상을 활용한 UI/UX 웹디자인&웹퍼블리셔)  

감사합니다^^ 


운영중인유튜브

잘난웹디
https://www.youtube.com/channel/UCISuuIbv_SnkE6d4oDgrBWQ

교육과정

모두 펼치기 32 강의 5시간 10분
섹션 0. Intro
1 강의 02 : 35
사이트 소개 및 강의진행용 결과파일 첨부
02 : 35
섹션 1. header 제작하기
3 강의 21 : 54
header 영역 HTML 마크업 (구글 웹폰트 적용 방법 / css 리셋 방법)
07 : 57
header 영역 CSS 스타일 작성
06 : 57
GNB 메뉴에 마우스 오버시 따라다니는 밑줄 script 작성
07 : 00
섹션 2. visual 제작하기
2 강의 23 : 52
visual 영역 HTML 마크업 및 스타일 CSS 작성_1
08 : 59
visual 영역 HTML 마크업 및 스타일 CSS 작성_2
14 : 53
섹션 3. contents 제작하기
5 강의 52 : 02
Journal 클래스 영역 HTML 마크업 및 스타일 CSS 작성_1
10 : 52
Journal 클래스 영역 HTML 마크업 및 스타일 CSS 작성_2
09 : 14
service 클래스 영역 HTML 마크업 및 스타일 CSS 작성
14 : 57
customer 클래스 영역 HTML 마크업 및 스타일 CSS 작성
04 : 00
team 클래스 영역 HTML 마크업 및 스타일 CSS 작성
12 : 59
섹션 4. footer 제작하기
1 강의 13 : 01
footer 영역 제작
13 : 01
섹션 5. SVG를 이용한 애니메이션 제작하기
3 강의 27 : 17
SVG애니메이션 제작을 위한 HTML 마크업 및 스타일 CSS 작성
12 : 14
2.SVG애니메이션 제작을 위한 SCRIPT 작성
02 : 03
2.SVG애니메이션 제작을 위한 CSS Animation 작성, scrolla.js 링크 및 스크립트 작성
13 : 00
섹션 6. Scrolla.js 애니메이션 제작하기
3 강의 35 : 52
Scrolla.js 애니메이션 제작하기 1강_ 스크립트적용 및 개발자도구 확인
12 : 57
Scrolla.js 애니메이션 제작하기 2강 _ 텍스트 애니메이션 제작
07 : 43
Scrolla.js 애니메이션 제작하기 2강 _ 이미지애니메이션 제작
15 : 12
섹션 7. menuOpen 바 제작하기
2 강의 30 : 07
menuOpen HTML 마크업 및 스타일 CSS 작성
14 : 23
menuOpen 열기 제작(script 작성)
15 : 44
섹션 8. 반응형(Responsive)페이지 제작하기
11 강의 101 : 11
PC모드_max-width : 1720pxx 제작
10 : 47
테블릿모드_max-width : 1400px제작
09 : 11
테블릿모드_max-width : 1000px 해상도 제작_1
10 : 38
테블릿모드_max-width : 1000px 해상도 제작_2
14 : 59
테블릿모드_max-width : 1000px 해상도 제작_3
07 : 56
모바일_max-width : 767px 해상도 제작_1
09 : 17
모바일_max-width : 767px 해상도 제작_2
12 : 14
모바일_max-width : 767px 해상도 제작_3
10 : 57
모바일_max-width : 767px 해상도 제작_4
05 : 54
모바일_max-width : 320px해상도 제작_1
07 : 01
Tip) 브라켓설치강좌
02 : 17
섹션 9. Tip) 브라켓설치강좌
1 강의 02 : 17

공개 일자

2020년 8월 7일 (마지막 업데이트 일자 : 2020년 9월 1일)

수강 후기

4.7
6개의 수강평
default_profile.png
yyy09 21일 전
정말 시원시원한 강의 잘 들었습니다. 실력은 없지만 홍보영상보고 화려한 사이트라 꼭 한번 따라서 만들어보고 싶어 강좌를 등록했는데 생각보다 J.young쌤님의 수업을 따라하며 생각보다 쉽게 따라할 수 있었습니다. 무지 어렵게 느껴지던 반응형제작이 강의를 따라하니 무척 쉽게 와 닿았습니다. 쌤님 강좌는 모두 다 들어보고 싶습니다. 좋은 강좌로 열공할 수 있어 참 뿌듯합니다. 감사합니다.
J.영

J.영 21일 전
yyy09님 열공해 주신점 진심으로 감사드립니다. 강사에겐 강의를 열었을 때 열심히 하셨다는 말씀에 가장 힘이 난답니다. 지속적으로 학습에 도움이 되실 수 있는 강의를 연구하여 올려드리도록 하겠습니다. 본 강좌에 관심을 가져 주신점 진심으로 감사드립니다. 감사합니다 J.young드림

default_profile.png
hylimhy 23일 전
정말 깔끔한 강의 잘 들었습니다. 반응형에 대해 잘 알수 있었으며, 무엇보다 복잡해보이는 레이아웃을 쉽게 정리하여 짤 수 있는 법을 배워서 좋았습니다. 다음강의도 기대됩니다 감사합니다^^
J.영

J.영 21일 전
hylimhy님 반응형에 대해 잘 알 수 있으셨다니 제가 흡족합니다. 열공해주신 점 감사드리구요...본 뮤자인강좌는 공통 클래스를 사용하여 쉽게 레이아웃을 짤 수 있는 방법을 전달드리고자 하였는데 이해가 되셨다니 제가 감사드립니다. 그럼 다음 강의에서 만나뵙도록 하겠습니다 감사합니다 J.young드림

default_profile.png
lsy4557 18일 전
강의가 귀에 속속 잘 들어옵니다. 하나하나 쉽게 이해되게 설명해 주셔서 감사하구요..코딩한 줄 한줄 완성되어져 가는게 신기하고 놀랍습니다. 웹페이지 만드는것에 대한 자신감과 개발자도구 활용법을 확실하게 배워서 타 사이트도 방문해서 개발자도구를 보게 되네요...친절하신 강의 감사드립니다. 다음 강의도 기대하고 있겠습니다.
J.영

J.영 15일 전
lsy4557님 강의가 귀에 속속 들리신다니 제가 감사드립니다. 레이아웃 작성이 알면 알수록 재미나고 신기하고 하나의 페이지를 완성하고 나면 참으로 뿌듯하지요... 열공해 주셔서 감사드리고 앞으로도 좋은 강의로 찾아뵙도록 하겠습니다. 편안하신 저녁시간 되세요^^ 제이영드림

지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스