13가지 예제로 배우는 CSS Flex & Grid 핵심 기능

Name: 13가지 예제로 배우는 CSS Flex & Grid 핵심 기능
Price: 33000 KRW

이론은 핵심만 빠르게. 우리 글 말고 진짜 코드로 배웁시다! 반복 학습으로 자연스럽게 익숙해지는 Flex와 Grid! 😎 (HTML5 독학백서, CSS3 독학백서 저자 직강)

(4.9) 수강평 18개

수강생 120명

이룸코딩

HTML/CSS Flex

초급자를 위해 준비한
[웹 퍼블리싱, 웹 개발] 강의입니다.

이런 걸 배울 수 있어요

CSS Flex 레이아웃
CSS Grid 레이아웃
CSS 미디어쿼리 작성법
폰트 어썸 & 구글 웹 폰트 사용법

CSS, 이제는 실전이다!
복잡한 Flex & Grid, 한방에 끝내보세요.

강의 주제 📖

핵심 기능의 기본기 다지기!

CSS의 레이아웃 전용 기능, Flex와 Grid의 핵심 이론을 엑기스만 모아모아 빠르게!
실습 예제를 따라 만들며 실제로 레이아웃을 작성할 때 Flex와 Grid를 사용하는 방법까지!

이 강의, 왜 들어야 할까요? 🚀

이론은 아는데 생각한 대로 만들질 못하겠어요 😥

Flex와 Grid 기능은 외워야 할 속성의 개수도 많고, 심지어 생긴것도 다 비슷해요. 그렇다 보니까 막상 듣거나 보면 이 속성들이 무슨 기능을 하는지는 알겠는데, 정작 내가 생각한 레이아웃을 Flex와 Grid를 사용해서 작성하는 방법을 모르겠다는 분들이 많습니다.

기초와 실전 프로젝트 제작 그 애매한 중간 어딘가! 그곳에서 헤매고 계신 분들. 이 강의는 이런 분들께 딱 적합한 강의라고 생각해요. 실습 예제를 따라하다보면 금새 감을 잡으실 수 있을거에요.

네? 저는 웹 개발자가 되고 싶은데요?

취업 또는 이직을 준비하고 있거나, 이제 막 프로그래밍에 입문한 친구들을 상담하다 보면 '디자인'을 간과하고 있는 친구들이 꽤 많습니다. 개발자는 HTML, CSS 몰라도 되지 않느냐- 는 질문도 많이 받는데요.

저는 개발자를 농부에 비유하곤 합니다. 개발이 사과 농사라면, 내가 개발한 서비스는 소비자에게 판매할 사과가 되겠죠? 레이아웃을 작성하는 것은 사과를 사과 상자에 포장하는 과정과도 같아요. 개발자도 최소한 내 상품을 의도한 대로 포장할 수 있어야 합니다!

강의 특징 ✨

A부터 Z까지! Flex와 Grid의 기능을 핵심만 빠르게 정리합니다.
실습 예제를 통해 핵심 기능의 기본기를 다집니다.

이 강의를 듣고 나면 📜

이걸... 다 외워야 하나요? 😱

제가 Flex와 Grid를 가르치면서 가장 많이 들은 질문이 바로 수많은 Flex와 Grid의 기능들을 다 외워야 하냐는 것이었어요. 이 강의를 듣고 나면, 이제 Flex와 Grid 레이아웃으로 내가 생각하는 것을 만들기 위해서 모든 기능을 외우거나 써야 하는 게 아니라는 것을 확실히 알게 되실 거예요!

핵심 기능만 잘 파악하고 있으면 많은 코드를 쓰지 않고도, 쉽고 간단하게 내가 원하는 레이아웃을 작성할 수 있습니다!

예상 질문 Q&A 💬

Q. 비전공자도 들을 수 있는 강의인가요?

