0311
FLEX
주축 ;(가로)
flex-direction(주 축을 설정) :
row (좌 -> 우) / row-reverse(우 -> 좌) / column (위 -> 아래) / column (아래 -> 위)
flex-wrap : (줄 바꿈 여부) :
nowrap(묶음없음) / wrap(여러줄 묶음) - wrap-reverse( 여러줄 묶음(반대)).
justify-content : "주 축"의 정렬 방법
flex-start : Items(컨텐츠)를 시작점 부터 정렬
flex-end : Items(컨텐츠)를 끝점부터 정렬
center : Items(컨텐츠)를 중앙에 정렬 ( 안쪽부터 바깥으로)
space-between : 컨텐츠 사이를 균등하게 정렬
space-around : 컨텐츠의 외부여백을 균등하게 정렬
space-evenly : 컨텐츠를 제외한 크기를 균등하게 정렬교차 축; (세로)
align-items (교차 축의 한줄 정렬) :
stretch : Items를 교차 축으로 늘림
flex-start : Items를 시작점으로 정렬
flex-end : Items를 끝점으로 정렬
center : Items를 가운데 정렬
(baseline : 각 줄의 문자 기준선에 정렬)
align-content :
stretch : Items를 교차 축으로 늘림
flex-start : Items를 시작점으로 정렬
flex-end : Items를 끝점으로 정렬
center : Items를 가운데 정렬
space-between : Item사이를 균등하게 정렬
space-around : Item 사이의 외부 여백을 균등하게 정렬
Animation : Transition&Transform
- transform : 변환 .. 요소의 변환 효과 ;
transform :함수1 함수2 함수3 ...;
(원근법,이동,크기,회전,기울임)- backface-visibility : visible/hidden (3D변환시 부모요소로 뒷면 을 가리기)
- transition : 요소의 전환 효과 ;
transition: 속성명 시간 타이밍 딜레이;
속성명: all / 속성이름
시간 :0s(없음) ns(지속시간n초)
타이밍 : ease(느-빠-느) / linear(일정하게) /ease-in , ease-out , ease-in-out...
딜레이 : 0s(없음)/ 대기시간 지정- animation 속성
@keyframes : 애니메이션 효과를 직접 기능 가능
to/from , 0%~100%
(animation-name(이름),animation-duration(지속시간),anuimation-delay(지연시간),animation-iteration-count(반복횟수),animation-timing-function(반복형태),animation-direction(애니메이션 방향))
단축속성 ex) : animation:keyframes-name 2s ease-in 5s Infinite alternate;
