CSS Grid로 다양한 레이아웃 만들기

CSS Grid로 다양한 레이아웃 만들기

3,000원

10

CSS Grid로 다양한 레이아웃 만들기

헷갈리는 CSS Grid를 이해하고, 실제로 사용하는 방법을 배워보세요!

heart icon

찜하기

share icon

공유하기

🚀 강의 목적과 학습 목표

이 강의는 CSS의 Grid 레이아웃을 이해하고, Flexbox와의 차이점을 비교하며, 각 레이아웃의 활용 사례를 학습할 수 있도록 도와드립니다. Grid의 강력한 기능을 익히고, Flexbox와 함께 사용하여 웹 페이지 레이아웃을 효율적으로 설계해보세요! 😊

📍 CSS Grid 레이아웃 이해: Grid의 기본 개념과 속성을 학습하며, 2차원 레이아웃 설계 방법을 배웁니다.
📍 Grid와 Flexbox의 차이점 비교: Grid와 Flexbox의 특성과 차이점을 이해하고, 각각의 적합한 사용 사례를 학습합니다.
📍 실전에서의 Grid 활용법: 웹 페이지에서 Grid 레이아웃을 적용하는 다양한 실전 사례를 통해, 효율적인 레이아웃 설계 방법을 익힙니다.


👩🏻‍💻 이런 분을 위해 만들었어요

📍 CSS Grid와 Flexbox를 처음 배우는 초보 개발자
📍 웹 페이지 레이아웃 설계 시 Grid와 Flexbox의 차이점을 명확히 이해하고 싶은 분
📍 복잡한 2차원 레이아웃을 효율적으로 설계하고 싶은 분
📍 Grid와 Flexbox를 조합해 유연하고 직관적인 웹 레이아웃을 구현하고 싶은 분

🎁 강의는 이렇게 구성돼요

📍 CSS Grid 레이아웃과 Flexbox의 차이점을 명확히 학습합니다!
📍 Grid 레이아웃을 사용해 2차원 레이아웃을 효율적으로 설계하는 방법을 배워요!
📍 Flexbox와 Grid를 조합하여 다양한 실전 레이아웃 구현 사례를 익힙니다!

💻 쉽게 이해되는 3분할 화면

위코드는 여러분이 최대한 쉽게 이해할 수 있도록 모든것을 준비했습니다. 강의 영상의 핵심 내용을 실시간으로 정리해 드리고, 직접 수정하고 실행해볼 수 있는 코드까지 실시간으로 제공하는 위코드만의 코딩 강의 플랫폼에서 재밌고 쉽게 학습하세요!


📍 모바일에서도 쉽게 볼 수 있는 세로 비율의 강의 영상
📍 강의 내용을 이해하기 쉽도록 실시간 핵심 내용 정리
📍 강의 내용 흐름에 맞추어 실시간 업데이트 되는 코드 에디터
📍 직접 수정해보고 실행도 할 수 있는 코드

🙋🏻 질문이 있으신가요?

링크를 통해 위코드 코딩 질문방으로 오세요!
위코드 스태프들이 직접 친절하게 알려드립니다! 🫡
👉 위코드 코딩 질문방으로 들어가기 (비밀번호: wecode)


커리큘럼

미리보기를 통해 콘텐츠를 확인해보세요.

  • Play IconFlexbox와 Grid 혼합 사용 사례
  • Play Icon프로젝트: 반응형 그리드 레이아웃 완성
  • Play Icon추가 심화: 자동 배치와 템플릿 영역
  • Play IconGrid 고급 기능: minmax, auto-fit, auto-fill
  • Play Icon중첩 그리드와 하위 요소 배치
  • Play Icon최종 과제: Grid를 통한 복잡한 웹 레이아웃 구현