[HTML/CSS] 애니메이션, flexbox

1. CSS CH 6-9

CH10. 애니메이션

1) 애니메이션 개요

• transition ➡ user의 특정 action에 따라 효과가 적용됨
• animation ➡ 자동으로 요소가 움직이게 할 수 있음 다수의 스타일에 대해서도 적용할 수 있음
  
• keyframe을 미리 만든 후, 갖다쓰는 개념

2) @keyframes

• 애니메이션 중간중간의 특정 지점들을 거칠 수 있는 키프레임을 설정할 수 있음

.box {
	width: 100px;
	height: 100px;

	animation: slidein 2s infinite alternate;
/* slidein을 2초동안, 무한반복, 반대로도 적용 */
}

/* 두 가지만 적용할 때 */
@keyframes slidein {
	from{
		margin-left: 100%;
		width: 100%;
	}
	to{
		margin-left: 0%;
		witdh: 300%;
	}
}

/* 그 이상을 적용했을 때, 지점에 마다 바뀌게 됨
	이 설정으로 시작과 끝을 같게 만들어 연결되게 만들 수 있음 */
@keyframes identifier {
	0% { top: 0; left: 0;}
	30% { top: 50px; }
	68%, 72% { left: 50px;}
	100% { top: 100px; left: 100%; }
}

3) animation-name

- keyframes의 이름 - transition property에 대응 - 기본값: none

animation-name: [사용할 keyframes의 이름 작성]

⚠ 작성 방법 주의사항

• 대소문자 구분
• a-z, A-Z, - , _ 만 사용 가능
• global 속성을 이름으로 사용하면 X
• 되도록 상속되지 않게 별도로 작성

4) animation-duration

• 애니메이션의 한 사이클을 완료하는 데 걸리는 시간 지정
  • 계속해서 반복 재생할 수 있음
• transition의 duration에 대응
• 음수 값은 유효하지 않음 (0 이상의 양수 값)

animation-duration: 1.5s

5) animation-delay

• 애니메이션이 시작할 시점을 지정
• transition의 delay에 대응
• 음수 값을 넣을 수 있음
  • 양수 값 → 지정된 시간이 경과한 후, 애니메이션 시작
  • 음수 값 → 애니메이션이 즉시 시작되지만, 애니메이션 주기의 도중에 시작 ex) -1s 일 경우, 1초 전에 시작한 것처럼 해당 위치부터 시작
    

6) animation-timing-function

• 중간과정의 시간을 조정

ex) 처음에는 빠르게, 나중에는 느리게

• 기본값: ease
• transition-timing-function에 대응

animation: my-first-animation 1s infinite;
animation-delay: 1.5s;
animation-timing-function: ease;

7) animation-iteration-count

• 반복 횟수
• transition에는 없던 새로운 속성
• 기본값: 1 (1회 반복)

**animation-iteration-count**: infinite;
/* 무한 반복 */

8) animation-direction

• 재생 방향을 지정할 수 있음
• 기본값: normal

animation-direction: reverse;
/* 매 사이클마다 역방향으로 재생 */
animation-direction: alternate;
/* 매 사이클마다 각 주기의 방향을 뒤집음 */

9) animation-play-state

• 재생 상태 일시정지하거나 재생하게 만들 수 있음
  
• 기본값: running

animation-play-state: paused;

10) animation-fill-mode

• 애니메이션이 실행 전과 후에 대상에 스타일을 적용하는 방법을 지정
• 기본값: none 실행되지 않을 때, 대상에 스타일을 적용하지 않음
  

animation-fill-mode: forwards;
/* 애니메이션의 마지막 keyframe에 의해 설정된 계산된 값을 유지 */
animation-fill-mode: backwards;
/* 애니메이션이 적용되는 즉시 첫 번째 관련 keyframe에 의해 설정된 계산된 값 적용 */
animation-fill-mode: both;
/* 모두 적용 */

11) animation (shorthand)

• duration, delay 순서로 작성

animation: deration, timing-function, delay, iterneation-count, direction, fill-mode, lay-state, name;
/* 이름과 duration은 작성해야함 */

---

CH11. flexbox

1) flexbox 개요

• 행과 열 형태로 항목 무리를 배치하는 일차원 레이아웃 메서드
• 부족한 공간에 맞추기 위해 축소되거나 여분의 공간을 채우기 위해 변형됨

display: flex;
/* 부모 요소에 속성 추가 */ 

2) 용어

• 1차원의 개념(직선정렬)이기 때문에 용어를 잘 알아두어야 함

flex container: 부모 요소

flex item: 자식 요소

main axis: 주축(왼쪽에서 오른쪽)

cross axis: 교차축(주축에 수직을 이루는 축)

3) Container

display

• item이 아닌, container에서 설정
• 기존의 display는 앞뒤 요소( <display-outside> )나 내부 layout( <display-inside> )을 동시에 같이 사용
• 키워드를 나누어 사용
• <display-outside>: inline, block
• <display-inside>: flex, grid

/* css3 이전 */
display: inline flex;
/* css3 */
display: inline-flex;
	/* - 로 내외부 동시에 사용 가능 */

flex-direction

• 컨데이너 내의 아이템을 배치할 때, 사용할 주축 및 방향을 지정
• 주축의 위치와 주축의 방향에 따라 네 가지 속성이 존재

