한 눈에 끝내는 CSS/JS 애니메이션 - goormEDU
Family Service
구름 EDU 로고
Sign InSign Up
All Lectures
RouteNoticeQ&A
Teacher Applicationfor Business

한 눈에 끝내는 CSS/JS 애니메이션

동적인 웹 서비스 만들기! 두고두고 꺼내 보는 CSS/JS 애니메이션 기초 강좌

Lecture Introduction
Difficulty
Normal
Category
Web Programming - Programming
Target Audience
- HTML과 CSS에 대한 기본 사용법에 익숙해지신 분
- JS공부 후 좀 더 동적인 웹서비스를 제작하고 싶으신 분




☁ ANYONE CAN DEVELOP ☁
<한 눈에 끝내는 시리즈>는  모두가 개발자가 될 수 있도록 개발자 성장 중심의 생태계를 만들어 나가고 있는 구름에서 만든 오리지널 강좌입니다. 프로그래밍 지식이 없는 분들도 쉽고 재밌게 배울 수 있도록 꼭 필요한 내용만 골라 기획했습니다. 이미 어느 정도 프로그래밍 지식을 가지고 계신 분이라면 두고두고 꺼내보는 문법 기초 강의가 될 거예요. 프로그래밍을 쉽고 간편하게 배우고 싶다면 구름에서 시작해 보세요. 여러분의 개발 커리어 여정에 끝까지 함께 하겠습니다. 




왜 내 웹페이지는 심심해 보일까?
웹 페이지를 만들긴 만들었는데 어딘가 심심해 보인다면? CSS와 JavaScript 애니메이션이 필요한 때입니다. CSS와 JavaScript 애니메이션이라고 하니 어렵게 느껴지시나요? CSS와 JavaScript를 이용할 뿐 여러분이 평소에 접하는 애니메이션과 같은 개념이라고 생각해 주세요! 


왜 배워야 하나요? 
CSS Animation 또는 JS Animation이라는 키워드를 알고 계신다면 일반적으로 HTML과 CSS, Javascript로 간단한 웹 서비스를 구성해본 분이실 겁니다. 딱 봤을 땐 마음에 쏙 드는 디자인인데, 웹 페이지 내에서 무언가 행동을 취해 변화를 만들어낼 때는 역동적인 움직임이 없어 아쉬운 부분이 있었을 거예요. 이때 필요한 것이 바로 CSS Animation과 JS Animation입니다. 



이런 분에게 추천해요 
- 움직임이 있는 정적인 페이지를 만들고 싶은 분 
- '한 눈에 끝내는 HTML5/CSS3'를 완강하여 HTML과 CSS에 대한 기본 사용법에 익숙해지신 분
- 자바스크립트를 공부한 뒤 좀 더 동적인 웹 서비스를 제작하고 싶은데 어떻게 해야 할 지 고민되는 분


천천히 읽으며 따라하는 CSS/JS 애니메이션
모든 지식이 그렇듯, 좀 더 상위 단계로 나아가는 과정이 그리 쉽진 않습니다. 그렇기 때문에 이 과정에서는 천천히 읽으며 실습을 따라 해볼 거예요. Animation 초보자도 보다 쉽게 이해할 수 있도록 최대한 풀어 설명드리고자 합니다. 


설치 없는 실습 환경 
온라인 프로그래밍 강의를 한 번이라도 수강해 본 적이 있다면 실습을 위해 따로 실습 환경을 구축하거나 웹페이지를 번갈아가며 실습했던 경험이 있으실 텐데요. 구름EDU에서는 이미 모두 갖추어진 실습환경에서 직접 코드를 작성하고 실행하며 CSS/JS 애니메이션의 기본을 다질 수 있어요! 쉽게 말하면, 별도의 설치 없이 한 화면에서 이론과 실습을 동시에 할 수 있다는 뜻입니다. 기본 개념을 예시 코드로 바로 실행해보면서 학습할 수 있는 가장 효과적인 강좌입니다! 




안녕하세요. 장순호입니다 
개발 문화를 사랑하며 UI/UX 디자인에 관심이 많은 프론트엔드 웹 개발자입니다. 제 Github에 놀러 오세요 : )
- 現 IT엔터테인먼트 우물128번지 소속 웹 분야 개발자 
- 리디북스 Web Animation With 냥이집사 공동저자
- 前 멀티캠퍼스 기초 파이썬 강사 



Preview
Expand All
Curriculum
Expand All
  • 01
    시작하기에 앞서
    • 강의의 방향
    실습 환경 설정 - 구름IDE
  • 02
    CSS Animation1. transition
    • 시작하기 전에
    Preview
    delay
    Preview
    duration
    Preview
    property
    timing-function
    transition
    정리
  • 03
    CSS Animation2. transform
    • 시작하기 전에
    scale
    rotate, translate
    skew, origin
    정리
  • 04
    CSS Animation3. keyframe 개념과 활용
    • 시작하기 전에
    Keyframe의 시작
    animation과 관련된 프로퍼티_1
    animation과 관련된 프로퍼티_2
    animation과 관련된 프로퍼티_3
    Loading Spinner 만들기
    Loading Bar 만들기
    정리
  • 05
    JS Animation1. DOM
    • 시작하기 전에
    DOM이 무엇이길래?
    DOM 접근 1
    DOM 접근 2
    DOM 조작하기 1: 요소 스타일
    DOM 조작하기 2: 요소 스타일 수정
    정리
  • 06
    JS Animation2. Event
    • 시작하기 전에
    이벤트(Event)
    이벤트 핸들러(Event Handler)
    this와 Event 객체_1
    this와 Event 객체_2
    Prevent Default
    정리
  • 07
    JS Animation3. Animation
    • 시작하기 전에
    Web Animations
    classList
    Transition Event_1
    Transition Event 2
    Animation Event
    Timer Function
    정리
Instructor Introduction
user
구름Teacher
Lecture Reviews
Ends in D-0
￦59,000
￦
47,200
(20%)
Average Rating
5.0
Difficulty
Normal
Lecture Period
Unlimited