22-09-19-TIL

flex-item

flex-basis, flex-grow, flex-shrink 는 flex-container의 상태에 따라 flex-item의 레이아웃을 결정하는 속성

flex-basis

flex-item 의 크기를 지정
axis의 방향에 따라 달라진다.
내부의 컨텐츠에 따른 유연한 크기

주축에 따라 basis가 넓이가 되기도 하고, 높이가 되기도 한다.

width, flex-basis 두 개의 값이 존재할 때 width가 영역을 강제하지만 basis의 값을 우선한다.

width 값은 넓이를 강제한다.
내용이 많아도 길이의 변화가 없이 그냥 넘어감...

basis는 컨텐츠의 크기만큼 늘어난다.

flex-grow

flex-basis	값에서 더 늘어나도 되는지 지정하는 값
늘어날 수 있는 공간이 있다면 그 공간을 모두 동일하게 차지
flex-grow는 0이 초깃값
flex-grow:1 -> 모두 동일한 크기 공간 할당
flex-grow:2 -> 하나의 자식만 다른 자식보다 두 배의 여백 공간 할당

콘텐츠 크기를 제외한 여백의 비율

flex-shrink

컨테이너 공간이 줄어들때 flex-basis 값에서 더 줄어도 되는지 지정하는 값
1이 기본값

align-self

부모의 align-items 속성을 덮어 flex-item에게 개별적인
align-items속성을 부여

1. 부모에게 주는 중앙정렬
주축방향 정렬
justify-content:center;
교차축 방향 정렬
align-items:center;

2. 부모에게 주어 전체를 이동
align-items:center;
align-items:flex-start;
align-items:felx-end;

3. align-self
align-self:center;
align-self:flex-start;
align-self:flex-end;

Grid

부모 컨테이너 요소 안에서 x축 y축 모두 이요하여 배치하는 내부 디스플레이 타입

grid-container

display:grid;
로 그리트 컨테이너와 아이템 설정

grid-template-columns

열방향 그리드 트랙의 사이즈 설정
grid-template-columns: 1fr 1fr 1fr;
fr : fraction (분수, 일부, 비율)

grid-template-rows

행방향 그리드 트랙의 사이즈 설정
grid-template-rows: 1fr 1fr 1fr 1fr;

repeat(반복 횟수, 반복할 트랙 셋팅 값)

grid-template-rows: repeat(3, 1fr);

minmax()

최소와 최대 사이의 범위를 설정
grid-template-columns: repeat(3, minmax(50px, 150px)
열방향 최소 넓이 50px, 최대 넓이 150px

auto-fill & auto-fit

반복 카운트 대신 컨테이너의 넓이에 따라 가능한 많은 그리드 컬럼 배치
grid-template-columns: repeat(auto-fill, minmax(50px, auto);

gap

셀과 셀사이의 간격을 설정할 때 사용
마진 대신 편리하게 사용하지만 익스플로러 미지원

grid-area

그리드 아이템 영역 설정하기
그리드 아이템이 차지하는 영역 범위와 위치 설정 (시작과 끝 설정)
기준 : grid-line 번호

grid-column-start:1;
grid-column-end:4;
grid-row-start:3;
grid-row-end:4;

grid-area : row-start,column-start,row-end,column-end 순서;

grid-area로 영역의 이름을 짓고
grid-template-areas 속성을 통해 해당 영역 범위를 시각적 표현 가능
---------------------------------------
grid-template-areas:
".       .       .       time"
"header  header  header  header"
"aside-a main    main    aside-b"
"footer  footer  footer  footer";

transition

변화가 일정 시간에 거쳐 일어나도록 함

transition-delay

얼만큼 기다렸다가 실행할지 결정

transition-duration

transition이 일어나는 지속 시간 설정

transition-property

어떤 속성에 효과를 줄지 설정

transition-timing-function

transition의 진행 속도 설정
transition-timing-function: steps(3, start);

transform

형태 변형

scale

요소의 크기를 변환
중심점이 가운데 -> 가운데 중심으로 커짐

rotate

회전, 입력값만큼 회전, 사용 단위 : deg(degree)

translate

왼쪽 상단을 기준으로 x축 (오른쪽), y축 (아래방향)으로 이동

skew

외곡하다 / 상자 비틀기
각도로 표시(deg)

transform-origin

기준점을 변경할 때 사용