인프런 영문 브랜드 로고
인프런 영문 브랜드 로고
NEW
개발 · 프로그래밍

/

프론트엔드

모던 웹 인터렉티브 CSS3 [PART2/3]

초등학생 코딩교육부터 시작하여 IT소프트웨어학과의 고등학생, 컴공과 대학생, 비전공자인 취준생을 대상으로 15년 넘게 코딩교육에 전념해온 현직 스타강사 영코디 킴쌤의 쉽고 재미있는 코딩강의를 이제 오프라인 뿐만 아니라 온라인에서도 만나실 수 있습니다. 500여명이 넘는 프론트엔드, 백엔드, 풀스택, 웹 개발자를 배출해온 영코디 킴쌤과 함께라면 당신의 개발자 꿈도 곧 현실이 됩니다!

4명 이 수강하고 있어요.

Thumbnail

입문자를 위해 준비한
[프론트엔드, css3] 강의입니다.

이런 걸
배워요!

  • 다양한 실무 페이지의 스타일과 애니메이션을 직접 제작해봅니다

  • 캐릭터가 움직이는 sprite animation을 적용하여 움직이는 캐릭터 웹페이지를 만들어 봅니다

  • javascript를 사용하지 않고도 인터렉티브한 웹을 css3를 사용하여 구현해봅니다

  • 반응형 웹의 의미를 알고 핵심코드가 무엇인지 파악해봅니다

프론트엔드, HTML/CSS, frontend, 웹 디자인, 국비지원 부트캠프, 클론코딩

모던 웹 인터렉티브 CSS3는 [기본 스타일부터 인터렉티브한 애니메이션까지의 개념을 배우며 바로바로 적용해봄으로써 실전스킬을 빠르게 향상시킬 수 있습니다.]

CSS는 Cascading Style Sheet 의 약자로 Cascading은 계층적인, 폭포수 같은 의미를 가지고 있는 단어입니다. css는 말 그대로 html 구조의 부모, 자식 관계를 계층적으로 선택하여 원하는 요소에 원하는 스타일의 색이나 모양, 애니메이션을 입히고 사용자의 마우스 움직임이나 클릭 이벤트에 반응하여 컨텐츠 요소들이 동작하여 인터랙티브 웹으로 작동하므로 사용자가 보기에 지루하지 않고 흥미롭고 재미있는 웹을 디자인 할 수 있는 요소들을 제작하여 적용합니다. 또한, 다양한 모바일 디자인, 웹 디자인, 애니메이션 디자인, 반응형 디자인 등 실무 사이트를 클론 코딩하며 다양한 구조와 스타일의 HTML/CSS를 반복적으로 연습하여 다양한 실습경험을 쌓음으로써 css에 완벽한 자신감을 가지고 즐겁게 코딩하여 실력이 쑥쑥 향상되는 기쁨을 느끼게 됩니다.

👩🏻‍💻 진짜 기초부터 시작하는

비전공자를 위한 프론트엔드, 백엔드, 풀스택 취업코스

모던 웹 인터렉티브 CSS3 강의 특징

15년의 강의 노하우를 꾸욱 눌러담은 강의 🎯


초등학교 코딩교육, IT소프트웨어학과의 고등학생, 컴공과 대학생, 비전공자 취준생을 대상으로 15년 넘게 코딩교육에 전념해온 현직 스타강사 영코디 킴쌤의 그동안의 노하우를 꾹꾹 눌러담은 쉽고 재미있는 CSS3 코딩강의입니다.

CSS의 기초 걸음마부터 시작하여 고급 애니메이션과 인터렉티브한 웹 제작 스킬까지 한꺼번에 모두 담았습니다. 웹 디자인, 클론코딩,pure-css-parallax

쉽고 재미있는 설명에 진심인 편 👨‍🏫


영코디 킴쌤의 쉽고 재미있는 설명과 특유의 암기법을 통해 왕 초보자도 단계별로 쉽게 이해하며 성장할 수 있도록 부단히 노력하는 킴쌤입니다.

