실전!웹사이트제작 Step By Step! (클론코딩 : crew a la Mode 사이트제작 - 반응형웹) - goormEDU
오늘은 9름데이!
지금 모든 강좌 10% 추가 할인10% 추가 할인받으세요.
ll:ll:ll후에 종료됩니다.
All Lectures
RouteNoticeQ&A

실전!웹사이트제작 Step By Step! (클론코딩 : crew a la Mode 사이트제작 - 반응형웹)

‘크루알라모드’ 메인 페이지 만들기

Lecture Introduction
Difficulty
Normal
Category
Web Programming - Programming
Target Audience
- HTML/CSS기초는 있으나 웹페이지 제작이 두려우신 분
- 그래픽 디자이너가 프론트앤드개발자로 전향하고 싶으신 분
- 웹디자이너, 퍼블리셔로 취업을 위해 빠르게 포트폴리오를 제작하고 싶으신 분
- 웹디자이너, 퍼블리셔로 취업을 위해 다양한 레이아웃을 설계 구현하고 싶은 분
- 확장성을 고려한 인터랙티브 웹을 빠르게 구현하고 싶으신 분


강좌의 특별함 실제 웹 페이지를 따라 만들며 배워요 HTML과 CSS에 대한 기본 지식을 갖춘 분들을 위한 수업 이 강좌는 출시되어 있는 크루알라모드 메인 페이지(https://crewalamode.com/)를 그대로 만들어 보는 과정입니다. 평소 반응형 웹을 보며, ‘이런 건 어떻게 만들까’, ‘내 프로젝트에 적용해보고 싶다’라고 생각하셨다면 놓치지 마세요. 다양한 라이브러리와 플러그인을 활용해 화려한 인터랙티브 웹을 만들 수 있도록 도와드립니다. 복잡한 레이아웃도 쉽고 빠르게 제작할 수 있도록 실무 핵심 노하우까지 아낌없이 전해드릴게요!



함께 배워볼 거예요 꼭 필요한 인터랙티브 요소만 쏙쏙
실력 있는 디자이너, 퍼블리셔로 인정받기 위해서는 속도와 확장성이 중요합니다. 이 강좌에서는 빠른 시간에 높은 퀄리티를 이끌어내기 위한 실무 핵심 노하우와 업무 스킬을 그대로 전해드립니다. 웹 페이지 제작에 필요한 jQuery를 기초부터 활용까지 배우고, 풀사이즈 동영상이 들어간 반응형 웹 페이지를 만들어 볼 거예요. 완강 후에는 스크롤 애니메이션, 텍스트 애니메이션 등을 적용해 더 풍부한 웹 페이지를 구현할 수 있습니다.


함께 만들어볼 거예요 반응형 웹 페이지를 쉽고 빠르게

● 다양한 스크롤 애니메이션

● 반응형 웹 페이지 - PC


● 반응형 웹 페이지 - Tablet


● 반응형 웹 페이지 - Mobile




추천 수강자 이런 분께 추천해요

  • HTML/CSS 기초는 배웠는데 웹 페이지 제작이 어려우신 분
  • 웹 디자이너, 퍼블리셔 취업용 포트폴리오를 빠르게 제작하고 싶으신 분
  • 다양한 웹 페이지 레이아웃을 설계하고 구현해 보고 싶으신 분



강의자 실무+강의 경력 20년차 J.young입니다


안녕하세요. 저는 20여 년간 웹 디자인 & 앱 개발회사에서 디자인팀 총괄로 팀을 운영하며, 틈틈이 대학교와 직업훈련기관에서 UI·UX 디자인, 웹 디자인, 웹 퍼블리셔, 프론트엔드 개발 강의를 하고 있습니다. 코딩이나 디자인에 대한 기초가 전혀 없는 학생들도 전문가(웹 디자이너/퍼블리셔)로 성장할 수 있도록 지도하고 있습니다. 언제든 궁금하신 점이 있다면 댓글 남겨주세요. 최선을 다해 도와드리겠습니다. 잘난웹디 유튜브 채널도 놀러 오세요:) 실무 경력

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

강의 경력

  • 인천문예전문학교 (멀티미디어웹강의)
  • 서울현대직업전문학교 (스마트웹 & 앱강의)
  • 폴리텍대학 (디자인강의)
  • 한국IT전문학교 (멀티미디어디자인 강의)
  • 두드림직업전문학교 (디자인강의)
  • 광명시여성비전센터 (웹디자인강의)
  • 이젠컴퓨터학원강의 분당점 (디자인강의)
  • 더조은컴퓨터아카데미 서초점 ([웹디자인기능사]디지털웹&앱디자인-과정평가형자격-A)
  • 하이미디어컴퓨터학원 서초점 (영상을 활용한 UI/UX 웹디자인&웹퍼블리셔)
Preview
Expand All
  • 01
    Intro
  • 강의 소개 영상
Curriculum
Expand All
  • 01
    Intro
  • 강의 소개 영상
    브라켓 설치 & 결과파일 첨부
    구름IDE
  • 02
    1. header 영역 제작하기
  • header 영역 제작
  • 03
    2. visual 영역 제작하기
  • visual 영역 제작
  • 04
    3. contents 영역 제작하기
  • contents 영역(section.about)
    contents 영역(section.approach)
    contents 영역(section.sectore)
    contents 영역(section.service)
    contents 영역(section.journal)
  • 05
    4. footer 영역 제작하기
  • footer 영역 제작
  • 06
    5. fixed header (픽스헤더 제작)
  • fixed header 제작
  • 07
    6. Scroll animation,Text animation
  • 스크롤/텍스트 애니메이션 제작_1
    스크롤/텍스트 애니메이션 제작_2
    스크롤/텍스트 애니메이션 제작_3
  • 08
    7. GNB 네비게이션 제작하기
  • GNB 네비게이션 제작
  • 09
    8. Responsive (반응형 웹 제작)
  • 반응형 웹 제작_(max-width:1400px)
    반응형 웹 제작_(max-width:1024px)
    반응형 웹 제작_(max-width:768px)
    반응형 웹 제작_(max-width:500px)
Instructor Introduction
TipFor more detailed information, such as other courses and reviews from the instructor, you can view the instructor introduction page by clicking on their profile.

Lecture Reviews
28,000

Average Rating
5.0
Difficulty
Normal
Lecture Period
Unlimited