오늘 한 일

• 강의 중 transition, animation, etc 챕터 수강 완료

공부한 내용

transition

div {
    transition: <property> <duration> <timing-function> <delay>;
}

property 변화가 일어날 CSS 속성이 어떤 것 인지 명시

duration 지속 시간 → ms,s로 표기 (1,000ms===1s)

[timing-function] 변화의 속도 지정(생략 가능)

• ease-in, ease-out, ease-in-out, cubic-bezier( )

[delay] 속도 지연

Animation

@keyframes name {
	from {
		/* Rules */
	}

	to {
		/* Rules */
	}
}

duration 지속 시간

• ms,s (1,000ms===1s)

[timing-function] 변화의 속도 지정(생략 가능)

• ease-in, ease-out, ease-in-out
• cubic-bezier( )

[delay] 속도 지연

iteration-count 반복 횟수 지정

direction 진행 방향

• transition과 Animation의 차이점
  https://www.geeksforgeeks.org/difference-between-animation-and-transition-in-css/

---

Box Shadow

요소에게 그림자를 줄 때 사용

h-offset v-offset blur spread color

x축 y축 | 흐린 정도 | 그림자 사이즈 | 색상

Overflow

width, height 값을 가진 요소 안의 컨텐츠나 자식 요소가 크기를 벗어났을 때 사용

Transform

요소를 2,3차원에서 변형할 수 있게 도와주며, 주변 요소에 영향을 주지 않는다.

translate(x,y)

요소를 원하는 방향으로 위치시킬때 사용

• translate(%,%)⇒ 자기자신의 크기를 기준으로 움직임

scale(N)

요소의 크기를 줄이거나 늘일때 사용

• scale(%) → 숫자의 배율만큼 조정

rotate(Ndeg)

요소의 각도를 돌려줄 때 사용

Visibility

요소를 보이지 않게 하지만 위치는 그대로 (=opacity 0)

visible hidden

해야 할 일

• transform에 대한 추가 복습 필요