또한, 다양한 클론코딩을 통해 실무 웹개발을 점진적으로 익힐 수 있습니다. 진짜 기초부터 시작하는 비전공자를 위한 웹디자인, 프론트엔드, 백엔드, 풀스택 취업코스를 통해 개발자로의 꿈에 도전해보세요.

css3

챕터마다 SELF_EX를 풀며 실력점검하기


챕터마다 제공되는 SELF_EX 문제를 통해 학습한 내용을 스스로 점검하며 실력을 쌓을 수 있습니다. 각 단원의 핵심 개념과 실습 내용을 기반으로 구성된 문제들은 CSS 학습의 이해도를 확인하고 부족한 부분을 보완하는 데 큰 도움을 줍니다.

반복 학습과 문제 풀이를 병행하면서 자연스럽게 실력이 향상되어 꾸준한 성장을 이어가도록 돕는 중요한 체크포인트 역할을 합니다.

📚 모던 웹 인터렉티브 CSS3에서는 이런 것들을 배워요! 

sprites기법, sticky 속성 등을 이용해 네비가 있는 mikimottes 실무 애니메이션 웹사이트 제작

입체적인 공간감을 주는 parallax web 제작기법을 활용한 웹제작

animate.css 라이브러리를 활용하여 손쉽게 다양한 애니메이션을 사이트에 즉각 적용하기

마우스 호버시 쇼핑몰 제품에 대한 설명이 보여지는 등, 쇼핑몰에서 많이 사용되는 쇼핑몰 제작 팁

클릭시 원하는 메뉴로 이동하는 동적인 네비게이션 제작

마우스 호버와 클릭시 재미있게 애니메이션되는 요소들을 다양하게 제작해보기

포토샵을 전혀 사용하지 않고도 코딩만으로 blending mode와 filter 등 다양한 보정 적용하기

2D, 3D transform을 활용하여 마우스에 반응하는 인터렉티브한 웹 제작해보기

Flex 최신기법을 활용하여 반응형 웹을 제작하는 원리의 이해와 다채로운 예제실습

🎬모던 웹 인터렉티브 CSS3 PART2 학습내용

  1. background의 다양한 속성을 이해하고 활용해봅니다.

  2. 스크롤시 공간감이 느껴지는 parallax web을 제작해봅니다.

  3. 캐릭터가 움직이는 애니메이션 웹을 제작해봅니다.

  4. 반응형 웹의 의미를 알고 핵심코드가 무엇인지 파악해봅니다.

  5. Transition 과 Animation 코딩으로 반응하는 인터렉티브한 웹을 만들어봅니다.

영코디 킴쌤은 현재 국비지원 부트캠프에서 frontend 디자이너, backend 개발자, 웹디자이너, fullstack 개발자 등을 500여명 넘게 계속적으로 배출해오고 있으며 '수강생들이 뽑은 지인들에게 추천하고 싶은 수업 1위' 에 지속적으로 랭크업 되고 있습니다.HTML/CSS, 웹 디자인, 클론코딩, 모바일 디자인, 국비지원 부트캠프

실제 수강평 확인 바로가기 | https://greenart.co.kr/community/student_review


2025년 2월까지 STEP01-STEP07 과정 모두 오픈예정입니다. 많은 관심 부탁드립니다.

👀 비전공자를 위한 풀스택 과정에서는 각 코스 과정별 무엇을 배우나요?

STEP01 | 비전공자를 위한 [HTML 스타터] 부트캠프 [해당과정 이동 클릭]

html의 의미와 기본코드 작성방법 및 레이아웃 짜기

웹개발을 한다는 것은 누구나 올 수 있는 상점을 온라인 상에 만드는 것과 같습니다. HTML은 Hyper Text Markup Language 의 약자로 웹페이지의 주요 핵심내용이 되는 정보들을 가지고 기본뼈대를 만드는 작업을 배웁니다.


STEP02 | 비전공자를 위한 [CSS스타일부터 인터렉티브 웹제작까지] 부트캠프 [현재 과정]

