[4주차] 4. CSS의 Animation 속성 & Flex container 속성

애니메이션 animation

• 요소에 애니메이션을 설정/제어
• 애니메이션은 기본적으로 프레임으로 이루어져 있다.
• 이 속성을 통해 실질적인 애니메이션 프레임을 만들어내는 것이 아니라 만들어낸 프레임을 제어하는 데 사용
• 애니메이션을 직접적으로 만들어주는 것이 아니라 keyframes규칙에 설정된 애니메이션의 정의를 설정하고 개별 속성들을 통해 제어하는 개념
• 실질적으로 애니메이션을 선언하는 것은 keyframes 규칙이다.
• 다양하고 풍부한 내용들을 움직이게 만들 수 있다.

 

 

1. 단축 속성

• animation : 애니메이션이름(keyframes 규칙으로 만들어져 있는 이름) 지속시간 [타이밍함수 대기시간 반복횟수 반복방향 전후상태 재생/정지];
• duration(앞)과 delay(뒤) 순서 지키기

2. 개별 속성

• animation-name : @keyframes 규칙(애니메이션 프레임)의 이름 설정(연결)
  • none : 기본 값으로 애니메이션을 지정하지 않는 것과 동일
  • @keyframes 이름: 이름이 일치하는 @keyframes 규칙의 애니메이션 적용
• animation-duration: 애니메이션의 지속 시간 설정
  • 만든 애니메이션을 몇초에 걸쳐서 재생할 것인가
  • 시간 : 기본값은 0s이다, 지속시간을 설정한다.(s, ms 단위 사용 가능 1s=1000ms)
• animation-timing-function: 타이밍 함수 지정
  • transition timing function 내용과 동일
  • 참고 https://easings.net/ko
  • ease함수와 timing 함수는 그래프들을 내부적으로 제공하고 그 그래프에 맞게 전환효과 적용되는 개념
  • ease : 기본값으로 빠르게 진행되다가 천천히 끝남, cubic-bazier(.25, .1, .25, 1)
  • linear : 일정한 속도로 동작, cubic-bazier(0,0,1,1)
  • ease-in: 느리게 시작해서 빠르게 끝남, cubic-bazier(.42, 0, 1, 1)
  • ease-out : 빠르게 시작해서 느리게 가는데 ease와 빠름과 느림이 조금 다름, cubic-bazier(0, 0, .58, 1)
  • ease-in-out : 느리게 시작해서 빠르게 올라갔다가 다시 느리게 끝남 cubic-bazier(.42, 0, .58, 1)
  • cubic-bazier(n,n,n,n): 자신만의 값을 정의, 컴퓨터가 적용하기 좋은 함수, 수치화 해서 입력할 수 있는 배경지식 있으면 넣는 것도 괜찮지만 위 속성들처럼 특정한 이름이 있는 것을 쓰는 것이 좋다.
  • steps(n): n번 분할된 애니메이션 적용, step으로 각각의 횟수대로 쪼개서 딱 그부분들만 보여주는 개념
• animation-delay: 애니메이션의 대기 시간 설정
  • 애니메이션이 얼마만큼 기다렸다가 시작할 것인지
  • 시간: 기본값은 0s, 대기시간 설정
  • 음수가 허용된다. 단 바로 음수값 만큼 건너뛰고 바로 시작한다.(ex)-1s일 경우 duration이 3초라면 2초만 동작하고 앞에 1s는 생략됨)
• animation-iteraction-count : 애니메이션의 반복 횟수 설정
  • 숫자 : 기본값은 1이고 몇번에 걸쳐서 반복할 것인가 반복횟수를 설정한다
  • infinite: 무한반복
• animation-direction : 애니메이션의 반복방향 설정
  • normal: 기본값으로 정방향만 반복한다.
  • reverse : 역방향만 반복

[무한 반복시 제대로 효과 확인 불가, 왕복이여서 횟수를 한번씩 더 소비한다.]

• alternate: 정방향에서 출발해서 역방향으로 끝나는 반복(왕복)
• alternate-reverse : alternative의 반대, 역방향에서 시작해서 정방향으로 끝나는 반복(왕복)
• animation-fill-mode: 애니메이션의 전후 상태(위치) 설정
  • none : 기본값이다. 기존위치에서 시작-> 애니메이션 시작 위치로 이동 -> 동작 -> 기존 위치에서 끝
  • forwards : 기존 위치에서 시작 -> 애니메이션 시작 위치로 이동 -> 동작 -> 애니메이션 끝 윙치에서 끝
  • backwards: 애니메이션 시작 위치에서 시작 ->동작 -> 기존위치에서 끝
  • both : 애니메이션 시작 위치에서 시작 -> 동작 -> 애니메이션 끝 위치에서 끝
