메일 인증하면, 매일 특별한 선물💌
Thumbnail
인프런 추석할인 중(D-2)
NEW 크리에이티브 웹앱 디자인
13가지 예제로 배우는 CSS Flex & Grid 핵심 기능
9명이 수강하고 있어요.

20%

35,200원

44,000원
지식공유자 : 개발자 이도해
총 50개 수업˙총 3시간 48분
평생 무제한 수강
수료증 발급 강의
입문 초급 대상 중급이상
폴더에 추가 15 공유
초급자를 위해 준비한
[웹앱 디자인, 웹 개발] 강의입니다.

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

✍️
이런 걸
배워요!
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 독학백서』 저자입니다.
(2021년 하반기~2022년 상반기 경 『자바스크립트 독학백서』 출간 예정)

프리랜서 풀스택 개발자, 프로그래밍 강사를 함께하고 있습니다.


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

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

HTML5 독학백서 (클릭)
CSS3 독학백서 (클릭)
지식공유자가 알려주는
강의 수강 꿀팁!
🎓
이런 분들께
추천드려요!
HTML & CSS 기초 문법 공부를 이제 막 끝내신 분들
Flex & Grid 실습 예제를 경험해보고 싶으신 분들
포트폴리오 작성을 앞두고 레이아웃 연습이 필요하신 분들
복잡한 Flex & Grid 한 방에 끝내고 싶으신 분들
📚
선수 지식,
필요한가요?
HTML 기초 문법
CSS 기초 문법

안녕하세요
개발자 이도해 입니다.
개발자 이도해의 썸네일
  • 출판사 달무리 대표
  • 독학백서 시리즈 저자
  • 프리랜서 풀스택 개발자
  • 프로그래밍 강사
  • 유튜브 <개발자 이도해> 채널 운영
커리큘럼 총 50 개 ˙ 3시간 48분의 수업
이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. Intro
오리엔테이션 미리보기 03:25
HTML & CSS 기초 무료 강의
박스 모델과 box-sizing 06:00
웹 레이아웃 기술의 변천사 미리보기 03:22
미디어 쿼리 (Media Query) 07:28
min-content, max-content 01:04
섹션 1. Flex - Container
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
섹션 2. Flex - Item
flex-basis 02:44
flex-grow 02:17
flex-shrink 02:08
flex 01:26
align-self 01:54
order 01:47
섹션 3. Flex - 실습 예제
중첩된 플렉스 레이아웃 05:23
일정 비율을 유지하는 내비게이션 04:50
반응형 헤더 09:06
로그인 UI 16:05
Music Player 13:50
Movie Card 11:58
반응형 레이아웃 10:22
섹션 4. Grid - Container
Grid 소개 00:48
grid-template-columns / rows 02:27
gap, column / row-gap 01:03
grid-auto-columns / rows 02:09
justify / align / place-content 02:52
justify / align / place-items 02:06
grid-template-areas 03:28
grid-auto-flow 02:16
섹션 5. Grid - Item
grid-column-start / end 01:42
grid-row-start / end 00:56
grid-column / row 01:38
justify / align / place-self 02:07
order 00:56
섹션 6. Grid - Others
repeat 01:01
minmax 00:56
auto-fill, auto-fit 02:00
섹션 7. Grid - 실습 예제
메뉴 버튼 08:10
계산기 미리보기 07:20
쇼핑몰 상품 리스트 08:17
뉴스 페이지 13:20
매거진 스타일 18:12
포트폴리오 (이력서) 페이지 18:19
섹션 8. 마치는 말
마치며 01:03
전체 코드
강의 게시일 : 2021년 09월 10일 (마지막 업데이트일 : 2021년 09월 10일)
수강평
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
인프런 추석할인 중(D-2)

20%

35,200원

44,000원
폴더에 추가 15 공유
지식공유자 : 개발자 이도해
총 50개 수업˙총 3시간 48분
평생 무제한 수강
수료증 발급 강의
입문 초급 대상 중급이상
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의를
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스