[CSS] Flexbox와 Grid + 연습 게임 (1분 코딩님의 설명 추천)

예전에 웹디자인 학원 다니면서

CSS를 배울 때에는,

HTML 요소들의 레이아웃을 배치할 때

거의 Float을 이용했었어요.

 

 

하지만 Float의 원래 목적은

이미지와 글을 잘 어우러지게 배치

하는 목적이 주인 것으로 알고 있고,

이러한 전체적인 레이아웃 배치를 위한 것은

아니라고 들었기 때문에

해당 목적에 맞는 Flexbox와 Grid를

언젠가는 꼭 공부해야겠다고 생각했었죠!

 

 

 

 

사실 예전에 1분 코딩님의

유튜브로 간단하게 정리된

Flex와 Grid 영상을 봤었는데

공부를 한 1년 정도 손 놓다 보니

자연스럽게 까먹게 됐었어요ㅠ

 

 

제가 전에 봤던 게

위 영상이에요!

 

 

간단하게 Flex와 Grid의 개념에 대해

잘 정리되어 있어서 추천하는

1분 코딩님의 유튜브 영상입니다~

 

 

처음 봤을 때는 Float보다

훨씬 복잡해 보여서 당황했었지만,

Flex의 경우는 연습하다 보니,

어느 정도는 익숙해져서

열심히 써먹고 있어요.

물론 혼자 연습할 때요 ㅋㅋ

 

 

근데 아직 Grid는 많이 안 써서

잘 못한다는 사실.. ㅎㅎ

 

 

인프런 구경하다 보니까,

1분 코딩님의 수업들 중

CSS Flex와 Grid 제대로 익히기

라는 이름으로 유료 강의가 또 있어요!

 

 

위 영상이 30분인 것에 반하여 

6시간 분량으로 총 42개의 수업이 구성된 걸 보면

훨씬 자세할 것 같아요~

 

 

커리큘럼도 보니까

직접 UI도 만들어보면서

반응형도 적용해보고

뭔가 더 재미있는 예제를

많이 할 수 있는 것 같았죠!

 

 

참고로 가격은 49,500원인데

인프런도 할인 코드를 꽤 자주 주는 편이라

할인할 때 미리 수강 신청하면 좋겠죠?

 

 

인프런 코딩 수업들의 또 다른 장점은

평생 수강이 가능한 것이에요 ㅎㅎ

 

 

만약 프런트엔드나 웹 개발에 대해

전반적인 흐름을 알고 싶다 하는 분들껜

스파르타코딩클럽(5만원할인링크)와

같은 수업 추천드리고,

이렇게 부분적으로 디테일하게 공부하실 분들은

인프런 같은 곳에서 찾아서 듣는 것도 추천드립니다!

 

 

1분코딩님의 스튜디오밀 웹사이트 안에서도

자세하게 정리되어 있는 내용이 있기 때문에

CSS 레이아웃을 자세하게 공부하고 싶다

하시는 분들께는

아래 링크도 함께 보시는 걸 추천드려요!

 

 

- 1분코딩님의 FLEX 정리

이번에야말로 CSS Flex를 익혀보자

 

- 1분코딩님의 Grid 정리

이번에야말로 CSS Grid를 익혀보자

 

 

추가로, CSS 레이아웃과 관련해서

Flexbox와 Grid를 연습할 수 있는

재밌는 게임들이 있어요!

 

 

혹시, 공부하다가 좀 지루하시다면

아래의 세 가지 게임들을 통해서

조금 더 흥미를 가지고 공부하는 걸

추천드립니다!

 

 

- FLEXBOX Defense

Flexbox Defense

 

- FLEXBOX FROGGY

Flexbox Froggy

 

- GRID GARDEN

Grid Garden

 

아마 하다 보면,

잉? 엇! 아~

하는 순간들이 올거예요 ㅋㅋ

 

 

영문 사이트 중에서

CSS Grid와 Flex를 자세하게 설명한,

CSS Trick 사이트도 추천드려요!

(Grid 링크, Flex 링크)

 

 

코딩은 영어랑 친해야

더 편하니까요~

틈틈이 공부한다 생각하시고

같이 읽어보셔용 ㅎㅎ