1. 전환 & 변환 & 애니메이션

01. Transitions

• CSS 속성의 전환 효과를 지정
• CCS 속성의 시작과 끝을 지정(전환 효과)하여 중간 값을 애니메이션, 단축
• transition-property : 전환 효과를 사용할 속성 이름 : all(default)
• transition-duration : 전환 효과의 지속시간 설정 : 0s(default)
• transition-timing-funtion : 타이밍 함수 지정 : ease(default)
• transition-delay : 전환 효과의 대기시간 설정 : 0s

-1. transition-property

• 전환 효과를 사용할 속성 이름을 설정, 개별
• all : 모든 속성에 적용 : default
• 속성이름 : 전환 효과를 사용할 속성 이름

-2. transition-duration

• 전환 효과의 지속시간을 설정, 개별
• 시간 : 전환 효과가 지속되는 시간 : 0s(default)
• 1s == 1000ms

-3. transition-timing-funtion

• 타이밍 함수(애니메이션 전환 효과를 계산하는 방법) 지정, 개별
• easing funtion(https://easings.net/ko )
• ease : 빠르게 - 느리게 : default : cubic-bezier(.25, .1, .25, 1)
• linear : 일정하게 : : cubic-bezier(0, 0, 1, 1)
• ease-in : 느리게 - 빠르게 : : cubic-bezier(.42, 0, 1, 1)
• ease-out : 빠르게 - 느리게 : : cubic-bezier(0, 0, .58, 1)
• ease-in-out : 느리게 - 빠르게 - 느리게 : : cubic-bezier(.42, 0, .58, 1)
• cubic-bezier(n, n, n, n) : 자신만의 값을 정의(0~1)
• steps(n) : n번 분활된 애니메이션

-4. transition-delay

• 전환 효과가 몇 초 뒤에 시작할지 대기시간을 설정, 개별
• 시간 : 전환 효과의 대기시간을 설정 : 0s(default)
  

02. transform

• 요소의 변환 효과(변형)를 지정
• transform : 변환함수1 변환함수2 변환함수3 ...;
• transform : 원근법 이동 크기 회전 기움임

.box{
	transform: rotate(20deg) translate(10px, 0);
}

-1. transform 2D 변환 함수

• translate(x, y) : 이동(X축, Y축) : 단위
• translateX(x) : 이동(X축) : 단위
• translateY(y) : 이동(Y축) : 단위

.box{
	width : 200px;
	height : 200px;
	background : tomato;
	display : flex;
	justify-content : center;
	align-item : center;
	transition : 1s;
}
.box:hover{
	// position으로 animation으로 주는 것보다 transform의 translate()함수 이용을 추천
	transform : translate(30px, 30px);
}

• scale(x,y) : 크기(X축, Y축) : 없음(배수)
• scaleX(x) : 크기(X축) : 없음(배수)
• scaleY(y) : 크기(Y축) : 없음(배수)
• rotate(degree) : 회전(각도) : deg
• skew(x-deg, y-deg) : 기울임(X축, Y축) : deg
• skewX(x-deg) : 기울임(X축) : deg
• skewY(ydef) : 기울임(Y축) : deg
• matrix(n,n,n,n,n,n) : 2차원 변환 효과 : 없음

-2. transfrom 3D 변환 함수

• translate3d(x, y, z) : 이동(X축, Y축, Z축) : 단위
• translateZ(z) : 이동(Z축) : 단위
• scaled3(x, y, z) : 크기(X축, Y축, Z축) : 없음(배수)
• scaledZ(z) : 크기(Z축) : 없음(배수)
• rotate(x, y, z, a) : 회전(X벡터, Y벡터, Z벡터, 각도) : 없음, deg
• rotateX(x) : 회전(X축) : deg
• rotateY(y) : 회전(Y축) : deg
• rotateZ(z) : 회전(Z축) : deg
• perspective(n) : 원근법(거리) : 단위
• matrix3d(n, n, n, n, n, n, n, n, n, n, n, n, n, n, n, n) : 3차원 변환 효과 : 없음

-3. transform 변환 속성

• transfrom-origin : 요소 변환의 기준점을 설정
• transform-style : 3D 변환 요소의 자식 요소도 3D 변환을 사용할지 설정
• perspective : 하위 요소를 관찰하는 원근 거리를 설정
• perspective-origin : 원근 거리의 기준점을 설정
• backface-visibility : 3D 변환으로 회전된 요소의 뒷면 숨김을 설정

-4. transform-origin

• 요소 변환의 기준점을 설정
• X축 : left, right, center, %, 단위 : 50% (default)
• Y축 : top, bottom, center, %, 단위 : 50% (default)
• Z축 : 단위 : 50% (default) : 0(default)

-5. transform-style

• 3D 변환 요소의 자식 요소도 3D 변환을 사용할지 설정
• flat : 자식 요소의 3D 변환을 사용하지 않음 : default
• perserve-3d : 자식 요소의 3D 변환을 사용

-6. perspective

• 하위 요소를 관찰하는 원근 거리를 설정

• 단위 : px, em, cm 등 단위로 지정

• perspective 속성과 함수의 차이점

• perspective : 관찰 대상의 부모 요소 : perspective-origin // 관찰대상이 여러개 일 때

• transform:perspective() : 관찰 대상 : transform-origin

• perspective 속성은 관찰 대상의 부모(조상) 요소에 적용하여 요소들을 관찰하는 원근거리를 설정하며, transform: perspective() 변환 함수는 관찰 대상에 직접 적용하여 그 대상을 관찰하는 원근거리를 설정

-7. perspective-origin

• 원근 거리의 기준점을 설정
• X축 : left, right, center, %, 단위 : 50% (default)
• Y축 : top, bottom, center, %, 단위 : 50% (default)

-8. backface-visibility

• 3D 변환으로 회전된 요소의 뒷면 숨김을 설정
• visible : 뒷면 숨기지 않음 : default
• hidden : 뒷면 숨김

-9. matrix(a, b, c, d, e, f)

• 요소의 2차원 변환(Transfroms)효과를 지정
• scale(), skew(), translate() 그리고 rotate() 를 지정
• 요소에 일반 변환(Transfroms) 함수(2D, 3D)를 사용하더라도 브라우저에 의해 matrix 함수로 계산되어 적용
• (2D 변환 함수는 matrixfh, 3D 변환 함수는 matrix3d로) 따라서 일반적인 경우는 matrix 함수가 아닌 일반 함수를 사용하면 된다
  

03. 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 : 애니메이션이름 지속시간 [타이밍함수 대기시간 반복횟수 반복방향 전후상태 재생/정지];

.box{
	width : 100px;
	height : 100px;
	background : tomato;
	animation : hello 2s linear infinite both;
}
@keyframes hello{
	0% { width : 200px }
	100% { width : 50px }
}

-1. @keyframes

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

@keyframes 애니메이션이름 {
	0% { 속성 : 값; }
	50% { 속성 : 값; }
	100% { 속성 : 값; }
}
keyframes moveBox {
	0% { left : 100px; }
	100% { top : 200px; }
}

-2. animation-name

• @keyframes 규칙(애니메이션프레임)의 이름을 지정, 개별
• none : 애니메이션을 지정하지 않음 : default
• @keyframes 이름 : 이름이 일치하는 @keyframes 규칙의 애니메이션 적용

-3. animation-duration

• 애니메이션 지속 시간 설정, 개별
• 시간 : 지속 시간을 설정 : 0s

-4. animation-timing-function

• 타이밍 함수(애니메이션 효과를 계한하능 방법) 지정, 개별
• easing funtion(https://easings.net/ko )
• ease : 빠르게 - 느리게 : default : cubic-bezier(.25, .1, .25, 1)
• linear : 일정하게 : : cubic-bezier(0, 0, 1, 1)
• ease-in : 느리게 - 빠르게 : : cubic-bezier(.42, 0, 1, 1)
• ease-out : 빠르게 - 느리게 : : cubic-bezier(0, 0, .58, 1)
• ease-in-out : 느리게 - 빠르게 - 느리게 : : cubic-bezier(.42, 0, .58, 1)
• cubic-bezier(n, n, n, n) : 자신만의 값을 정의(0~1)
• steps(n) : n번 분활된 애니메이션

-5. animation-delay

• 애니메이션의 대기 시간 설정
• 시간 : 대기 시간을 설정 : 0s
• 음수가 허용됩니다. 음수가 있을 경우 애니메이션은 바로 시작되지만, 그 값 만큼 애니메이션이 앞서 시작합니다(애니메이션 주기 도중에 시작)

-6. animation-iteration-count

• 애니메이션의 반복 횟수를 설정, 개별
• 숫자 : 반복 횟수를 설정 : 1
• infinite : 무한 반복

-7. animation-direction

• 애니메이션의 반복 방향을 설정, 개별
• normal : 정방향만 반복 :default
• reverse : 역방향만 반복
• alternate : 정방향에서 역방향으로 반복(왕복)
• alternate-reverse : 역방향에서 정방향으로 반복(왕복)

-8. animation-fill-mode

• 애니메이션의 전후 상태(위치)를 설정, 개별
• none : 기존 위치에서 시작 -> 애니메이션 시작 위치로 이동 -> 동작 -> 기존 위치에서 끝 : default
• forwards : 기존 위치에서 시작 -> 애니메이션 시작 위치로 이동 -> 동작 -> 애니메이션 끝 위치에서 끝
• backwards : 애니메이션 시작 위치에서 시작 -> 동작 -> 기존 위치에서 끝
• both : 애니메이션 시작위치에서 시작 -> 동작 -> 애니메이션 끝 위치에서 끝

-9. animation-play-state

• 애니메이션의 재생과 정지를 설정
• runnimg : 애니메이션을 동작 : default
• paused : 애니메이션 동작을 정지

04. columns (Multi-Columns)

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

• auto : 브라우저가 단의 너비와 개수를 설정 : auto

• columns-width : 단의 최적 너비를 설정, 개별 : auto

  • auto : 브라우저가 단의 너비를 설정
    -단위 : px, em, cm 등 단위로 지정
    * 각 단이 줄어들 수 있는 최적 너비(최소 너비)를 설정하며, 요소의 너비가 가변하여 하나의 단이 최적 너비보다 줄어들 경우단의 개수가 조정 된다

• columns-width : 너비;

• columns-count : 단의 개수를 설정 개별 : auto

  • auto : 브라우저가 단의 개수를 설정
  • 숫자 : 단의 개수를 설정

• columns-count : 개수;

• columns-gap : 단과 단 사이의 간격 설정 : normal

  • normal : 브라우저가 단과 단 사이의 간격을 설정(1em)
  • 단위 : px, em, cm 등 단위로 지정

• columns-gap : 간격;

• columns-rule : 단과 단 사이의 (구분)선을 지정, 단축

  • columns-width : 선의 두께를 지정 : medium
  • columns-style : 선의 종류를 지정 : none
  • columns-color : 선의 색상을 지정 : 요소의 글자색과 동일

• columns-rule : 두께 종류 색상;

  • 구분선 ( columns-rule )은 단과 단 사이의 간격 중간에 위치

• columns : 너비, 개수;

.text{
	columns : 100px 2;
}