flex-item에 사용하는 속성
- flex-basis를 우선으로 한다
- flex-grow:1 동일하게 여백 할당
flex-grow:2 여백 2배 할당 - flex-shrink:gorw와 반대로 basis값에서 더 줄어도 되는 값을 지정한다 (기본값은 1)
- 세 속성은 축약하여 사용할 수 있다
flex: flex-grow, flex-shrink, flex-basis; - align-self
- order 수가 작을수록 우선순위
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items#use_cases_for_order
Ordering flex items - CSS: Cascading Style Sheets | MDN
New layout methods such as Flexbox and Grid bring with them the possibility of controlling the order of content. In this article, we will take a look at ways in which you can change the visual order of your content when using Flexbox. We will also consider
developer.mozilla.org
Grid
https://heropy.blog/2019/08/17/css-grid/
CSS Grid 완벽 가이드
CSS Grid(그리드)는 2차원(행과 열)의 레이아웃 시스템을 제공합니다.Flexible Box도 훌륭하지만 비교적 단순한 1차원 레이아웃을 위하며, 좀 더 복잡한 레이아 ...
heropy.blog
https://developer.mozilla.org/ko/docs/Web/CSS/grid
grid - CSS: Cascading Style Sheets | MDN
grid CSS 속성은 shorthand property 입니다. 외재적인 속성인 (grid-template-rows (en-US), grid-template-columns (en-US), grid-template-areas (en-US)), 값과 내재적인 속성인 (grid-auto-rows (en-US), grid-auto-columns (en-US), grid-auto-fl
developer.mozilla.org
https://studiomeal.com/archives/533
이번에야말로 CSS Grid를 익혀보자
이 포스트에는 실제 코드가 적용된 부분들이 있으므로, 해당 기능을 잘 지원하는 최신 웹 브라우저로 보시는게 좋습니다. (대충 인터넷 익스플로러로만 안보면 된다는 이야기) 이 튜토리얼은 “
studiomeal.com
https://codepen.io/search/pens?q=grid
CodePen Search
codepen.io
fr: fraction 비율
repeat() 함수
auto-fill
auto-fit
grid-template-areas
grid-area
--
CSS transition, transform
translate VS position
- 파싱
- 스타일 계산
- 레이아웃
- 페인트
- 컴포지팅
면접 아주중요
리페인팅 리플로우
--
CSS Animation 애니메이션
keyframe
'멋쟁이사자처럼 프론트엔드 스쿨 > FE TIL' 카테고리의 다른 글
| [멋사 프론트엔드 스쿨]9월 22일 목요일 TIL_CSS 실무 테크닉 (1) | 2022.09.23 |
|---|---|
| [멋사 프론트엔드 스쿨]9월 21일 수요일 TIL_CODELION Javascript (0) | 2022.09.22 |
| [멋사 프론트엔드 스쿨]9월 15일 목요일 TIL_CSS Selector 심화, CSS Combinator, Flex (0) | 2022.09.16 |
| [멋사 프론트엔드 스쿨]9월 14일 수요일 TIL_Text, position, Float (0) | 2022.09.14 |
| [멋사 프론트엔드 스쿨]9월 8일 목요일 Reset CSS, 공백처리, 주석 및 벤더프리픽스, CSS Selector, 선택자 우선순위, Box Model (0) | 2022.09.09 |