[CSS]애니메이션/다단

-animation

 요소에 애니메이션을 설정/제어

값	의미	기본값
animation-name	@keyframes 규칙의 이름을 지정	none
animation-duration	애니메이션의 지속 시간 설정	0s
animation-timing-function	타이밍 함수 지정	ease
animation-delay	애니메이션의 대기 시간 설정	0s
animation-iteration-count	애니메이션의 반복 횟수 설정	1
animation-direction	애니메이션의 반복 방향 설정	normal
animation-fill-mode	애니메이션의 전후 상태(위치) 설정	none
animation-play-state	애니메이션의 재생과 정지 설정	running

 사용법

animation: 애니메이션 이름 지속시간 [타이밍함수 대기시간 반복횟수 반복방향 전후상태 재생/정지];

 

- @keyframes

 2개 이상의 애니메이션 중간 상태(프레임)을 지정

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

 

---

- 다단 Multi-Columns

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

 

- columns

 다단을 정의

값	의미	기본값
auto	브라우저가 단의 너비와 개수를 설정	auto
column-width	단의 최적 너비를 설정	auto
column-count	단의 개수를 설정	auto

 

columns: 너비 개수;

 

- column-gap

 단과 단 사이의 간격 설정 // 기본값 normal

 

- column-rule

 단과 단 사이의 선을 지정

값	의미	기본값
column-width	선의 두께를 지정	medium
column-style	선의 종류를 지정	none
column-color	선의 색상을 지정	요소의 글자색과 동일

column-rule: 두께 종류 색상;

 

 

 

 

 

 

#패스트캠퍼스