Thumbnail
NEW 개발 · 프로그래밍 웹 개발
30분 요약강좌 시즌5 : 알잘딱깔센 flex & grid
(5.0)
6개의 수강평 ∙ 243명의 수강생

무료

지식공유자: 제주코딩베이스캠프
총 25개 수업 (1시간 29분)
수강기한: 무제한
수료증: 미발급
난이도:  입문-초급-중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유
초급자를 위해 준비한
[웹 개발, 프론트엔드] 강의입니다.

알아서! 잘! 딱! 깔끔하고! 센스있게! 정리하는 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를 제공해드립니다. 이것저것 클릭해보고 잘 모르겠다 하는 부분만 강의로 보시면 좋습니다. (수업 챕터마다 강사가 다르기 때문에 위에서부터 아래로 쭉 한 흐름에 시청하는 것을 권해드리지는 않습니다.)

제주코딩베이스캠프 
30분 요약 강좌 시리즈 📺

지식공유자가 알려주는
강의 수강 꿀팁!
🎓
이런 분들께
추천드려요!
Flex와 Grid를 처음 접하는 분
레이아웃 공부를 하고 있으신 분
📚
선수 지식,
필요한가요?
HTML
CSS

안녕하세요
제주코딩베이스캠프 입니다.
제주코딩베이스캠프의 썸네일

🧙‍♂ 안녕하세요. 제주코딩베이스캠프입니다.

제주코딩베이스캠프란?

제주에서 가장 핫한 개발자들이 모여 작당한 부트캠프! 열정있는 청년들에게 열정만큼 성장할 수 있는 기회를 제공합니다!

제주코딩베이스캠프는 제주에서 가장 큰 ICT 교육 행사로 카카오, 구름, 제주산학융합원 등 기업 지자체와 함께 진행하고 있습니다.


서비스 구축 성공
경험을 통해 이 취업난 시대에 자신감, 자존감, 성취감, 그리고 자립할 수 있는 능력을 배양해 보세요!

으라차차 청춘 화이팅입니다! 😀

공동 지식공유자: Hojun Lee의 썸네일 임홍렬의 썸네일 최수빈의 썸네일 코햄의 썸네일 Florence의 썸네일 임다현의 썸네일 김예지의 썸네일 장효순의 썸네일 륜곰의 썸네일
커리큘럼 총 25 개 ˙ 1시간 29분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 강의소개와 강의자료
섹션 1. Flex
Flex란? 미리보기 06:04
flex-direction 02:30
justify-content 05:15
align-items, align-content 05:46
Flex-wrap 04:54
Flex-basis 06:03
Flex-grow 02:48
Flex-shrink 04:07
align-self 05:52
order 03:55
z-index 00:56
섹션 2. Grid
Grid란? 미리보기 06:48
grid-template-rows, grid-template-columns
repeat, fr
min-max함수와 grid-auto
Gap
각 셀의 영역 지정하기
섹션 3. 성배 레이아웃
성배레이아웃이란? 02:16
flex 성배 레이아웃 구현하기 06:20
flex 변형된 성배 레이아웃 구현하기 04:50
grid 성배 레이아웃 구현하기 11:08
grid 변형된 성배 레이아웃 구현하기 08:35
강의 게시일 : 2022년 08월 03일 (마지막 업데이트일 : 2022년 07월 25일)
수강평 총 6개
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
5.0
6개의 수강평
5점
4점
3점
2점
1점
VIEW 좋아요 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
규몬 thumbnail
오우야드평
2022-08-04
minji9873 thumbnail
강의 시간이 짧아서 공부하기에 부담이 없고, 그에 비해 설명은 자세하게 해주셔서 머리에 쏙쏙 들어왔습니다.
2022-08-04
해맑다 thumbnail
좋은 강의 감사합니다!
2022-08-04
봉실봉실 thumbnail
감사합니다~ 헷갈렸던 부분들 정립과 그리드시스템 새로 알게되었습니다. 감사합니다!!
2022-08-05
ik sang Lee thumbnail
개념을 확고히 해주는 유익한 강의였어요. 고맙습니다.
2022-08-04
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의를
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스