강의

멘토링

로드맵

BEST
개발 · 프로그래밍

/

웹 개발

CSS Flex와 Grid 제대로 익히기

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

(4.9) 수강평 214개

수강생 2,716명

  • 1분코딩

먼저 경험한 수강생들의 후기

이런 걸 배울 수 있어요

  • Flex와 Grid의 필수 기능 정리

  • 당장 실무에 활용 가능하면서도 미래 지향적인 CSS 코드

  • Flex와 Grid를 여러가지 UI에 적용하는 법

  • IE(인터넷 익스플로러)에서 Grid 사용하기

  • 그리드 기반의 디자인을 그대로 코드로 옮기기

당신이 웹 퍼블리셔, 프론트엔드 개발자, 코딩하는 디자이너라면?
이젠 Flex와 Grid를 배워야 할 때입니다! 💁‍♂️

왜 Flex와 Grid를
배워야 하나요? 🤔


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

👌 Flex와 Grid는 앞으로 css의 표준이자 기반이 될 기술입니다.
수많은 서비스들이 Grid를 기반으로 디자인 되고있고, 그것을 그대로 적용시키기 위해서는 필연적이니까요.

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

👌 실무에서 바로 활용 가능한 기술입니다.
Flex와 Grid는 인터넷 익스플로러에서 안되니까 실무에서 못 쓰는 기술이 아닙니다.
최신 버전의 인터넷 익스플로러를 지원하는 프로젝트라면 사용할 수 있습니다.


강의에서 배우는 내용 📋

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

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

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

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

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

최근 만들어지는 서비스의 99%는 반응형 페이지입니다. Flex와 Grid를 이용하여 훨씬 쉽고 간편하게 강력한 반응형 페이지를 만들어보세요. 디자인한대로, 상상한대로 3D 게임판을 만들어보며 배운 내용들로 우리가 어떤 상상력을 현실화 할지 감을 잡아보도록 하죠!

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

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


연관 로드맵 
🚎

"Oh!" 감탄사가 나오는 역동적인 인터랙티브 웹사이트를 만들어요.
1분코딩님의 인터랙티브 웹 사이트를 만들어보는
강의들로 구성된 로드맵입니다.
이 강의 포함

이런 분들께
추천드려요

학습 대상은
누구일까요?

  • 본인의 커리어에서 앞으로 CSS 코딩을 계속 할 분들

  • Flex와 Grid를 이용한 새로운 레이아웃 제작 방식을 알고 싶은 분

  • 옛날 방식의 코딩에서 벗어나 새로운 레이아웃 표준을 익히고 싶은 분

  • Flex와 Grid를 공부했지만, 어떻게 활용해야 할지 감이 안잡히는 분

  • Float 매니아

선수 지식,
필요할까요?

  • CSS 기초

안녕하세요
입니다.

19,443

수강생

1,244

수강평

1,175

답변

5.0

강의 평점

11

강의

서울에서 웹 개발자/디자이너로 일했고, 제주를 거쳐.. 현재는 말레이시아 페낭에서 열심히 개발도 하고, 교육 콘텐츠도 만들고, 1인 기업으로서 해볼 수 있는 여러가지 시도와 실험들을 해보고 있습니다.
비주얼 임팩트가 있는 인터랙티브 웹에 관심이 많고, 유튜브와 페이스북 "1분코딩"에서 웹 개발 관련 기술들을 공유하고 있어요.

커리큘럼

전체

42개 ∙ (5시간 50분)

해당 강의에서 제공:

수업자료
강의 게시일: 
마지막 업데이트일: 

수강평

전체

214개

4.9

214개의 수강평

  • ses123you7079님의 프로필 이미지
    ses123you7079

    수강평 19

    평균 평점 4.9

    5

    100% 수강 후 작성

    CSS Flex and Grid were only the names I had heard, but this time I learned about the concept and how to make it responsive, so it was a useful time. The JavaScript basics video I saw on YouTube became a signal, so I took the lectures "Getting Started with Interactive Web Development Properly", "SVG Master", and CSS Flex & Grid, and I am satisfied with all three lectures. I will watch them repeatedly and make good use of what I learned~! I am also looking forward to the next scroll lecture.

    • studiomeal
      지식공유자

      Wow- You listened to all my lectures after YouTube~~ Thank you so much ㅎㅎ Please use what you learned well to create great works! Thank you for the good review^^

  • thsoon님의 프로필 이미지
    thsoon

    수강평 19

    평균 평점 5.0

    5

    100% 수강 후 작성

    I recommend this lecture. I used to do layouts with flex, but after seeing examples of creating web pages, I got a feel for how to do it responsively. And when I was just looking at the document for grid, I got confused about what was important and what was additional, but now I think I can do the entire layout with grid!

    • studiomeal
      지식공유자

      Oh- Taehyun, it seems like you've grasped all the key points of this lecture! Thank you for your kind words and for the recommendation :)

  • tamarixda3880님의 프로필 이미지
    tamarixda3880

    수강평 1

    평균 평점 5.0

    5

    71% 수강 후 작성

    As you said during the lecture... I'm really confused because it's my first time.^^ If I listen to the lecture and think about something else for a moment, I get confused. Hahaha

    • studiomeal
      지식공유자

      Yes, it must have been because it was your first time and the concept was unfamiliar :) Since the function itself is so good, if you repeat and practice until you get used to it, you will be able to use it much more comfortably and quickly than the existing method~~ Thank you for the good review!

  • jinsu님의 프로필 이미지
    jinsu

    수강평 5

    평균 평점 5.0

    5

    98% 수강 후 작성

    I'm watching YouTube and Inflearn lectures well! I listen to the lectures every time they come out, and the biggest advantage is that I can watch them smoothly without any problems! I'm learning a lot from this lecture, from theory to practical application tips! I hope you continue to give fun lectures in the future 👍

    • studiomeal
      지식공유자

      Ah, I feel good that you gave me such good advice from the first class review😄 I hope you find it useful. Thank you, Sujin!

  • ymo3213946님의 프로필 이미지
    ymo3213946

    수강평 4

    평균 평점 5.0

    5

    100% 수강 후 작성

    I listened to the great lecture~~~

2025 추석맞이 감사할인 중 (2일 남음)

₩30

22%

₩49,500

1분코딩님의 다른 강의

지식공유자님의 다른 강의를 만나보세요!

비슷한 강의

같은 분야의 다른 강의를 만나보세요!