오늘 내용이 참 많구나!

Flex

flex-basis

• 주 축에 따라 basis가 너비가 되기도 하고, 높이가 되기도 한다.
• width값과 basis값이 같이 있으면 basis값을 우선시 한다.
• width의 값은 너비를 강제한다.

flex-wrap : 넓이를 다 포함하지 못할 때, 개행한다.

flex-grow

• 모두다 늘어날 수 있는 공간이 있다면 그 공간을 동일하게 차지한다. flex-grow의 초기값은 0.
• 모두 동일한데, 한 아이템만 flex-grow의 값이 다른 경우, 콘텐츠 크기를 제외한 여백의 비율, 줄어들 때에도 비율만큼 줄어든다.

flex-shirink

• 기본값은 1. 실무에서는 주로 더 줄어들지 않기 위해서 사용한다.

flex : . . .

• ex) flex : 2 300px >> flex-grow:2, flex-shirink:1, flex-basis:300px
• ex) flex : 1 0 100px; >> flex-grow:1, flex-shirink:1, flex-basis:300px

order

숫자의 크기에 따라서 정렬이 되는것!! 숫자의 순서에 따르는 것이 아니다.

gap 이 녀석 IE에서 지원을 안해,,, 쓸 떄 조심~

Grid

기본적인 속성은 게임을 통해 숙지했다.
한번 더 해봐야할듯 근데 ㅋㅋ;;
https://cssgridgarden.com/#ko

grid-template-r,c

• grid-template-collumns
• grid template-rows

repeat(n, 100px, 100px)

• grid-template-columns: repeat(3, minmax(50px,150px)

auto-fill & auto-fit

• 아니 이게 해석이랑 느낌이 조금 다르다??

grid-r,c-start,end

• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end

grid-column : 1 / 3처럼 사용 가능

grid-row 도 마찬가지

grid-area : g-r-s / g-c-s / g-r-e / g-c-e로 사용이 가능하다.

• ex)grid-area : 1/1/3/3

grid-span : 위와 달리 칸을 선택할 수 있다!!

grid-template-columns

• grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
  "header header header"
  "main main aside"
  "footer footer footer";

• header{grid-area:header;}

grid-template-columns:repeat(4,1fr)

• 간격은 맞춰주는 것이 좋다.
• 넓이를 비율상 많이 주고 싶으면, 아래 코드처럼.

  grid-template-areas:
                     ".       .       .       time"
                     "header  header  header  header"
                     "aside-a main    main    aside-b"
                     "footer  footer  footer  footer";

Transition

Animation

transition, animation은 직접 좀 맞아봐야할듯,,, 후,,,