A. 네! HTML과 CSS는 비전공자, 중학생, 고등학생 친구들도 쉽게 배울 수 있어요. 단, HTML과 CSS 기초 강의를 먼저 듣고 오셔야 합니다. 기초 강의는 유튜브 <개발자 이도해> 채널에서 무료로 제공하고 있어요!

HTML5 & CSS3 기초 문법 올인원
쉽고 빠르게 배우는 웹의 기초

Q. 핵심 기능만 집중적으로 실습하는 이유가 뭔가요?

A. 수많은 학생들을 가르쳐본 결과 (?) 10가지 기능을 가르치기 위해서 각각 한 가지씩 예제를 보여주는 것보다, 정말 그 기능을 다루기 위해 꼭 알아야 하는 핵심 기능 3가지 이하에 집중해서 각각 3~4개의 예제를 반복적으로 학습하게 하는 것이 훨씬! 정말 훨씬 더 효과가 좋았어요. 이 강의에서 목표하는 바도 그와 같기 때문에, 수업을 들은 이후에 당장 생각하는 것을 화면에 옮기기 위한 핵심 기능을 집중적으로 실습하게끔 수업을 구성했습니다.

Q. 수업 내용을 어느 수준까지 다루나요?

A. 난이도를 입문, 기초, 중급, 고급으로 나눈다면 기초에 해당하는 난이도입니다.

지식공유자 소개 ✒️

이도해

풀스택 개발자이자 프로그래밍 강사로 활동하고 있습니다.

『HTML5 독학백서』 저자
『CSS3 독학백서』 저자
『자바스크립트 독학백서』 저자

실습 예제 살~짝 미리보기 😎

저자 직강!
도서를 함께 확인해보세요.

_{HTML5 독학백서 (클릭)}

_{CSS3 독학백서 (클릭)}

이런 분들께
추천드려요!

학습 대상은
누구일까요?

HTML & CSS 기초 문법 공부를 이제 막 끝내신 분들
Flex & Grid 실습 예제를 경험해보고 싶으신 분들
포트폴리오 작성을 앞두고 레이아웃 연습이 필요하신 분들
복잡한 Flex & Grid 한 방에 끝내고 싶으신 분들

선수 지식,
필요할까요?

HTML 기초 문법
CSS 기초 문법

안녕하세요
이룸코딩입니다.

4,220

명

수강생

143

개

수강평

개

답변

4.9

점

강의 평점

개

강의

이룸코딩 ErumCoding

함께 꿈을 코딩해요! 🚀

홈페이지 : erumcoding.com
유튜브 : @erumcoding
강사 소개 : dohaelee.github.io

커리큘럼

전체

50개 ∙ (3시간 48분)

섹션 1. Intro

6개 ∙ (21분)

오리엔테이션
03:25
HTML & CSS 기초 무료 강의
박스 모델과 box-sizing
06:00
웹 레이아웃 기술의 변천사
03:22
미디어 쿼리 (Media Query)
07:28
min-content, max-content
01:04

섹션 2. Flex - Container

7개 ∙ (20분)

Flex 소개
03:46
Axis, flex-direction
02:21
flex-wrap
01:53
flex-flow
01:23
justify-content
03:54
align-items
03:55
align-content
02:57

섹션 3. Flex - Item

6개 ∙ (12분)

flex-basis
02:44
flex-grow
02:17
flex-shrink
02:08
flex
01:26
align-self
01:54
order
01:47

섹션 4. Flex - 실습 예제

7개 ∙ (1시간 11분)

섹션 5. Grid - Container

8개 ∙ (17분)

섹션 6. Grid - Item

5개 ∙ (7분)

섹션 7. Grid - Others

3개 ∙ (3분)

섹션 8. Grid - 실습 예제

6개 ∙ (1시간 13분)

섹션 9. 마치는 말

2개 ∙ (1분)

강의 게시일: 2021. 09. 09.

마지막 업데이트일: 2021. 09. 10.

수강평

아직 충분한 평가를 받지 못한 강의입니다.

모두에게 도움이 되는 수강평의 주인공이 되어주세요!