[멋사] 211116 TIL

MINBOK·2021년 11월 16일

멋쟁이사자처럼

목록 보기

8/19

운동은 정말 재밌다.
식단조절만 좀 잘하면 몸짱될 수 있을거같은데,
세상에는 맛있는게 너무 많다.😁
오늘 샌드백을 잘못찼는지 발목이 좀 아프다.
자고일어나면 괜찮아야할텐데...

어제와 오늘은 멋사 수업에서 Flex와 Grid를
정리하는 시간을 가졌다.
Flex와 Grid 둘다 어렵다고 생각했는데
한번 더 정리해주시니까 한결 이해가 잘되는것같다.

delay : transition 실행을 지연시킴, s/ms사용가능, 기본값은 0s(지연없음), 음수의 경우는 절댓값을 적용
duration : transition의 지속시간을 설정, s/ms, 기본값 0s(transition 실행X)
property
- all : 모든 속성에 transition 적용
- none : 모든 속성에 transition 값 적용X
- property : transition을 적용하고 싶은 속성 지정
- initial : 속성의 기본값으로 설정
- inherit : 부모의 속성을 상속받음
- timing - function : transition의 진행 속도를 설정
  - ease : 느리게 시작해서 빨라졌다가 다시 느려지며 종료
  - linear : 처음부터 끝까지 일정한 속도
  - ease-in : 천천히 시작함
  - ease-out : 천천히 끝남
  - ease-in-out : 천천히 시작해서 천천히 끝남
  - step-start : 시작하는 시점에 스텝을 끊어줌 (땋! 이런느낌..ㅋㅋ)
  - step-end : 끝나는 시점에 스텝을 끊어줌
  - initial : 속성의 기본값 적용
  - inherit : 부모의 영향을 받음
  - cubic-bezier(n, n, n, n)를 통해 베지어 곡선에 원하는 값을 넣을 수도 있음
```
/*transition-property 예시*/

div {
		 width: 100px;
		 height: 100px;
		 background-color: red;
		transition-property: width, height;
		transition-duration: 2s;
     }
     
     이 경우 transition은 
     width, height에만 적용됨
```

transition: property, duration, timing-function, delay

MDN_property https://developer.mozilla.org/en-US/docs/Web/CSS/transition-property
W3C_initial https://www.w3schools.com/cssref/css_initial.asp
timing - function_codepen https://codepen.io/yunjipark0623/pen/zYOBjJd?editors=1100

scale : 가운데를 중심점으로 크기를 변화시킴,
ex) scale(2): 가로세로 모두 2배 크기가 커짐
scale(x,y) : X축과 Y축을 별도로 설정가능
rotate : 객체를 회전시킴, 360deg=1turn으로도 사용가능
translate : X축과 Y축 방향으로 이동, 음수 사용가능
skew : 뒤틀기 , 단위는 deg
origin : 객체의 기준점 변경(기본값은 가운데)
left, right, top, bottom, center, left-top...등으로 사용가능, transform-origin:X축, Y축;으로도 사용가능