30분 요약강좌 시즌5 : 알잘딱깔센 flex & grid

수강생 1,282명

초급자를 위해 준비한
[웹 개발, 프론트엔드] 강의입니다.

알아서! 잘! 딱! 깔끔하고! 센스있게! 정리하는 flex & grid 책의 무료 강의입니다. 오픈소스 링크, 해당 책과 Notion 링크도 무료로 이용하실 수 있습니다. 비영리 프로젝트로 교재 활용도 허락 없이 가능합니다.

이런 걸
배워요!

Flex
Grid
성배 레이아웃

녹화 환경의 차이로 강의 영상별로 음량 및 음질에 차이가 있을 수 있으니 양해 부탁드립니다.

Flex & Grid 치트시트 웹 서비스

"flex&grid 실습, 치트시트, PDF 자료까지 한 곳에서!"

_{flexngrid.com}

_{전자책 보러가기 >>}

지식공유자 소개 ✒️

지식공유자 | 최수빈

한줄소개 | 주니어 개발자로서 처음 개발에 입문하는 분들도 프론트엔드의 핵심 개념들에 쉽게 접근할 수 있도록, 블로그와 유튜브를 통해 꾸준히 개발 콘텐츠를 제작하고 있습니다.

지식공유자 | 김예지

한줄소개 | 다양하고 새로운 지식을 습득하는 것에 재미를 느끼며 기록하는 과정을 즐깁니다. 주니어 개발자로서 탄탄한 기본기를 위해 같이 배워나가고 소통하며 부지런히 성장해 봅시다.

지식공유자 | 장효순

한줄소개 | 문서화와 지식공유에 관심이 많은 프론트엔드 개발자입니다. 글로 말하는 것을 좋아하는 기록덕후로, 블로그를 운영중입니다.

지식공유자 | 류재준

한줄소개 | 세상과 사람에 관심이 많은 주니어 개발자 입니다. 제가 사랑스럽게 어루만진 코드가 공공의 이익을 위해 널리널리 사용되었으면 하는 바람을 가지고 있습니다. 블로그와 미묘한 코드잔디밭, SNS로 함께 소통을 나누었으면 합니다.

지식공유자 | 허지현

한줄소개 | 코햄의 프론트앤드 유치원 원장 허지현입니다. 프론트앤드 개발자가 되고 싶은 모든 분들에게 도움이 되는 영상을 제작합니다.

지식공유자 | 임홍렬

한줄소개 | 빠르게 변화하는 세상에서 언제든 변화 할 준비가 된 주니어개발자입니다. 앞으로 많은 분들과 소통하며 긍정적인 영향력을 널리 퍼뜨리고 싶습니다.

지식공유자 | 여소희

한줄소개 | 메타인지를 통해 성장의 방향성에 대해 늘 고민하는 주니어 개발자입니다. 블로그를 통해 지식을 공유하고 소통하며 함께 성장하고 싶습니다.

지식공유자 | 임다현

한줄소개 | 모두에게 좀 더 편리한 세상을 만들고자 노력하는 주니어 개발자입니다. 함께 성장하는 즐거움을 널리 알리고 싶습니다.

코딩 입문, 필수 시청
알아서 잘 딱 깔끔하고 센스있게!

웹 서비스, 무료 전자책, 영상 강의 3단 콤보를 무료 오픈소스로 제공합니다.

Flex? Grid?

flex와 grid는 CSS에서 사용하는 레이아웃을 위한 최신 기법입니다.
flex는 1차원(X 또는 Y축의 한 방향) 레이아웃을, grid는 2차원(X, Y축 양쪽 방향) 레이아웃을 잡는 데 많이 활용합니다.

✅ flex와 grid의 대표적인 구성요소들을 웹 페이지 레이아웃을 예시로 쉽게 파악해 봅시다.
✅ 기본 활용법뿐만 아니라 다양한 레이아웃을 그려볼 수 있는 성배 레이아웃 튜토리얼을 제공합니다.
✅ 필요한 부분만 인쇄해서 보고 싶으신 분들에게도 추천해 드립니다. PDF를 제공합니다. (강의 자료는 자유롭게 사용 가능합니다.)

Q&A를 확인해보세요! ✍️

Q. 지식공유자가 여러 명인데, 수업마다 강사가 다른가요?

해당 영상은 오픈소스 프로젝트 "Flex & Grid" 기여자 분들께서 직접 찍어주신 강의입니다. 녹화 환경의 차이로 음량 및 음질의 차이가 있을 수 있으니 양해 부탁드립니다.

Q. Flex/Grid를 아예 모르는 초보자는 아닌데, 강의를 어떻게 활용하면 좋을까요?

원하는 부분만 보실 수 있습니다. Flex & Grid 웹 서비스에 접속하시면 CheetSheet를 제공해드립니다. 이것저것 클릭해보고 잘 모르겠다 하는 부분만 강의로 보시면 좋습니다. (수업 챕터마다 강사가 다르기 때문에 위에서부터 아래로 쭉 한 흐름에 시청하는 것을 권해드리지는 않습니다.)