• animation-play-state: 애니메이션의 재생과 정지 설정
  • running : 기본 값으로 애니메이션을 동작한다.
  • paused : 애니메이션 일시 정시

 

---

Keyframes rules

• 2개 이상의 애니메이션 중간 상태(프레임)을 지정
• keyframes 선언시 이름을 꼭 가지고 있어야 함
• %로 애니메이션 설정 가능(0%부터 100%까지의 다양한 단계의 애니메이션 내용 추가 가능)
  • transition은 전상태(0%)와 후상태(100%)의 내용만 지정 가능
• 중간 과정의 프레임들 설정 가능
• 선언 방식~

@keyframes 애니메이션 이름 { 0%{속성: 값;} 50%{속성: 값;} 100% {속성: 값;} }

 

---

Multi Columns

: 일반 블록 레이아웃을 확장하여 여러 텍스트 다단으로 쉽게 정리하며, 가독성 확보

1. columns

• 단축속성
  • columns: 너비 개수;
• auto : 기본 값은 auto로 브라우저가 단의 너비와 개수 설정
• columns-width : 기본값 auto
• columns-count: 기본값 auto
• 개별 속성
• columns-width: 기본 값은 auto로 각각 단의 최적너비 설정
  • 각 단이 줄어들 수 있는 최적 너비(최소 너비)를 설정하며 그 요소의 너비가 가변하다가 하나의 단이 최적 너비보다 줄어들 경우 단의 개수가 조정되면서 3개 단이 2개 될 수도 있고 2개 단이 1개가 될 수 있다(단의 너비가 최적 너비보다 줄어들 경우 단의 개수 조정됨)
  • 신문 기사 설정, 문장 설정 등에 많이 쓰이므로 문장이 최적의 형태로 잘 나오게 하기 위해 단의 개수를 브라우저가 조절할되 지정될 최적의 너비만 설정
  • auto: 브라우저가 단의 너비 설정
  • 단위 : px, em, cm 등 단위로 지정
• columns-count : 기본값은 auto로 단의 개수 설정
  • auto : 기본값으로 브라우저가 단의 개수 설정
  • 숫자 : 단의 개수 설정

2. column rule

: 단과 단사이의 선을 만들어 낼 때 그 선을 정의하는 속성

• border와 개별 속성이 비슷
• 구분선(column-rule)은 단과 단 사이 간격 중간에 위치
• 단축 속성
• column-rule: 두께 종류 색상;
• 개별 속성
• column-rule-width: 선의 두께, 기본값은 medium
• column-rule-style : 선의 종류, 기본값은 none
• column-rule-color : 선의 색, 기본값은 요소의 글자 색과 동일

3. column gap

: column rule를 기준으로 하여 좌측여백, 우측 여백을 설정

• 단과 단사이의 간격 설정
• normal: 기본 값으로 브라우저가 단과 단 사이의 간격 설정(1em: font size)
• 단위 : px. em. cm 등 단위로 지정

 

---

Flex

: 수평 수직 정렬에 관련된 속성

1. 개요

• 이 속성이 나타나기 전까진 table, display: inline, float을 통해 수평 수직 정렬을 대체 했었다
• flex는 container와 item 두개의 개념으로 나뉨
  • container은 items를 감싸는 부모 요소이며 item은 그 자식요소이다. items 정렬 시 container가 필수
  • container에 display, flex-flow(flex-direction, flex-wrap). justify-content, align-content, align-items 속성 사용 가능
  • items에 order. flex(flex-grow, flex-shirink, flex-basis), align-self 속성 사용 가능
• container 크기에 맞춰 item들의 크기 변화(flex-basis:auto일시)

2. flex-container 속성

display : 요소의 특성 설정, flex 부여 가능 (flex container 정의)

• flex : container 자체가 기본적으로 블록요소처럼 활용,
• inline-flex: container 자체가 마치 inline 요소처럼 수평처럼 쌓임
• flex와 inline-flex의 다른 점 : flex container를 정의하는 것은 동일하지만 그 container 요소가 block 요소와 같을 것인지 inline 요소와 같을 것인지 다르다.

flex-flow

• 단축 속성 : flex-flow: flex-direction값 flex-wrap값;

1. flex-direction : item들의 주요한 축 설정

