우리 같이 입어요! 인프런 후드티 💛
Thumbnail
추석 앵콜 할인 20% 중(D-5)
BEST 개발 · 프로그래밍 웹 개발
CSS Flex와 Grid 제대로 익히기
(5.0)
119개의 수강평 ∙ 1380명의 수강생

20%

39,600원

49,500원
지식공유자 : 1분코딩
총 42개 수업˙총 5시간 50분
평생 무제한 수강
수료증 발급 강의
입문 초급 대상 중급이상
폴더에 추가 1365 공유
초급자를 위해 준비한
[웹 개발, 프로그래밍 언어] 강의입니다.

현재, 그리고 미래의 표준이 될 CSS 레이아웃 작성 방식인 Flex와 Grid에 대해 배울 수 있습니다.

✍️
이런 걸
배워요!
Flex와 Grid의 필수 기능 정리
당장 실무에 활용 가능하면서도 미래 지향적인 CSS 코드
Flex와 Grid를 여러가지 UI에 적용하는 법
IE(인터넷 익스플로러)에서 Grid 사용하기
그리드 기반의 디자인을 그대로 코드로 옮기기

아직도 Flex, Grid 안쓰시나요?
때가 되었습니다. 이제는 하셔야 합니다!

웹퍼블리셔/프론트엔드개발자/코딩하는디자이너 이신가요?
때가 되었습니다. 이제는 하셔야 합니다.

여전히 많은 환경에서 Flex 와 Grid 대신 Float..등등 으로 화면을 구성하고 있죠.
하지만 이렇게 짜여진 코드는 많은 문제를 야기합니다.

왜 Flex, Grid 를 배워야 하나요??

🌟 Flex 와 Grid 는 앞으로 CSS 의 표준이자 기반이 될 기술입니다.

수많은 서비스들이 Grid 기반으로 디자인 되고 있고, 그것을 그대로 적용시키기 위해서 필연적이니까요.

😄 간단하고 쉬워요.

이전의 기술들로 표현하기 위해서 온갖 꼼수를 써야했다면, Flex, Grid 로는 아주 간단하고 쉽게 많은것들이 해결됩니다.

💪🏼 실무에서 바로 활용 가능한 기술이에요!

Flex와 Grid는, "인터넷 익스플로러에서 안되니까 실무에서 못 쓰는 기술"이 아니에요.
최신 버전의(MS에서도 버린 마당에 최신이라고 하기도 좀 이상하지만) 인터넷 익스플로러(10 이상)를 지원하는 프로젝트라면 사용할 수 있습니다. 저도 상용 서비스들에 유용하게 써오고 있거든요.

이 강의에선 어떤것들을 배우나요?

이해하기 쉽게 정리한 핵심 개념 정리

새로운 개념이라 익혀야 할 것들이 꽤나 많습니다. 처음 하는 분들은 정리된 문서를 읽어보아도 헷갈리고 어려운 부분들이 있을 거에요.
여러분들이 앞으로 할 CSS 레이아웃 코딩의 기반 기술인 만큼, 확실히 이해할 수 있도록 개념 설명에도 시간을 많이 할애 했습니다.

개념을 바탕으로 간단한 UI 만들기

기본 핵심 개념을 익힌 후, 필수적이고 자주 사용하는 패턴의 UI들과 반응형 페이지를 직접 만들어보며
기본기를 탄탄하게 다듬고 자연스럽게 익숙해질 수 있도록 강의를 구성했습니다.

Flex, Grid 로 각각 반응형 페이지 만들기 실습

최근 만들어지는 서비스의 99% 는 반응형 페이지죠. float, inline-box 가 아닌 Flex 와 Grid 를 활용해 실무적 페이지를 만들어 볼 수 있어요. 훨씬 쉽고 간변하고 강력하게 반응형 페이지를 만들어 보세요!

디자인한 대로, 상상한 대로

3D 게임판을 만들어보며 배운 내용들로 우리가 어떤 상상력을 현실화 할지 감을 잡아보도록 하죠!

인터넷 익스플로러에서 Grid 사용하기

Flex와 Grid는, "인터넷 익스플로러에서 안되니까 실무에서 못 쓰는 기술"이 아니에요. 속성을 비교해보고IE 에서는 Grid 를 어떻게 사용하나 배워봅니다.

