LearnFit
YouTube, Create a mobile app layout with Flexbox! - Tutorial 20 of 20 💪
Create a mobile app layout with Flexbox! - Tutorial 20 of 20 💪
#개발자
#프론트엔드
#전체
#flexbox
#css
#html
#web design
#web development
#css3
#html5
#javascript
#Sublime Text
#tutorial
#Google Chrome
#FireFox
00:36모바일 환경에서는 가로와 세로 뷰 길이에 제약이 따른다
01:05media queries, floats, width, height 등의 CSS 속성 없이 오직 flexbox로만 스크린 사이즈에 레이아웃이 반응되도록 구현함
01:22리액트 네이티브에서의 flexbox
02:22프로젝트 코드에 대한 개괄 설명
03:22vh에 관한 설명
04:16flex direction으로 main axis 변경
04:37최상위 flex container의 하위 flex item들에 대한 CSS 적용 코드 : 최상위container > * {}
05:01'flex: 1 1 auto'에 대한 설명(auto는 flex basis에 대한 value)
06:11overflow-y: scroll; 컨텐츠가 많은 영역에 스크롤 적용
06:20현재까지 적용된 flexbox 속성으로 header와 footer는 각각의 영역이 필요한 만큼 공간을 갖게되고 중앙의 content영역은 나머지 공간을 모두 차지하도록 구현완료
08:20align-item 속성 사용이 필요한 레이아웃
09:23 justify-content : space-between 설명
10:38flex 적용 후 생기는 여백을 없애는 방법
✔ 학습 완료
👋 다양한 인사이트를
읽어보고 계신가요?
나만의 학습 기록을 남기고,
관리하고 싶다면!
다양한 전문가의 멤버십 전용
콘텐츠를 보고 싶다면!
나의 학습 내용을 공유하고,
수익을 올리고 싶다면!
3초 회원가입/로그인으로,
런핏의 커뮤니티에 여러분도 함께하세요.
3초 만에 가입하기