Thumbnail
BEST 개발 ・ 프로그래밍 웹 개발
실전! 웹사이트제작! Step by Step! (대방산업_InteractiveWeb)
(5.0)
7개의 수강평 ∙ 103명의 수강생

48,400원

지식공유자 : J.영
총 29개 수업˙총 4시간 50분
평생 무제한 수강
수료증 발급 강의
초급 대상
내 목록 추가 144 공유
초급자를 위해 준비한
[개발 ・ 프로그래밍] 강의입니다.

[웹사이트제작 Step By Step] 3단계 강의로, 대방산업 메인페이지를 그대로 제작해 보는 과정입니다. 사이트에서 담고있는 화려한 인터렉티브 웹을 그대로 제작 구현해 보는 과정으로 화려한 만큼, 난이도가 있는 강의입니다.

✍️
이런 걸
배워요!
마우스 오버시 2depth가 보여지는 GNB jQuery
스크롤시 디자인이 변경되는 FixHeader jQuery
텍스트 애니메이션 jQuery (Splitting.js)활용과 응용
스크롤 이벤트 애니메이션 jQuery (scrolla.js)활용과 응용
애니메이션이 들어간 이미지슬라이드 jQuery (slick.js)활용과 응용

HTML과 CSS만 알아도

웹페이지 & Interative Web 제작 OK!