지금 배워야 합니다!

언젠가는 해야할 것, 지금 시작해서 우리의 서비스에 적용하고, 남들보다 빨리 익숙해집시다!
그럼 연봉과 인정은 당연히 뒤따라 오겠죠?

지식공유자가 알려주는
강의 수강 꿀팁!
🎓
이런 분들께
추천드려요!
본인의 커리어에서 앞으로 CSS 코딩을 계속 할 분들
Flex와 Grid를 이용한 새로운 레이아웃 제작 방식을 알고 싶은 분들
옛날 방식의 코딩에서 벗어나 새로운 레이아웃 표준을 익히고 싶은 분들
Flex와 Grid를 공부했지만, 어떻게 활용해야 할지 감이 안잡히는 분
Float 매니아
📚
선수 지식,
필요한가요?
CSS 기초

안녕하세요
1분코딩 입니다.
1분코딩의 썸네일

서울에서 웹 디자이너이자 웹 개발자로 일했고 지금은 제주에서 웹사이트 만드는 일, 강의, 영상 만드는 일, 컨텐츠 만드는 일 등 해보고 싶은거 이것저것 해보며 살고 있습니다.
비주얼 임팩트가 있는 인터랙티브 웹 개발에 특히 관심이 많고 페이스북과 유튜브 "1분코딩"에서 관련 기술들을 공유하고 있어요.
무료 강의는 유튜브에, 유료 강의는 인프런에 업로드하고 있습니다.

