Thumbnail
개발 · 프로그래밍 웹 개발

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

(4.9)
18개의 수강평 ∙  108명의 수강생

33,000원

지식공유자: 이룸코딩
총 50개 수업 (3시간 48분)
수강기한: 
무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유

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

이론은 핵심만 빠르게. 우리 글 말고 진짜 코드로 배웁시다! 반복 학습으로 자연스럽게 익숙해지는 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 독학백서』 저자
  • 『자바스크립트 독학백서』 저자

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

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

HTML5 독학백서 (클릭)
CSS3 독학백서 (클릭)

이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
HTML & CSS 기초 문법 공부를 이제 막 끝내신 분들
Flex & Grid 실습 예제를 경험해보고 싶으신 분들
포트폴리오 작성을 앞두고 레이아웃 연습이 필요하신 분들
복잡한 Flex & Grid 한 방에 끝내고 싶으신 분들
📚
선수 지식,
필요할까요?
HTML 기초 문법
CSS 기초 문법

안녕하세요
이룸코딩 입니다.
이룸코딩의 썸네일

이룸코딩 ErumCoding

함께 꿈을 코딩해요! 🚀

커리큘럼 총 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일)
수강평 총 18개
수강생분들이 직접 작성하신 수강평입니다.
4.9
18개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
kkkh0712 thumbnail
5
css 쉽게 배우기 좋아요
2023-02-03
이종운 thumbnail
5
다른 강의들은 지루하고 이해도 안되서 웹개발자 포기할까 고민도 많이했는데 선생님 덕분에 즐겁게 공부해서 감사합니다
2023-03-06
손기명 thumbnail
5
잘 들었습니다.
2023-01-15
gangsugi thumbnail
5
어느정도는 알고 있었지만 혹시라도 모르는부분이 빠졌을까 해서 한번 들어봤는데 도움이 되었습니다. 설명도 차근차근하게 해주셔서 지루하지않고 재미있게 들었습니다. 좋은 강의였어요^^
2023-05-22
대랭 thumbnail
5
기초 강의듣고 이어듣기좋아요 이거 듣고 들을 다음 난이도 부분도 있으면 좋겠네요
2021-09-19