본문 바로가기

Course

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

Flexbox 완전 정복
: CSS3 Flexbox
마스터하기

최신 CSS3 Flexbox 박스 모델을
사용하여 효율적으로 반응형
웹 페이지 레이아웃을 만드는
방법을 학습하세요!

배울 내용

CSS Flexbox를 사용해서 최신 스타일의 레이아웃을 만드는 방법

효율적으로 웹 페이지를 디자인하는 방법

재사용 가능한 고품질의 CSS 코드를 작성하는 방법

원하는 요소들을 수직 정렬하는 방법

컨테이너의 남는 공간을 활용하는 방법

Flexbox를 사용해 멋진 반응형 사진첩을 만드는 방법

Peter Sommerhoff

Developer & Software Engineer - With 45,000+ Happy Students



이런 분들에게 추천해요

자신의 프런트 엔드 개발 역량을 강화하고 싶은 웹 디자이너 및 개발자

Flexbox를 활용하여 생산성 향상을 원하는 디자이너

CSS3 flexbox 최신 웹 개발 기술에 관심이 있으신 분

본 강의에서는 다음 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

평생 이용권2시간 동영상
TV&모바일 엑세스 강의 수료증