커리큘럼 총 42 개 ˙ 5시간 50분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 학습 준비
소스코드 다운로드
섹션 1. Flex 핵심정리
Flex 시작하기 미리보기 04:51 Flex 핵심정리 #1 - 배치의 흐름 미리보기 11:04 Flex 핵심정리 #2 - 간단한 예제 미리보기 04:35
Flex 핵심정리 #3 - 전체 아이템 정렬 13:56
Flex 핵심정리 #4 - 유연한 박스 10:12
Flex 핵심정리 #5 - Flex 속성 활용 12:40
Flex 핵심정리 #6 - 반응형 컬럼 12:29
Flex 핵심정리 #7 - 유용한 기법들 11:37
Flex 핵심정리 #8 - 개별 아이템 속성 04:43
섹션 2. Flex UI 만들기
Flex UI #1 - 메뉴 08:35
Flex UI #2 - 유연한 검색창 06:04
Flex UI #3 - 불릿 리스트 04:17
Flex UI #4 - 메시지 리스트 10:12
Flex UI #5 - 유저 리스트 03:10
Flex UI #6 - 모달 03:36
Flex UI #7 - 카드 리스트 18:34
섹션 3. Flex로 반응형 페이지 만들기
Flex 반응형 페이지 Step 1 미리보기 08:00
Flex 반응형 페이지 Step 2 10:37
Flex 반응형 페이지 Step 3 16:37
Flex 반응형 페이지 Step 4 16:08
섹션 4. Grid 핵심정리
Grid 시작하기 06:11
Grid 핵심정리 #1 - 용어 정리 05:05
Grid 핵심정리 #2 - 그리드의 기본 형태 09:12
Grid 핵심정리 #3 - 자동으로 채우기 07:47
Grid 핵심정리 #4 - 셀 간격 만들기 02:37
Grid 핵심정리 #5 - 그리드 자동 정의 03:26
Grid 핵심정리 #6 - 각 셀의 영역 지정 12:55
Grid 핵심정리 #7 - 영역 이름 사용하기 08:33
Grid 핵심정리 #8 - 자동 배치 알고리즘 05:00
Grid 핵심정리 #9 - 정렬하기 09:04
Grid 핵심정리 #10 - 순서 정하기 02:25
섹션 5. Grid로 반응형 페이지 만들기
Grid 반응형 페이지 Step 1 11:08
Grid 반응형 페이지 Step 2 03:27
Grid 반응형 페이지 Step 3 07:35
섹션 6. Grid에 품은 창의력
Grid 활용예제 #1 - 카테고리 정렬하기 06:52
Grid 활용예제 #2 - 3D 보드게임판 09:42
Grid 활용예제 #3 - 그리드 기반 디자인을 코드로 옮기기 Step 1 17:49
Grid 활용예제 #3 - 그리드 기반 디자인을 코드로 옮기기 Step 2 08:37
섹션 7. 인터넷 익스플로러에서 Grid 사용하기
속성 비교 04:22
IE에 Grid 레이아웃 적용하기 10:18
Grid 반응형 페이지 IE 버전 06:00
강의 게시일 : 2020년 02월 15일 (마지막 업데이트일 : 2020년 02월 13일)
수강평 총 119개
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
5.0
119개의 수강평
5점
4점
3점
2점
1점
VIEW 좋아요 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
Yoonho Shin thumbnail
설명이 상세하고 아주 좋습니다. 솔직히 유튭에서 1분코딩 flex grid 봤을땐 뭔가 코드만 치는것 같아서.. 살까 말까 고민했습니다. 근데 유료 강의는 퀄리티가 훨씬 더 높네요! 잘 정리된 강의 자료, 상세한 설명, 그리고 집중력을 유지할 수 있는 편집까지 여러모로 너무 좋은 강의입니다. 수강이 끝나면 다른 강의도 수강할 예정입니다~
2020-12-18
지식공유자1분코딩
감사합니다! ㅎㅎ
2021-05-12
TaeHyun Lim thumbnail
강의 추천드립니다 기존에 flex로 레이아웃을 짰었는데 웹페이지 만드는 예시를 보고 반응형으로 짜려면 어떻게 해야될지 감이 잡혔습니다. 그리고 그리드도 무작정 문서보고 하려니 어떤 것이 중요하고 어떤 것이 부가적인건지 헷갈렸는데 이제 그리드로 전체 레이아웃을 짤 수 있을 것 같습니다!
2020-02-26
지식공유자1분코딩
오- 태현님은 뭔가 이 강의의 핵심 내용들을 다 파악하신 듯한 느낌이네요! 좋은 말씀도 감사드리고 추천도 해주셔서 넘 고맙습니다 :)
2020-02-26
진수진 thumbnail
유투브도 인프런 강의도 잘 보고 있어요! 강의 나올때 마다 수강해서 듣고 있는데, 막힘없이 술술 볼 수 있다는게 큰 장점이예요! 이번 강의도 이론부터 실전 활용 팁까지 잘 얻어갑니다! 앞으로도 재밌는 강의 계속 내주시길 바랍니다 👍
2020-02-18
지식공유자1분코딩
아, 첫 수강평부터 넘 좋은 말씀 해주셔서 기분이 좋네요😄 유용하게 활용하시면 좋겠습니다. 감사합니다 수진님!
2020-02-18
ses123you thumbnail
css 플렉스랑 그리드는 이름만 들어본 정도였는데, 이번에 개념부터 반응형으로 만드는법까지 알게되어 유익한 시간이었습니다. 유튜브에서 본 자바스크립트 기초 영상이 신호탄이 되어 "인터랙티브 웹 개발 제대로 시작하기 ", "SVG 마스터" 강의, 그리고 CSS flex & Grid 강의까지 듣게 되었는데 3개 강의 모두 만족합니다. 반복해서 보면서 배운내용 잘 활용하겠습니다~! 다음에 나올 스크롤 강의도 기대되네요 ㅎ
2020-02-26
지식공유자1분코딩
와- 유튜브에 이어 제 강의를 다 들으셨다니~~ 넘 감사합니다 ㅎㅎ 공부하신 내용들 잘 활용해서 멋진 작품 만들어주세요! 좋은 평가 감사드립니다^^
2020-02-26
tamarixda thumbnail
강의중 말씀하신데로..처음이라서 무지 헷갈리네요.^^ 강의 듣다 잠시 딴 생각하면 헷갈리네요. ㅎㅎㅎ
2020-02-26
지식공유자1분코딩
네 처음이라 개념이 생소해서 그러셨을거에요 :) 기능 자체가 워낙 좋으니 익숙해질때까지 반복하고 연습하시다보면 기존 방식보다 훨씬 편안하고 빠르게 사용하실 수 있을거에요~~ 좋은 평가 감사합니다!
2020-02-26
추석 앵콜 할인 20% 중(D-5)

20%

39,600원

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