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

ktmihs·2021년 10월 4일
0

HTML-CSS

목록 보기
10/14
post-thumbnail

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

  • directionwrap 의 단축 속성
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로 따로 변경할 수 있음 */
profile
💛

0개의 댓글