flex-direction: row;
/* main axis, 좌->우 */
flex-direction: row-reverse;
/* main axis, 우->좌 */
flex-direction: column;
/* cross axis, 상->하 */
flex-direction: column-reverse;
/* cross axis, 하->상 */

flex-wrap

• item들을 강제로 한 줄에 배치되게 할 것인지(item width 줄어듦), 가능한 영역 내에서 벗어나지 않고 여러 행으로 나누어 표현할 것인지 결정
• N개의 container를 가진 것처럼 표현됨
• 기본값: nowrap
  ➡ 강제로 한 줄에 배치
  

flex-wrap: wrap;
/* 너비가 줄어들면, 본인의 너비를 유지한 채 여러 행에 걸쳐 표현됨 */

flex-flow

• direction 과 wrap 의 단축 속성

flex-flow: row wrap;

4) Item

order

• 현재 아이템의 배치 순서를 지정
• 일반적으로 코드 위치에 따라 지정
• 기본값: 0
• 순서는 값의 오름차순

order: -1;
order: -4;
/* 두 아이템이 각각의 속성을 갖고 있다면 -4를 가진 아이템이 앞으로 옴 */

flex-grow

• item요소가 container 요소 내부에서 할당 가능한 공간의 정도를 선언
• 내부 공간이 화면 크기에 따라 유연하게 변경됨
• 기본값: 0 (0 이상의 숫자)
  ➡ 본인의 자리만큼만 차지
  

flex-grow: 1;
/* 양 옆의 남은 공간 없이 item이 동일하게 커져 모두 차지 */

✔ 남은 공간을 n으로 자른 후, 각가의 grow에 설정해준 값 만큼 가져감(설정해준 대로 비율이 달라짐)

flex-shrink

• flex-grow의 반대 개념
• item 요소의 크기가 container보다 커질 때, 축소시키는 속성
• 기본값: 1 기본값이 1이기 때문에, container의 크기가 줄어들면 자동으로 item들의 크기가 줄어들었음
  

flex-shrink: 2;
/* n만큼 줄어드는 크기가 늘어남 */

• item 내부의 내용보다 더 줄이게 된다면 container를 넘어가게 됨

flex-basis

• flex item의 초기 크기를 지정
• box-sizing을 지정하지 않는다면 content box크기가 box의 크기가 됨

flex-basis: 0;
/* content 이후의 영역 기준X, box 전체가 기준이 됨 */
flex-grow: 5;
/* item의 크기를 container 기준으로 5만큼 가져감 */

flex (shorthand)

• 하나의 flex item이 자신의 container가 차지하는 공간에 맟주기 위해 크기를 키우거나 줄이는 방법을 설정

flex: grow, shrink, basis;
/* 2개 작성 시, 숫자만 나열 -> grow, shrink 
							뒤에 단위를 줌 -> grow, basis */

flex: initial;
/* 0 1 auto */
flex: auto;
/* 1 1 auto */
flex: none;
/* 0 0 auto */

⚠ flex shorthand 작성 시 주의사항
기본값: 0 1 auto 이지만 1개 또는 2개의 단위 없는 숫자 값을 사용할 때, basis는 작성하지 않으면 auto가 아닌, 0이 됨

5) Container2

justify-content

• 주축을 기준으로 item들을 어떻게 정렬할지에 대한 속성

justify-content: flex-start;
/* 주축이 시작되는 위치부터 정렬 - 왼쪽 정렬처럼 보임(주축에 따라 달라지기 때문에 정렬과 같은 값은 아님 !) */
/* justify-content를 설정할 때는, flex-direction을 함께 작성해야 보다 정확한 설정이 됨 */ 
justify-content: flex-end;
/* 주축이 끝나는 위치부터 정렬 - 오른쪽 정렬처럼 보임 */
justify-content: center;
/* 가운데 정렬 */
justify-content: space-between;
/* 화면 크기에 따라 item끼리의 여백이 동일하게 늘어남 */
justify-content: space-around;
/* 화면 크기에 따라 item의 양 옆으로 동일한 여백을 줌 */
/* 간격을 계산할 때, between은 item사이의 여백, around는 item 양 옆에 여백 */

align-items

• 교차축에 관한 정렬
• items가 한 줄일 때 정렬
• 전체 컨테이너 중 items를 어디에 위치하게 할 건지 결정

align-items: stretch;
/* 기본값: flex container 세로 전체의 값을 가짐 */
align-items: start;
/* 맨 위쪽, 시작 부분에 위치 */
align-items: end;
/* 맨 위쪽, 끝 부분에 위치 */
align-items: center;
/* 맨 위쪽, 가운데 부분에 위치 */

align-content

• items가 여러 줄일 때 정렬
• flex-wrap이 wrap일 때

align-content: start;
/* 교차축의 시작 부분이 맨 위 */
align-content: end;
/* 교차축의 끝 부분이 맨 위 */
align-content: center;
/* 교차축의 가운데 부분이 맨 위 */
align-content: space-between;
/* item 간이 아닌 items 간의 간격이 동일하게 늘어남 */
align-content: space-around;
/* item의 양옆 간격이 아닌 items의 상하 간격이 동일하게 늘어남 */

6) Item2

align-self

• 자기 자신만 정렬

align-self: stretch;
/* align-items와 속성값이 같음 */
/* align-items로 정렬된 것 중, 별도로 작성하고 싶다면 self로 따로 변경할 수 있음 */