Thumbnail
크리에이티브 웹앱 디자인
XD UI 디자인 + Clone Coding 인터렉티브 반응형웹 포트폴리오!
34명이 수강하고 있어요.

53,900원

지식공유자 : LIZ.B
총 40개 수업˙총 6시간 24분
평생 무제한 수강
수료증 발급 강의
입문 초급 대상 중급이상
내 목록 추가 53 공유
초급자를 위해 준비한
[웹앱 디자인, 디자인 도구] 강의입니다.

실무에서 하자! 스크롤에 대응하는 반응형 웹 포트폴리오 #제일엔지니어링

✍️
이런 걸
배워요!
HTML + CSS + JavaScript + jQuery 핵심이론을 통한 퍼블리싱 실전 능력 향상
interactive css layout 만들기
flex를 활용한 layout
스크롤에 대응하는 사용자 정의 method사용법
Zoom In / Out되는 슬라이드 만들기
mediaquery를 이용한 반응형 웹 퍼블리싱 제작 능력

"XD UI 디자인과 Clone Coding을 모두 배울 수 있는 1석 多조의 기회!"

 

        +   

  1. 🧑 웹디자인이나, 퍼블리셔로 또는 개자이너, 디발자? 등의 취업을 원하신다면?
  2. ⭐ 반응형 웹, 특히 인터렉티브한 포트폴리오는 선택 아닌 필수!

인터렉티브한 반응형 웹 포트폴리오가 필요하다면, 쉽게 풀어가며 알아보는 이 강의와 함께 하세요!

✅ XD를 활용한 시안작업? 포토샵보다 훨씬 쉽고 편리한 XD 이번 기회에 배워보세요!

✅ 쉽고 재미있게 배우는 강의, 코딩의 즐거움을 알게 되실 거예요!


📌이 강의에서 배우는 것들

  • XD를 활용한 UI Design 방법
  • 인터렉티브한 반응형 웹 설계방법
  • 스크롤에 대응하는 사용자 정의 method사용법 
  • flex를 활용한 화면 레이아웃 만들기
  • javascript, jquery를 활용한  동적화면 만들기
  • Zoom In /Out 슬라이드 만들기
  • 반응형웹 최종 코딩 완성본 / XD 완성본 

🧐 포트폴리오 미리보기



❓ 만들어 볼 사이트가 궁금하다면 👉링크 클릭


📚 강의 구성

섹션00. XD Design + Clone Coding 인터렉티브 반응형 포트폴리오! 강의 소개

  • 수업에 대한 소개
  • xd 프로그램 소개, vscode 사용법 소개

섹션01. XD Design

섹션02. deskTop layout header 제작하기

섹션03. deskTop visual header 제작하기

섹션04. deskTop business section 제작하기

섹션05. deskTop global section 제작하기

섹션06. deskTop list section 제작하기

섹션07. deskTop news section 제작하기

섹션08. deskTop footer section 제작하기

섹션09. tablet layout 제작하기

섹션10. mobile layout 제작하기


🙋🏻‍♂️ 질문있어요!!

Q. XD를 처음 접해봅니다 할 수 있을까요?
A. 이강의는 XD기초 강의입니다. 단순히 layout을 만드는것에 집중한 XD수업이기에 쉽습니다. 하지만, 포토샵의 단축키를 조금 알고 계신다면 좀 더 쉽고, 주로 사용되는 단축키는 공유해드리도록 하겠습니다!

Q. 코딩의 수준은 어느정도 되어야 할까요?
A. html화일을 만들수 있고, tag의 사용법 기본적인 속성이 들어가는 위치등 웹에 많이 공유되는 기초 지식을 습득하시고 수업을 들으시는걸 추천드립니다. 

Q. 윈도우 PC Mac에서도  XD , vscode가능한가요?
A. Adobe군의 제품들은 모든 OS에서 구동 가능하고, vsCode도 마찬가지입니다. :) 

지식공유자가 알려주는
강의 수강 꿀팁!
🎓
이런 분들께
추천드려요!
scroll event에 관심 있으신분들
크리에이티브 넘치는 인터랙티브 웹 구현에 관심있는 분들
초급에서 중급으로 기본기 업그레이드를 원하는 분!
실무에서 사용하는 반응형 웹사이트 제작을 하고 싶은 분
📚
선수 지식,
필요한가요?
초보자도 가능
입문자는 웹표준 기초지식을 쌓으시고 들으시면 좋습니다.

