오늘부터 바로 써먹는 CSS Flex 필수 가이드

오늘부터 바로 써먹는 CSS Flex 필수 가이드

3,000원

7

오늘부터 바로 써먹는 CSS Flex 필수 가이드

CSS Flex 속성이 어려우신 입문자를 위한 레이아웃 만들기 기초 강의입니다.

heart icon

찜하기

share icon

공유하기

🚀 강의 목적과 학습 목표

웹 레이아웃을 자유롭게! Flex 완벽 이해하기

웹 페이지 설계에서 가장 중요한 요소 중 하나는 다양한 화면 크기에서도 콘텐츠를 균형 있게 배치하는 것입니다. 이를 가능하게 해주는 강력한 도구가 바로 CSS Flexbox입니다. 이 강의에서는 Flexbox의 기초부터 실무에서 자주 사용하는 정렬 방식인 justify-content와 align-items까지 심도 있게 학습합니다.

단순한 개념 학습을 넘어, justify-content와 align-items를 활용한 다양한 실습 프로젝트를 통해 실제 개발에 즉시 적용 가능한 기술을 익힙니다. 이를 통해 복잡한 레이아웃도 손쉽게 구현할 수 있는 능력을 키우고, 반응형 웹사이트 설계에 필요한 필수 스킬을 마스터할 수 있습니다. CSS Flex 속성을 활용하여, 복잡한 웹사이트 레이아웃을 만들고, 화면 사이즈에 따라 유연하게 변하는 레이아웃을 구현하는 방법을 배우는 강의입니다. 이 강의를 통해 더 유연하고 직관적인 레이아웃 구성 능력을 쌓고, 웹 개발자로서 한 단계 더 성장해보세요!


📍 Flex 속성의 개념과 각 값의 특성 및 차이점을 이해해요
📍 실제 웹사이트 구조(헤더 / 네비게이션 /콘텐츠 영역 등)를 flex 속성으로 개발할 수 있게돼요
📍 상황에 따라 어떤 디스플레이 속성을 사용해야하는지 알게 돼요

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

📍 학원에서 Flex 속성에 대해 배웠지만 아직 이해가 잘 안되시는 분
📍 웹사이트를 만들 때 flex와 justify-content 및 align-items 속성을 어떻게 써야하는지 막막하신 분
📍 flex의 개념은 이해했지만 막상 활용이 어려우신 분
📍 레이아웃 구조를 잡을 때 다른 display 속성과 flex를 어떻게 구분해서 사용해야하는지 헷갈리시는 분

🎁 강의는 이렇게 구성돼요

📍 Display 속성의 개념과 각 값(block, inline, inline-block)의 특성 및 차이점 설명!
📍 실제 웹사이트 구조(헤더, 내비게이션, 콘텐츠 영역 등)에 display 속성 적용 방법 풀이

Chapter1 - CSS flex로 만드는 레이아웃 소개

CSS display의 flex 속성이 생겨난 이유와, flex로 만들 수 있는 다양한 레이아웃을 소개해요. Flex를 사용하는 이유를 알게되면, 더욱 쉽게 flex의 원리를 이해할 수 있습니다.


Chapter2 - Flex vs. Inline-block - 목록 레이아웃 만드는 방식 비교하기

완전히 동일한 레이아웃을 inline-block 속성과 flex 속성을 각각 활용하여 만들고, 그 특징을 비교합니다. 이 과정을 통해 flex 속성에 대해 더 깊이 이해할 수 있습니다.


Chapter3 - Flex와 justify-content를 이용한 요소 정렬 방법

Flex 속성과 가장 자주 함께 이용되는 속성 가운데 하나인 justify-content 속성을 소개하고, 실제 웹사이트에서 어떻게 활용되는지 응용해봅니다.


Chapter4 - Flex와 align-items를 이용한 요소 정렬 방법

Flex 속성과 자주 함께 사용되는 또다른 속성인 align-items 속성을 배우고, justify-content 속성과 함께 사용하여 복습합니다. 위플릭스 웹사이트 뿐 아니라, 새로운 프로젝트의 레이아웃을 만들며 응용해봅니다.


Chapter5 - Flex로 만드는 위튜브 헤더 실습 풀이

과제로 제공된 Wetube 홈페이지의 가장 위 헤더부분을 만드는 실습을 풀이합니다. Flex속성을 이용해서 만드는 가장 대표적인 레이아웃 가운데 하나를 만들면서, 실전 활용 방법을 익힙니다.


Chapter6 - Flex로 만드는 위튜브 채널 소개영역 실습 풀이

과제로 제공된 Wetube 홈페이지에서 구성된 동영상 채널 소개 영역을 풀이합니다. Flex속성을 이용해서 좌/우 대칭된 구조를 만드는 방법을 응용하고 실습해봅니다.


Chapter7 - Flex로 만드는 위튜브 댓글영역 실습 풀이

실습사이트인 Wetube 홈페이지의 댓글을 만드는 부분을 flex 속성을 활용해서 만들어봅니다. 이 과정을 통해 flex, justify-content, align-items, gap등의 속성을 총 복습하며 풀이합니다.



⭐️ 이 강의만의 특장점

👩🏻‍💻 실제 웹사이트 구조를 바탕으로 한 실전 중심의 학습 접근법

Block요소와 inline요소를 단순한 태그로만 공부하며, 활용이 어렵진 않으셨나요? 😢 단순한 '네모 박스' 예제를 넘어, 현실적이고 복잡한 레이아웃을 직접 구현해보며 display 속성을 확실히 이해해보세요!가상의 예제가 아닌, 현업에서 실제로 사용되는 기능들을 예제로 들어 flex를 가르칩니다.

westagram_example

👩🏻‍🏫 한땀 한땀 자세히 설명해주는 위코드!

코딩은 단순히 핵심 개념만 설명하고 "알아서 이해하세요"라고 넘기는 것은 불친절한 접근입니다. 간단한 flex를 적용하는 것조차도 다양한 배경 지식과 문맥이 필요하기 때문이죠. HTML태그에 따라 달라지는 디스플레이 속성, 헷갈리지 않게 꼭꼭 짚고가요! HTML개념도 같이 짚고 공부하니까, 당황스럽지 않아요! 위코드는 누구나 쉽게 이해할 수 있도록, 하나하나 친절하고 상세하게 설명하며 학습의 문턱을 낮춥니다. 함께 배우면서 "아, 이거였구나!" 하는 깨달음의 순간을 경험해 보세요!

westagram_example

🔑 실습 프로젝트와 상세한 해설풀이 제공

이론 강의가 끝나면! 직접 아래 페이지를 개발해보는 실습 시간이 있어요! 해설 풀이 강의에는 디스플레이 속성에서 활용할 실전 꿀팁도 가득 담겨있어요! 🍯

🙋🏻 질문이 있으신가요?

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

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

강의나 수업을 들어도 이해가 안되었던 경험 있으시죠? 여러분의 탓이 아닙니다! 코딩은 원래 이해하는것이 굉장히 어렵습니다. 위코드는 여러분이 최대한 쉽게 이해할 수 있도록 모든것을 준비했습니다. 강의 영상의 핵심 내용을 실시간으로 정리해 드리고, 직접 수정하고 실행해볼 수 있는 코드까지 실시간으로 제공하는 위코드만의 코딩 강의 플랫폼에서 재밌고 쉽게 학습하세요!


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





커리큘럼

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

  • Play IconFlex로 만드는 위튜브 헤더 실습 풀이
  • Play IconFlex로 만드는 위튜브 채널 소개영역 실습 풀이
  • Play IconFlex로 만드는 위튜브 댓글영역 실습 풀이