이론은 핵심만 빠르게. 우리 글 말고 진짜 코드로 배웁시다! 반복 학습으로 자연스럽게 익숙해지는 Flex와 Grid! 😎 (HTML5 독학백서, CSS3 독학백서 저자 직강)
이런 걸
배워요!
CSS Flex 레이아웃
CSS Grid 레이아웃
CSS 미디어쿼리 작성법
폰트 어썸 & 구글 웹 폰트 사용법
CSS, 이제는 실전이다!
복잡한 Flex & Grid, 한방에 끝내보세요.
Flex와 Grid 기능은 외워야 할 속성의 개수도 많고, 심지어 생긴것도 다 비슷해요. 그렇다 보니까 막상 듣거나 보면 이 속성들이 무슨 기능을 하는지는 알겠는데, 정작 내가 생각한 레이아웃을 Flex와 Grid를 사용해서 작성하는 방법을 모르겠다는 분들이 많습니다.
기초와 실전 프로젝트 제작 그 애매한 중간 어딘가! 그곳에서 헤매고 계신 분들. 이 강의는 이런 분들께 딱 적합한 강의라고 생각해요. 실습 예제를 따라하다보면 금새 감을 잡으실 수 있을거에요.
취업 또는 이직을 준비하고 있거나, 이제 막 프로그래밍에 입문한 친구들을 상담하다 보면 '디자인'을 간과하고 있는 친구들이 꽤 많습니다. 개발자는 HTML, CSS 몰라도 되지 않느냐- 는 질문도 많이 받는데요.
저는 개발자를 농부에 비유하곤 합니다. 개발이 사과 농사라면, 내가 개발한 서비스는 소비자에게 판매할 사과가 되겠죠? 레이아웃을 작성하는 것은 사과를 사과 상자에 포장하는 과정과도 같아요. 개발자도 최소한 내 상품을 의도한 대로 포장할 수 있어야 합니다!
제가 Flex와 Grid를 가르치면서 가장 많이 들은 질문이 바로 수많은 Flex와 Grid의 기능들을 다 외워야 하냐는 것이었어요. 이 강의를 듣고 나면, 이제 Flex와 Grid 레이아웃으로 내가 생각하는 것을 만들기 위해서 모든 기능을 외우거나 써야 하는 게 아니라는 것을 확실히 알게 되실 거예요!
핵심 기능만 잘 파악하고 있으면 많은 코드를 쓰지 않고도, 쉽고 간단하게 내가 원하는 레이아웃을 작성할 수 있습니다!
Q. 비전공자도 들을 수 있는 강의인가요?
A. 네! HTML과 CSS는 비전공자, 중학생, 고등학생 친구들도 쉽게 배울 수 있어요. 단, HTML과 CSS 기초 강의를 먼저 듣고 오셔야 합니다. 기초 강의는 유튜브 <개발자 이도해> 채널에서 무료로 제공하고 있어요!
HTML5 & CSS3 기초 문법 올인원
쉽고 빠르게 배우는 웹의 기초
Q. 핵심 기능만 집중적으로 실습하는 이유가 뭔가요?
A. 수많은 학생들을 가르쳐본 결과 (?) 10가지 기능을 가르치기 위해서 각각 한 가지씩 예제를 보여주는 것보다, 정말 그 기능을 다루기 위해 꼭 알아야 하는 핵심 기능 3가지 이하에 집중해서 각각 3~4개의 예제를 반복적으로 학습하게 하는 것이 훨씬! 정말 훨씬 더 효과가 좋았어요. 이 강의에서 목표하는 바도 그와 같기 때문에, 수업을 들은 이후에 당장 생각하는 것을 화면에 옮기기 위한 핵심 기능을 집중적으로 실습하게끔 수업을 구성했습니다.
Q. 수업 내용을 어느 수준까지 다루나요?
A. 난이도를 입문, 기초, 중급, 고급으로 나눈다면 기초에 해당하는 난이도입니다.
풀스택 개발자이자 프로그래밍 강사로 활동하고 있습니다.
학습 대상은
누구일까요?
HTML & CSS 기초 문법 공부를 이제 막 끝내신 분들
Flex & Grid 실습 예제를 경험해보고 싶으신 분들
포트폴리오 작성을 앞두고 레이아웃 연습이 필요하신 분들
복잡한 Flex & Grid 한 방에 끝내고 싶으신 분들
선수 지식,
필요할까요?
HTML 기초 문법
CSS 기초 문법
전체
50개 ∙ (3시간 48분)
오리엔테이션
03:25
박스 모델과 box-sizing
06:00
웹 레이아웃 기술의 변천사
03:22
미디어 쿼리 (Media Query)
07:28
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
flex-basis
02:44
flex-grow
02:17
flex-shrink
02:08
flex
01:26
align-self
01:54
order
01:47