본 강의는 웹사이트제작 Step By Step! 3단계로 대방산업(https://www.db-dvp.co.kr/) 메인페이지를 그대로 제작해 보는 과정입니다. 사이트에서 담고있는 화려한 인터렉티브 웹을 그대로 제작 구현해 보는 강좌입니다.


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


강의는 HTML과 CSS에 대한 기본 지식을 갖춘 분들을 대상으로 실제 웹페이지를 그대로 구현하며 진행됩니다. 어려운 javaScript와 jQuery를 몰라도, HTML CSS를 기반으로 라이브러리 플러그인을활용하여 단시간에 멋있고 화려한 웹페이지를 제작할 수 있도록 여러분을 도와드립니다. 실무에서 꼭 필요로하는  인터렉티브 요소들로 구성된 웹페이지 강의를 들으면 실무확장성, 스킬업 보장, 포트폴리오 완성 세가지를 한꺼번에 얻을수 있답니다.


1.Header영역 제작하기 (GNB, Fixed header)

-  마우스 오버시 2depth가 보여지는 GNB jQuery
- GNB 메뉴바에  마우스호버시 부드럽게 슬라이딩되는 하위메뉴바 제작
- 가상 선택자를(before,after) 이용한 다양한 마우스 오버 효과 
- 스크롤시 디자인이 변경되며 상단에 픽스되는 header jQuery

2.Visual영역 제작하기(Image Slider)

- Splitting .js를 사용하여 제작한 텍스트 애니메이션
- Slick .js를 사용하여 슬라이드 이미지 제작
- 슬라이드 'prev','next' 버튼 제작
- 슬라이드 인디케이터 제작
- 게이지바 애니메이션
-이미지 분할 애니메이션

3.Contents_imformation 영역 (Banner Slider)


- Scrolla.js로 두개씩 보이지는 슬라이드 애니메이션
- CSS로 dot버튼 제작
- 스크롤 버튼 클릭시 부드럽게 원하는 위치로 이동하는 jQuery
- 가상 선택자를(before,after) 이용한 다양한 마우스 오버 효과 (밑줄효과, 테두리효과, 이미지스케일 효과)

4.Contents_video 영역 & Contents_news 영역

 - 스크롤 애니메이션 jQuery (scrolla.js)
 - 유튜브영상 가져오기
 - 그라디언트컬러 적용
 - Motion애니메이션 적용

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

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

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

2. 업무 생산성 UP!

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

3. 고퀄리티 포트폴리오

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

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

지식공유자가 알려주는
강의 수강 꿀팁!
🎓
이런 분들께
추천드려요!
1.HTML/CSS기초는 있으나 웹페이지 제작이 두려우신분.
2.웹디자이너, 퍼블리셔로 취업을 위해 빠르게 포트폴리오를 제작하고 싶으신 분
3.웹에서 필요로 하는 JQuery 소스를 익히고 싶으신 분
4.JavaScript기초없이 실무에서 필요로한 인터렉티브웹을 손쉽게 구현하고 싶으신 분
5.현재 그래픽 디자이너로 프론트엔드 개발자나 퍼블리셔로 전향하고 싶으신 분
6.웹디자이너로서, 업무 스킬을 향상 시키고 싶으신 분
7.확장성을 고려한 인터렉티브웹을 빠르게 구현하고 싶으신 분
📚
선수 지식,
필요한가요?
HTML /CSS

안녕하세요
J.영 입니다.
J.영의 썸네일

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

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

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

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

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

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

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

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

감사합니다^^ 


운영중인유튜브

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

공동 지식공유자: janey23의 썸네일 headong2의 썸네일
커리큘럼 총 29개 ˙ 4시간 50분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. header 영역 제작하기 (GNB, Fixed header)
header 영역 레이아웃 제작_(GNB 2depth 구조 잡기) 미리보기 23:39
header 영역 제작_(마우스 오버시 2depth가 보여지는 GNB jQuery) 08:25
header 영역 제작_(가상 선택자를 이용한 GNB 마우스 오버 효과) 16:17
header 영역 제작_(스크롤시 디자인이 변경되며 상단에 픽스되는 header jQuery) 10:15
섹션 1. visual 영역 제작하기 (Image slider)
visual 영역 제작_(이미지 슬라이더 구조 잡기와 Splitting.js 을 이용한 텍스트 플러그인 적용) 12:25
visual 영역 제작_(slick.js 을 이용한 이미지 슬라이더 플러그인 적용과 옵션 사용법) 09:02
visual 영역 제작_(이미지 슬라이더의 'prev','next' 버튼 제작) 12:47
visual 영역 제작_(이미지 슬라이더의 인디케이터 제작과 게이지바 애니메이션) 13:01
visual 영역 제작_(이미지 슬라이더 이미지 마스크 애니메이션과 텍스트 애니메이션) 16:17
섹션 2. contents 영역 제작하기_1 (information)
information 영역 제작_(클릭시 원하는 위치로 스크롤 바가 이동하는 스크롤 버튼 제작) 10:29
information 영역 제작_(콘텐츠 기본구조 잡기) 07:36
information 영역 제작_(2장씩 보여지는 Banner Slider 제작) 10:10
information 영역 제작_(가상 선택자를 이용한 테두리 마우스 오버 효과) 07:19
information 영역 제작_(가상 선택자를 이용한 BG와 아이콘이 생기는 마우스 오버 효과) 06:45
information 영역 제작_(배너슬라이드의 인디케이터를 글씨로 변형 제작) 11:29
information 영역 제작_(scrolla.js를 이용한 스크롤 애니메이션과 Splitting을 이용한 텍스트 애니메이션 적용) 11:51
information 영역 제작_(스크롤 버튼 클릭시 부드럽게 원하는 위치로 이동하는 jQuery) 02:41
섹션 3. contents 영역 제작하기_2 (video)
video 영역 제작_(iframe을 이용해 유투브에서 동영상 가져오기) 11:37
video 영역 제작_(마우스 오버효과와 클릭 이벤트) 07:44
섹션 4. contents 영역 제작하기_3 (business)
business 영역 제작_(레이아웃 구성_1) 11:29
business 영역 제작_(레이아웃 구성_2) 09:50
business 영역 제작_(마우스 오버 효과와 스크롤 이벤트 애니메이션 적용) 07:25
섹션 5. contents 영역 제작하기_4 (news)
news 영역 제작_(레이아웃 구성) 12:10
news 영역 제작_(그라데이션 호버효과와 스크롤 이벤트 애니메이션 적용) 10:41
섹션 6. contents 영역 제작하기_5 (career)
career 영역 제작 05:27
섹션 7. contents 영역 제작하기_6 (customer)
customers 영역 제작(레이아웃 구성_1) 07:22
customers 영역 제작(레이아웃 구성_2) 05:53
섹션 8. footer 영역 제작하기
footer 영역 제작 07:56
섹션 9. Tip)브라켓설치
강의 게시일 : 2020년 05월 04일 (마지막 업데이트일 : 2020년 09월 01일)
수강평 총 7개
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
5.0
7개의 수강평
5점
4점
3점
2점
1점
VIEW 좋아요 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
kate thumbnail
J.영 강사님 강의는 모두 수강해서 완강했어요^^ 이번 대방산업 웹사이트는 화려한 인터렉티브 웹을 그대로 구현할 수 있어서 다른 강좌보다 재미있게 잘 따라했어요. 무엇보다 여기서 배운 다양한 제이쿼리 애니메이션으로 제 포트폴리오 사이트를 레벨업 해야겠다는 의지가 활활 불타오르네요!! 다음에는 모바일앱 제작 위주로의 강의도 개설해주시면 많은 도움이 될것 같아요. 코로나19로 온라인으로 힘들게 독학하는 수많은 사람들에게 J.영님의 좋은 강의 많이 부탁드려요. 감사합니다.
2020-06-27
지식공유자J.영
kate님~ 수강후기 감사드립니다. 저의 모든 강의를 수강해주신 점 맘 깊이 감사드리고.. 항상 더 좋은 강의로 찾아뵙도록 최선을 다하겠습니다. 다음 강의는 제가 이사하는 관계로 촬영 중 중단이 되었는데 정리되는대로 빠른시일내에 찾아뵙도록 하겠습니다. 모바일앱 디자인강의도 포함하여 준비 할 계획에 있습니다^^ 좋은 저녁시간 보내십시요^^
2020-06-28
지식공유자J.영
안녕하세요 ~~ kate 님 수강평이벤트 공지 올렸습니다 ~~^^ 확인해주세요
2020-07-03
LHooOoo thumbnail
프론트엔드 개발을 혼자서 배워보고 있는 중1인데 무료 강의들은 괜찮은 강의들이 몇개없어서 금방 보고 끝나서 유료강의를 찾았는데 대방산업개발사이트가 단지 멋져보인다는 이유로 시작했는데 자세하게 알려주시고 무료강의에서는 잘 배울수없었던 부분까지 짚어주셔서 재밌게 배웠습니다 :) 너무 재밌는 강의였고 열심히 하시면 중학교 학생분들도 충분히 완강 하실수 있으실것같아요! J.영님이 학교과제 부탁에도 친절히 응해주시고 질문답변도 꾸준히 해주셔서 너무 좋았습니다 !
2020-09-25
지식공유자J.영
임현우님 ~~ 제가 박수 갈채를 보냅니다^^ 부모님께서 매우 든든하실듯요.... 대방산업이면...성인들도 어려울 수 있는데 아주 재밌게 완강해냈다니 정말 정말 대단합니다~~ 한마디로 짱!!!입니다. 제가 고맙구요~~~ 공부하다 궁금한점 있으면 언제든....글 남겨놓으시고.. 응원 또 응원합니다^^ 오늘도 즐건 오후되고..주말도 행복하게 보내세요^^ J.young드림^^
2020-09-25
룰불 thumbnail
good!
2020-11-17
지식공유자J.영
룰불님 짧고 간단하지만 힘이나는 수강평 감사드립니다. 오늘도 좋은하루 되십시요^^
2020-11-17
headong2 thumbnail
J.young님 쌤의 멋진 강의 정말 정말~~~~잘 들었습니다. 쌤 강의는 한화부터 와이스튜디오 모두 다 들었는데... 현재 출시되어 있는 웹사이트 강의라 역쉬...명쾌하다고 할까요... 쌤의 또박또박한 음성으로 쉽게 이해될 수 있는 설명도 넘나 좋아요^^ 특히 슬릭슬라이드로 어로우와 닷츠를 직접 제작하고 디자인 하는것 속도조절...등 플러그인 활용이 참 좋았습니다. 실무에선 뭐니뭐니해도.. 작업의 속도감인데 쌤 강의엔 소스 그대로 활용할 수 있어서 사실 도움이 많이 됩니다. 주변에 많이 추천드리고 싶은 명강의입니다 지속적으로 좋은 강의 많이 많이 올려주세요^^
2020-06-18
지식공유자J.영
headong2님 수강후기 감사드립니다. 수강평 한마디 한마디에 강사는 힘이 난답니다. 최고의 강의 최선의 강의로 조만간 찾아뵙도록 하겠습니다. 감사드립니다. 좋은 저녁시간 되세요^^
2020-06-28
elexc thumbnail
많은 도움이 되었습니다~ 덕분에 재미있게 홈페이지를 만들어보았습니다. 앞으로도 좋은 강의 기대하겠습니다. 감사합니다^^
2020-07-01
지식공유자J.영
elexc님 수강평 감사드립니다~ 항상 최신 트렌드에 맞고 실무 활용 응용이 높은 강의로 준비할 것이고 포폴 제작에도 크게 도움될 수 있는 강좌로 뵙도록 하겠습니다 감사합니다 오늘도 좋은 하루 되십시요^^
2020-07-03

48,400원

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