CSS의 의미와 기본코드 작성방법부터 원하는 스타일을 html에 적용하여 웹디자인하기

CSS는 Cascading Style Sheet 의 약자로 Cascading은 계층적인, 폭포수 같은 의미를 가지고 있는 단어입니다. css는 말 그대로 html 구조의 부모, 자식 관계를 계층적으로 선택하여 원하는 요소에 원하는 스타일의 색이나 모양, 애니메이션을 입히고 사용자의 마우스 움직임이나 클릭 이벤트에 반응하여 컨텐츠 요소들이 동작하여 작동하므로 사용자가 보기에 지루하지 않고 흥미롭고 재미있는 웹을 디자인 할 수 있는 요소들을 제작하여 적용합니다. 또한, 다양한 모바일 디자인, 웹 디자인, 애니메이션 디자인, 반응형 디자인 등 실무 사이트를 클론 코딩하며 다양한 구조와 스타일의 HTML/CSS를 반복적으로 연습하여 다양한 실습경험을 쌓음으로써 css에 완벽한 자신감을 가지고 즐겁게 코딩하여 실력이 쑥쑥 향상되는 기쁨을 느끼게 됩니다.


STEP03 | 비전공자를 위한 [JS부터 React까지] 부트캠프 [해당과정 이동 클릭]

바닐라 스크립트와 자바 스크립트 es6문법 익히고 React 활용하기

혹시, 리액트를 공부하다가 좌절하신 적이 있나요? 킴쌤 클래스에서는 리액트의 기초가 되는 자바스크립트를 단계적으로 학습하기 위해 바닐라 스크립트부터 자바스크립트 es6문법, 제이쿼리 등의 기본문법부터 다양한 실습예제를 통해 스크립트의 기본을 탄탄히 다진 후에 React의 다양한 문법의 이해와 실습을 통해 컴포넌트, state, 메모이제이션을 활용한 게시판과 회원기능을 구현하고 타입스크립트 문법을 익혀 ToDoList 실습예제를 제작하는 등, 포기하지 않고 리액트로 가는 길을 열어드립니다.


STEP04 | 비전공자를 위한 [반응형 웹 제작] 부트캠프 [해당과정 이동 클릭]

반응형 웹을 만들기 위한 @미디어쿼리의 이해와 사용법을 익히고 쉽게 반응형을 제작할 수 있는 프레임워크인 부트스트랩 습득하고 활용하기

디바이스 장치에 따라 레이아웃이 바뀌는 반응형 웹페이지 개발을 위해 부트스트랩(BOOTSTRAP)을 활용하는 방법에 대한 이론과 실습을 적절하게 분배하여 부트스트랩의 구성요소들을 이해하며 실습을 통하여 바로바로 확인해보고 실제 반응형 웹사이트를 구현해 완성해봅니다.

또한, 부트스트랩의 정해진 스타일대신 나만의 개성있는 스타일의 반응형 웹을 제작하고 싶은 분들을 위해 부트스트랩을 활용하지 않고 순수하게 html/css/jQuery 만을 활용하여 디바이스별로 다양한 레이아웃을 구현할 수 있는 실습을 한솥 도시락 반응형 웹제작을 통해 마스터해 봅니다.


STEP05 | 비전공자를 위한 [JAVA기초] 부트캠프

가장 기본적인 문법의 이해와 실습부터 시작하여 자바 기초와 중급문법 익히기

웹개발 백엔드의 가장 기본언어인 자바를 가장 기본적인 문법부터 시작하여 점진적으로 중급까지 익히고 다양한 예제실습을 통하여 스스로 원하는 프로그램을 코딩할 수 있는 능력을 자연스럽게 습득하게 됩니다.


STEP06 | 비전공자를 위한 [JAVA고급부터 DB실습까지] 부트캠프

자바 고급문법과 JDBC와 servlet의 이해와 실습