안녕하세요
LIZ.B 입니다.
LIZ.B의 썸네일

건축학을 전공했고 웹디자인과 인연을 맺은건 언 20여년이 넘었습니다. 실무와 강의를 병행하며  많은 희노애락 끝에 현재는 이 일을 많이 애정하게 되었고,  흥미와 성취감으로 더 매진하게 되었습니다. 제가 알고 있는 지식들을 공유하여, 좀더 많은 비전공자들이 쉽게 입문하기를 바라며, 그대가 원하는 모든 일들이 이루어 지길 기원합니다.

Lucete!

강의경력  
□ 現 대우직업능력개발원 프론트엔드 / 멀티미디어 / 웹콘텐츠 과정 강의
  • 2018.3 -현재. 웹 디자인/멀티미디어/프론트엔드 전문가과정 진행
□ 하이미디어 UI/UX 웹퍼블리싱 강의
□ 이젠컴퓨터 UI/UX 웹퍼블리싱 강의
□ 더조은컴퓨터학원 종로캠퍼스 웹디자인 강의
□ 더조은컴퓨터학원 강남캠퍼스 웹디자인/그래픽 강의
□ 영재직업전문학교 웹디자인 강의
  자격증  
□ 웹디자인기능사 자격증
□ 그래픽스운용기능사 자격증 
□ KPC 자격지도자(GTQ,GTQi,GTQid) 자격증
□  직업능력개발훈련교사(정보기술, 디자인,문화컨텐츠) 

커리큘럼 총 40개 ˙ 6시간 24분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 수업에 대한 소개 및 목적 대상 설명
섹션 1. XD로 하는 UI Design
header visual section 미리보기 10:41
visual section 06:49
사업분야 section 11:54
global,list section 11:33
하단 전체 section 12:28
섹션 2. 전체화일 다운로드받기
전체화일 다운로드받기
섹션 3. Desktop header section 제작하기
전체 화일에 대한 설명 미리보기 04:37
header prototype 작성하기 04:47
header layout css 01 작성하기 10:30
header layout css 02 작성하기 12:43
header script 작성하기 06:17
섹션 4. Desktop navigation 제작하기
navigation prototype 제작하기 11:35
navigation layout css 01 작성하기 14:12
navigation layout css 02 작성하기 06:08
navigation script 작성하기 09:51
섹션 5. Desktop visual section 제작하기
visual prototype 제작하기 06:27
visual layout css 01 작성하기 14:50
visual layout css 02 작성하기 09:06
visual script 작성하기 17:52
섹션 6. scroll animation
ani css layout 작성하기 07:16
사용자함수를 이용한 scroll animation script 작성하기 16:01
섹션 7. Desktop business section 제작하기
business prototype 제작하기 13:46
business layout css 01 작성하기 11:23
business layout css 02 작성하기 07:32
섹션 8. Desktop global section 제작하기
global prototype 제작하기 02:58
global layout css 작성하기 05:06
섹션 9. Desktop list section 제작하기
list prototype 제작하기 02:49
list layout css 작성하기 12:16
섹션 10. Desktop news section 제작하기
news prototype / css layout 작성하기 13:09
섹션 11. Desktop final section 제작하기
final prototype / css layout 작성하기 12:46
섹션 12. Desktop footer section 제작하기
footer prototype / css layout 작성하기 09:42
섹션 13. Tablet layout 제작하기
tablet css layout 01 작성하기 08:13
tablet css layout 02 작성하기 14:05
tablet css layout 03 작성하기 07:47
tablet allmenu script 작성하기 10:17
섹션 14. Mobile layout 제작하기
mobile css layout 01 작성하기 13:00
mobile css layout 02 작성하기 12:18
mobile css layout 03 작성하기 08:56
mobile css layout 04 작성하기 07:20
강의 게시일 : 2020년 12월 01일 (마지막 업데이트일 : 2020년 12월 01일)
수강평
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
아직 평가를 충분히 받지 못한 강의 입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!😄️️

53,900원

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