
GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
J.영
GSAP의 ScrollTrigger를 활용하여 스크롤에 반응하는 인터랙티브 반응형 웹 포트폴리오를 만들어봐요!
초급
HTML/CSS, scrolltrigger, gsap
실전! 웹사이트제작 Step By Step! 포메인(https://www.phomein.com/brand/main/main.do) 메인페이지를 그대로 제작해 보는 과정입니다. 사이트에서 담고 있는 화려한 인터렉티브 웹을 그대로 제작, 구현해 보는 과정으로 복잡한 레이아웃도 쉽고 빠르게 제작하는 실무 핵심 노하우를 그대로 알려드립니다^^
실무에 적합한 레이아웃 제작 방법!
풀페이지 스크롤 레이아웃 제작 방법!
뎁스가 있는 GNB 네비게이션 제작 방법!
숫자 카운트업 제작 방법!
애니메이션이 들어간 이미지 슬라이드 제작 방법!
다양한 스크롤 애니메이션 제작 방법!
직접 따라 만들며 배우는 웹 사이트!
J.영과 함께 클론 코딩에 도전해보세요.
출시되어 있는 웹 레이아웃을 그대로 제작해 봄으로써 실전 웹사이트 레이아웃을 제작할 수 있어요!
웹페이지 제작에 필요한 jQuery의 기초부터 활용까지 배울 수 있으며, 다양한 라이브러리와 플러그인을 활용하여 단시간에 멋있고 화려한 웹페이지를 제작할 수 있도록 여러분을 도와드립니다.
실무에서 꼭 필요로 하는 인터렉티브 요소들로 구성된 웹페이지 강의를 통해 업무 스킬과 실무 핵심 노하우를 한번에 얻을 수 있습니다.
실무는! 속도전이며, 확장성입니다.
작업시간 내에 빠르게, 고퀄리티의 프로젝트를 완료하시는 분만이 실력있는 디자이너, 퍼블리셔로 인정받고 대우받을 수 있습니다.
포메인 사이트를 함께 만들어 보면서, 화려한 웹사이트도 빠르게 제작해나갈 수 있는 노하우를 익혀보세요!
안녕하세요? J.young입니다.
20여년간 웹 디자인 & 앱 개발 회사에서 디자인팀 총괄로 팀을 운영하며, 틈틈히 대학과 학교 및 직업훈련기관에서 UIUX디자인, 웹디자인, 웹퍼블리셔, 프론트엔드 개발 강의를 하고 있습니다. 디자인이나 코딩에 대한 기초가 전혀 없는 학생들을 대상으로 웹디자이너/퍼블리셔 등 전문가 양성을 위해
강의를 진행하며 전문가로써 당당히 실무에 진출할 수 있도록 지도하고 있습니다. 그런 만큼 많은 제자들이 현직 디자이너로, 퍼블리셔로 그 역량을 발휘하고 있습니다.
J.young이 도와드리겠습니다!
또한, 학습하시다 궁금하신 점 있으시면 댓글 남겨주시면 도움이 되드릴 수 있는 답을 드리도록 최선을 다하겠습니다.
보다 원활한 학습을 위해, J.young이 운영하는 잘난웹디 오픈채팅방에 가입하시면,
피그마, UI.UX, 코딩, 포트폴리오제작 관련 핵꿀팁과 무료웨비나 링크 등을 공유해드립니다.
- 오픈채팅방명 : 잘난웹디
- 코드 : jyoung
학습 대상은
누구일까요?
HTML/CSS 기초는 있으나 웹페이지 제작이 두려우신 분
웹디자이너, 퍼블리셔로 취업을 위해 빠르게 포트폴리오를 제작하고 싶으신 분
웹에서 필요로 하는 jQuery 소스를 익히고 싶으신 분
JavaScript 기초 없이 실무에서 필요로 하는 인터랙티브 웹을 손쉽게 구현하고 싶으신 분
현재 그래픽 디자이너로 프론트엔드 개발자나 퍼블리셔로 전향하고 싶으신 분
웹디자이너로서 업무 스킬을 향상시키고 싶으신 분
확장성을 고려한 인터랙티브 웹을 빠르게 구현하고 싶으신 분
7,622
명
수강생
281
개
수강평
222
개
답변
4.9
점
강의 평점
14
개
강의
안녕하세요? J.young 임자영입니다.
20여년간의 웹디자인 & 앱개발회사를 운영하며, 대학과 전문학교 및 직업훈련기관에서 UI.UX디자인,웹디자인, 웹퍼블리셔, 프론트엔드개발 강의를 하고 있습니다.
디자인이나 코딩에 대한 기초가 전혀 없는 학생들을 대상으로, 전문가(UI.UX디자이너/ 퍼블리셔/코딩하는 디자이너) 양성을 위해!!
- 기초부터 실무까지!
- 실무에서 원하는!
- 실무에서 바로 써 먹을 수 있는 포트폴리오 제작! 강의로 전문가로써 당당히 실무에 진출할 수 있도록 지도하고 있습니다.
그런 만큼... 많은 제자들이 실무자로써의 그 역량을 발휘하고 있습니다.
-UI/UX디자이너, 퍼블리셔, 프론트엔드개발자가 되고 싶어도 어디서 부터
어떻게 시작할지 막막하신 분들..
- 이직을 위한 정규 코스 학원을 다니고 싶어도 직장 생활로 인해 엄두도 못 내시는 분들..
- 코딩에 '코'자도 모르시는 분! 학원이나 유튜브 등으로 HTML/CSS기초는 배웠지만 -
도통...웹 퍼블리싱 개발 구현이란 남의 이야기이신 분들....
J.young이 도와드리겠습니다.!!
또한!! 학습하시다 궁금하신 점 있으시면 댓글 남겨주시면
도움이 드릴 수 있는 답을 드리도록 최선을 다하겠습니다.
* 오픈채팅방운영
보다 원활한 학습을 위해, J.young이 운영하는 잘난웹디 오픈채팅방에 가입하시면,
피그마, UI.UX, 코딩, 포트폴리오제작 관련 핵꿀팁과 무료웨비나 링크 등을 공유해드립니다.
오픈채팅방명 : 잘난웹디
코드 : jyoung
실무경력
- 2017~현) 웹개발 Director
- 2015년~2017년(주)엘리에셀 총괄 이사
- 2003년~2015년 (주)어뮤징웨어 총괄 이사
- 2003년: 서우씨앤디 디자인실장
- 현) UIUX & 웹포트폴리오 강의 진행 중(실무 진출 90프로 이상)
감사합니다^^
운영중인유튜브
잘난웹디
https://www.youtube.com/channel/UCISuuIbv_SnkE6d4oDgrBWQ
전체
16개 ∙ (2시간 31분)
해당 강의에서 제공:
전체
4개
3.5
4개의 수강평
수강평 1
∙
평균 평점 3.0
3
라이브러리에 대한 내용과 다운해서 적용하는방법을 좀 더 설명해 주시면 좋을것같습니다. (slick 과 fullpage)라이브러리 설명은 첨부되어 있는 파일과 조금의 설명으로 끝이나 아쉬움이 많이 남습니다. 강의는 빠르게 하기위해 말할때마다 텀을 편집하셔 빠른감이 있지만 배속을 늦게 하면 그럭저럭 맞게 할수 있습니다. 그래도 fullpage와 transition 사용은 코드가 심플하게 되어있어 사용하기에 용이합니다. 그리고 완성되어 있는 파일이 아니라 라이브러리만 추가 되어있는 파일이 있었으면 코드를 따라 치는데 훨씬 깔끔했을것같습니다. 좋은 강의 감사합니다.
수강평 1
∙
평균 평점 3.0
3
강의는 좋네요:) 모바일화면은 안되는게 조금 아쉽습니다. 그리고 강의가 좀 빨라요 ㅠㅜ
HYEREE AHN님~ 본 포메인강좌는 풀페이지제작에 대한 방법과, 카운트업, 액티브 시 진행되는 애니메이션, GNB MenuBar 등을 알려 드리기위해 위해 제작된 강의입니다. 반응형을 공부하고 싶으시면, 돕다Application이나 뮤자인 강의를 들으시면 됩니다. 그리고 영상은 지루함을 없애기 위해 일부러 빠르게 편집하였습니다. 온라인 강의는 반복해서 들을 수 있는 잇점이 있으니까요~~ 오늘도 좋은하루 되세요~ J.young드림
수강평 1
∙
평균 평점 3.0
3
스피드가 너무빨라서 그냥 따라쓰다가 바쁘네요... 비디오를 빠르게 편집하신건지 모르겠는데 말이 끝나기도전에 또다른 말이 계속나오고.. 코딩하는것도 편집 하신건지 타이핑속도보다 더 빠르고.. 말이 2시간짜리지 거의 4~5시간짜리같습니다. 정지시켯다가 다시플레이하고.. 0.75배속으로해도 빨라요.. ㅋ... 슬릭슬라이더나 풀페이지 설명도 조금 부족한듯싶습니다 잘 이해가안가요 .. 그리고 영상도 잘리는것들도 있고 자동스킵되는 부분들도있어서 아쉽네요 그래도 따라하다보면 홈페이지 구성은 되어지는거같아요. 그리고, 입문자나 초보는 절대 들으시면안될거같습니다 어느정도 코딩을 배우신다음 강의들으시는걸 추천드려요..
지식공유자님의 다른 강의를 만나보세요!
같은 분야의 다른 강의를 만나보세요!
₩30,800