【한글자막】 Flexbox 완전 정복: CSS3 Flexbox 마스터하기

Description

본 강의에서는 다음 Flexbox 활용법을 다룹니다:

• 요소 수직 정렬하기

• 최신 스타일의 그리드 생성하기

• 남는 공간 채우기

• 요소 사이 여백 설정하기

• 완전한 웹 페이지 레이아웃 구현하기

• 기타 수많은 Flexbox 기능

  
  

본 강의에서는 다음과 같은 Flexbox의 모든 속성들에 대해 다룹니다:

플렉스 컨테이너:

1. flex-direction

2. justify-content

3. align-items

4. flex-wrap

5. align-content

그리고 플렉스 아이템:

1. order

2. align-self

3. flex-grow

4. flex-shrink

5. flex-basis

6. flex

마지막 부분에서는 실제 Flexbox 사용 예시를 함께 보며 어떤 레이아웃을 만들 수 있는지 살펴봅니다:

1. 같은 행에서 동일한 열 너비를 가지는 간단한 Flexbox 활용 그리드

2. 다양한 열 너비를 가지는 고급 Flexbox 그리드

3. 세로 가운데 정렬을 사용한 요소들의 수직 정렬

4. 미디어 객체 패턴(자주 사용되는 OOCSS 패턴)

5. 성배 레이아웃(사이드바와 푸터가 있는 완전한 웹 페이지 레이아웃)

보너스: 강의와 함께 다섯 가지를 더 제공드립니다.

1. 수강생들의 이해를 돕기 위해 언제나 모든 질문에 대답해 드리고 있습니다. 궁금하신 점이 있다면 언제든 "영어로" 질문해 주세요

2. 고품질의 수작업 영문 및 한글자막을 강의 영상과 함께 제공합니다

3. 3개의 연습 미니 프로젝트를 통해 Flexbox를 실제로 사용해 보고 배운 내용을 웹 디자인에 적용해 생산성을 향상시킬 수 있도록 도와드립니다.

4. 보너스로 Flexbox를 사용하면서 언제든 배운 내용을 다시 확인하고 참고할 수 있는 Flexbox 복습 노트를 제공합니다.

5. 추가로 Flexbox 데모 코드를 제공합니다. 이 코드를 통해 강의에서 배운 모든 속성과 레이아웃을 웹 브라우저에서 실습해 보고 그 결과를 실시간으로 확인할 수 있습니다.

본 강의를 수강한 수강생들의 후기입니다.

• 정말 좋은 강의입니다. 벌써 Peter의 강의를 두 번째 수강하고 있네요.
  내용을 정말 쉽게 설명해 줍니다.

  - Ahmed

• 정말 마음에 드는 강의입니다. 필요한 모든 내용을 정말 상세하게 가르쳐 주고 수강생의 질문에 대해 누구보다도 빠르게 답변해 줍니다. 멋진 강의를 제공해 줘서 고마워요, 앞으로도 다른 강의들 기대하고 있습니다!

  - Ana

• 굉장히 도움이 되는 강의입니다. Peter는 처음부터 끝까지 내용을 빈틈없이 설명해 주고 제 질문에 대해 언제나 하루도 안 되어 대답을 해 주었습니다.

  - Dunja

• 필요한 정보를 쓸데없는 내용 없이 빠르고 간결하게 설명해 주는 강의입니다. 추가 정보와 참고할 문서들에 대한 설명을 함께 제공하는 점도 마음에 들었습니다. 값어치를 하는 강의라고 생각합니다.

  - Robert

수강생들이 이처럼 좋은 후기를 남겨주어 정말 기쁩니다 . 이전 수강생들과 마찬가지로 여러분에게 최고의 강의를 제공하기 위해 노력하겠습니다.

1강에서 뵙겠습니다. :)

- Peter

What You Will Learn!

• CSS Flexbox를 사용해서 최신 스타일의 레이아웃을 만드는 방법
• 효율적으로 웹 페이지를 디자인하는 방법
• 재사용 가능한 고품질의 CSS 코드를 작성하는 방법
• 원하는 요소들을 수직 정렬하는 방법
• 컨테이너의 남는 공간을 활용하는 방법
• Flexbox를 사용해 멋진 반응형 사진첩을 만드는 방법
• 성배(Holy Grail) 레이아웃 구현 방법

Who Should Attend!

• 자신의 프런트 엔드 개발 역량을 강화하고 싶은 웹 디자이너 및 개발자
• Flexbox를 활용하여 생산성 향상을 원하는 디자이너
• CSS3 flexbox 최신 웹 개발 기술에 관심이 있으신 분

TAKE THIS COURSE