자바의 컬렉션 프레임워크는 collection 말 그대로 수집, 즉 저장하는 클래스를 자체적으로 내장하고 있는 내부 라이브러리로 데이터의 다양한 타입들을 한군데 묶어서 관리하고 저장할 수 있는 다양한 문법들을 익히고, 데이터베이스(DB)에 읽고 쓰고 수정, 삭제하는 CRUD 실습을 통해 SQL문법을 배우고 실습함으로써 웹개발 백엔드의 초석을 튼튼히 하는 밑바탕을 만듭니다.


STEP07 | 비전공자를 위한 [JSP부터 SpringBoot까지] 부트캠프

JSP부터 스프링 부트까지

혹시 최근 실무에서 가장 많이 사용되고 있는 스프링 부트부터 공부하다가 좌절한 경험이 있으신가요?

킴쌤 클래스에서는 스프링 부트를 완벽하게 이해하기 위해 가장 기초문법인 JSP부터 학습하여 이전세대에서 현재세대로의 백엔드 문법의 진화를 직접 체감하며 자연스럽게 개념과 사용법을 체득하고 웹개발 백엔드를 자동으로 알아서 구현해주는 스프링부트가 동작하는 원리를 이해합니다.

ORM, JPA, 엔티티의 기본개념과 활용, 스프링 시큐리티의 이해와 시큐리티를 활용한 회원기능 구현, junit test 의 실습과 h2콘솔의 사용법 등의 실습을 토대로 스프링 부트를 활용하여 회원과 게시판 기능이 있는 실무 웹사이트를 구현하고 깃허브로 협업하기까지 포트폴리오 제작을 위한 기본기를 완벽하게 숙지합니다.

수강 전 참고 사항

학습 자료

  • 수업에 사용되는 이미지나 완성된 파일, PDF교재를 다운받아 실습에 활용하실 수 있습니다.
    (해당 파일은 교육용 파일로 개인 실습용으로만 사용가능하며 무단으로 배포하실 수 없습니다.)

이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • 코딩을 처음 접하는 초등학생, 중학생, 고등학생, 대학생, 성인 누구나

  • 비전공자이지만 웹개발을 공부하여 프론트엔드, 백엔드 , 풀스택 개발자로 취업하고 싶은 취준생

  • 예제 몇 개씩만 다루는 단편적인 강의는 이제그만! CSS의 기초, 중급 이론부터 다양한 실습까지 하나의 강의로 모두 마스터하고싶다!

안녕하세요
영코디 킴쌤입니다.

수강생 수

161

수강평 수

6

강의 평점

5.0

강의 수

13

👩 이 강의를 만든 사람

[ 비전공자도 쉽고 재미있게 배우는 코딩! ] 을 목표로 15년 넘게 풀스택(백엔드, 프론트엔드) 및 영상, 코딩, 디자인, 빅데이터, 머신러닝 등을 강의하며 개발자 인력양성에 진심인 현직 직업훈련교사

[컴퓨터 1도 모르는 사람이 부업으로 월100만원 수입내보기 첫걸음] 의 저자

NCS 국가직무능력강의 고용노동부 평가 A등급 강사선정

수원그린컴퓨터아카데미 우수강사선정(2017, 2018, 2019 3년연속 최우수1등상 수상)

전) 삼성ODD 기획 개발팀 담당

가톨릭대학교 컴퓨터공학부 특강

용인송담대학 멀티미디어학부 특강 다수

  인프런의 부트스트랩3(BOOTSTRAP)를 활용한 반응형 웹페이지 만들기 약 10만명 구독을 기념으로 그동안 추가 강의에 대한 많은 요청을 DM으로 받아 풀스택 강의를 최신버전으로 기획 제작 및 업로드 중입니다. 여러분의 많은 관심과 따뜻한 댓글은 영코디 킴쌤의 강의제작에 큰 원동력이 됩니다.

느리지만 차근차근 질좋은 강의로 한걸음씩 여러분과 함께하겠습니다.

 

커리큘럼

전체

24개 ∙ (7시간 37분)

수업 자료

가 제공되는 강의입니다.

강의 게시일: 
마지막 업데이트일: 

수강평

아직 충분한 평가를 받지 못한 강의입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!