Day 28, 29

transition과 animation, transform

• transition : 속성을 전환
• animation : 속성들을 활용해서, 단계별로 변화시키면서 애니메이션 효과 줄수 있음
• transform : 자체 요소 변형(크기, 위치, 기울기, 각도)

flex-box

• 구성요소
  주축(main axis) : 플렉스 박스의 진행 방향과 수평한 축
  교차축(cross axis) : 주축과 수직하는 축
  플렉스 컨테이너(flex-container) : display 속성값으로 inlin
  e-flex가 적용된 요소
  플렉스 아이템(flex item) : 플렉스 컨테이너와 자식 관계를 이루는 태그 요소

• 기본 속성
  display: flex, inline-flex(플렉스 박스 스스로에 대한 flex)
  flex-direction : 플렉스 박스 레이아웃의 주축 방향 지정

속성값	설명
row	주축 방향 왼 -> 오
row-reverse	오 -> 왼
column	위 -> 아래
column-reverse	아래 -> 위

flex-wrap : 플렉스 아이템의 자동 줄 바꿈 여부를 지정

속성값	설명
nowrap	아이템이 컨테이너를 벗어나도 무시
wrap	아이템이 컨테이너를 벗어나면 줄바꿈
wrap-reverse	-> 아래

flex-flow : direction과 wrap 속성을 한번에 사용할 수 있는 속성

---

flex-box의 정렬 속성

1. justify-content : 주축 방향으로 정렬

• flex-start
• flex-end
• center
• space-between
• space-around
• space-evenly

2. align-items : 교차축 방향으로 정렬

• stretch : 교차축 방향으로 플렉스 아이템의 너비나 높이가 늘어남
• flex-start
• flex-end
• center
• baseline : 아이템의 baseline을 기준으로 정렬

3. align-content : 플렉스 아이템이 두 줄 이상일 때 교차축 방향으로 정렬

4. align-self : 각각의 플렉스 아이템을 교차축 방향으로 정렬 (각각 정렬하고 싶을 때 사용)

---

Grid

• gap : 셀과 셀 사이의 간격
• item : 셀 안에 포함되는 콘텐츠
• line-number : 왼쪽에서부터 1번

(개발자 도구에서 grid 버튼 눌러서 확인 가능)

grid-layout의 기본 속성

• grid-template-columns와 grid-template-rows : layout의 행과 열을 지정

grid-template-rows: 50px 50px;
grid-template-rows: 1fr 1fr; // 비율
grid-template-rows: minmax(55px, 70px) minmax(55px, 70px) minmax(55px, 70px);

grid-template-rows: repeat(3, 70px);
grid-template-rows: repeat(3, minmax(55px, 70px));

grid-template-columns: 50px 100px auto;
grid-template-columns: 2fr 1fr 1fr;
grid-template-columns: minmax(55px, 70px) minmax(55px, 70px) minmax(55px, 70px);
grid-template-columns: repeat(3, minmax(70px, auto));
grid-template-columns: repeat(auto-fill, minmax(calc(100%/8), auto));

• row-gap, column-gap : 행과 열의 간격 조정
• align-items : 그리드 아이템 전체를 셀의 세로 방향으로 정렬 (stretch, start, center, end)
• align-self : 각각의 그리드 아이템을 셀의 세로 방향으로 정렬
• justify-items : 그리드 아이템 전체를 셀의 가로 방향으로 정렬 (stretch, start, center, end)
• justify-self : 각각의 그리트 아이템을 셀의 가로 방향으로 정렬

종류	방향	전체
align-items	세로	O
align-self	세로	X
justify-items	가로	O
justify-self	가로	X

---

Grid-layout의 배치 속성

• grid-template-areas 속성 : 그리드 레이아웃의 행과 열을 이름으로 지정
• grid-area : 그리드 아이템에 이름을 지정
  ex.

.container2 {
            width: 500px;
            height: 500px;
            display: grid;
            border: 1px solid black;
            grid-template-areas:
                "r r r"
                "sb yel o"
                "sb pur o"
                "yg yg yg";
            grid-template-columns: 1fr 2fr 1fr;
        }
        
        
.red2 {
            background-color: red;
            grid-area: r;
        }

.skyblue2 {
            background-color: skyblue;
            grid-area: sb;
        }

.yellow2 {
            background-color: yellow;
            grid-area: yel;
        }

.purple2 {
            background-color: purple;
            grid-area: pur;
        }

.orange2 {
            background-color: orange;
            grid-area: o;
        }

.yellowgreen2 {
            background-color: yellowgreen;
            grid-area: yg;
        }

결과

• grid-column-start, grid-column-end : 열의 시작 번호와 끝 번호 지정
• grid-row-start, grid-row-end : 행의 시작과 끝 번호 지정
• grid-column : 열의 시작과 끝 한번에 지정
• grid-row : 행의 시작과 끝 한번에 지정

// 2번에서 시작해서 4번에서 끝나는 경우
grid-column : 2 / 4; 
grid-row : 2 / 4;

+++ auto-fit과 auto-fill의 차이

• 자동 채우기(auto-fill) : 채움(fill)은 반복 횟수 주어질 경우, 크기 또는 최소, 최대 크기 만큼 계산하여 처리하지만 정해진 수 이상은 처리X

• 자동 맞춤(auto-fit) : 맞춤(fit)은 채움과 유사하게 작동하지만, 그리드 내부에 빈 트랙이 존재할 경우 반복 횟수만큼 반복된 트랙을 빈 트랙 공간을 나눠 핏팅(fitting)