뒤로 가기
홈으로 이동
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 적용 후 생기는 여백을 없애는 방법
✔ 학습 완료

이런 러닝패스는 어때요?

테크주니어님의 다른 노트는 어때요?

테크주니어의 프로필 이미지
테크주니어
의 학습노트

CSS 강의 Ep05_2 - Box Model | border | 웹 개발 입문 | 함께 웹 개발에 입문해 보는건 어떨까요?

영상 재생 모양 아이콘
Video
⏱ 핵심 스탬프
11
00:18
Border에 대한 개념적 설명 : border는 HTML 요소의 테두리를 설정
00:33
Border의 속성 'border-style'에 대한 설명
👍
5
스크랩
테크주니어의 프로필 이미지
테크주니어
의 학습노트

CSS Tutorial For Beginners 42 - Width & Height

영상 재생 모양 아이콘
Video
⏱ 핵심 스탬프
4
00:39
width, height 설명을 위한 예제 코드에 대한 설명
01:51
'px'(본 강의에서는 static width로 표현)로 block level 엘리먼트에 width, height 값을 적용
👍
1
스크랩
👋 다양한 인사이트를 읽어보고 계신가요?
나만의 학습 기록을 남기고, 관리하고 싶다면!
다양한 전문가의 멤버십 전용 콘텐츠를 보고 싶다면!
나의 학습 내용을 공유하고, 수익을 올리고 싶다면!
3초 회원가입/로그인으로, 런핏의 커뮤니티에 여러분도 함께하세요.
3초 만에 가입하기