• main-axis : 주축
• cross-axis : 주축의 교차축 ex) main-axis가 수평이면 cross-axis는 수직
• flex-start(main-start) : 시작점, 주축의 시작하는 면 ex) row의 경우 왼쪽
• flex-end(main : 끝점, 주축의 끝나는 면 ex) row의 경우 오른 쪽
• cross-start와 cross-end는 main-axis가 reverse 되어도 바뀌지 않는다.
• container를 이루는 각각의 item들의 주요한 축(main-axis) 설정
• row : 하나의 줄, 기본 값으로 수평 정렬 (item을 왼쪽에서 오른쪽으로 정렬)
• row-reverse: 오른 쪽에서 왼쪽 정렬
• column: 수직 정렬(위에서 아래)
• column-resverse: 아래에서 위 정렬

2. flex-wrap: items의 여러 줄 묶음, item이 여러 줄이 될 수 있는지 여부 설정

• item 줄바꿈에 대한 개념
• nowrap: 기본 값으로 모든 item들을 여러 줄로 묶지 않고 한 줄에 표시, 무조건 한줄 안에서 표시
• wrap : items를 여러 줄로 묶음, 특정한 줄을 벗어나서 줄바꿈 할 때 사용, item 크기를 유지하되 container 자리가 모자라면 줄바꿈
• wrap-reverse: items를 여러 줄로 묶되 역방향으로 묶음, 아래쪽에서 위쪽으로 쌓이되 왼쪽에서 오른쪽으로 수평으로 쌓임

justify-content : 주축(main-axis)의 정렬 방법 설정

• container에 적용
• flex-start : 기본값으로 시작점을 기준으로 해서 item 정렬, 왼쪽 정렬(무조건x 상대적이여서)
• flex-end : 끝점을 기준으로 해서 item 정렬, 오른쪽 정렬(무조건x 상대적이여서)
• center : item을 가운데 정렬, 정중앙 정렬
• space-between : 첫번째 item과 마지막 item을 각각의 시작점과 끝점에 붙이고 남은 여백을 균등하게 분배해서 정렬
• space-around : 남은 여백을 각각 item들의 왼쪽과 오른쪽(상대적)에 균등하게 분배해서 정렬

align-content: 교차축(cross-axis)의 정렬 방법 설정

• flex-wrap: wrap (두줄)상태이고 여백이 있어야만 제대로 동작(한 줄일 경우 align-items 속성 사용)
• 여러 줄 묶음이고 여백이 있어야만 설정 가능
• stretch : 기본 값으로 container의 교차 축을 채우기 위해 item을 늘림. 요소의 높이값이 정해져 있지 않으면 요소는 자동으로 하나의 줄의 높이 값을 전체적으로 늘려서 사용
• flex-start : 시작점을 기준으로 해서 item 정렬, 전체적으로 위쪽 정렬(무조건x 상대적이여서)
• flex-end : 끝점을 기준으로 해서 item 정렬, 전체적으로 아래쪽 정렬(무조건x 상대적이여서)
• center : item을 가운데 정렬, 정중앙 정렬
• space-between : 첫번째 item과 마지막 item을 각각의 시작점과 끝점에 붙이고 남은 여백을 균등하게 분배해서 정렬
• space-around : 남은 여백을 각각 item들의 위쪽과 아래쪽(상대적)에 균등하게 분배해서 정렬

align-items : 교차 축(cross-axis)에서 items의 정렬방법 설정

• align-content는 container에 여백이 있어야 하고 여러 줄 일 때 우선으로 쓰이고 여러 줄 아닐 땐 justify content와 align item을 사용해서 요소를 정중앙으로 정렬할 수 있다.
• item이 한 줄에 있을 때 사용하는 개념
• stretch : 기본 값으로 container의 교차 축을 채우기 위해 item을 늘림. 요소의 높이값이 정해져 있지 않으면 요소는 자동으로 하나의 줄의 높이 값을 전체적으로 늘려서 사용
• flex-start : 한 줄에서의 시작점을 기준으로 해서 줄 내부에서 item 정렬
• flex-end : 한 줄에서의 끝점을 기준으로 해서 줄 내부에서 item 정렬
• center : item을 가운데 정렬, 줄 내부 정중앙 정렬
• baseline : item을 문자열을 기준으로 정렬(글자 크기가 다 달라도 문자열A을 기준으로 정렬, 요소 자체가 아닌 그 안 문자를 기준으로 함)

 

---

Tips

• css 속성만으로 html에 작성된 것을 제거하거나 변경할 수 없다.