ease-in, ease-out / forwards / animation-delay / box-shadow / overflow-wrap

ease-in/ease-out

https://css-tricks.com/ease-out-in-ease-in-out/

 

ease-in

처음에 느리게 시작해서 속도가 마지막에 빨라짐.

Component가 화면 빠져나갈때

 

ease-out

처음에 빠르게 시작해서 속도가 마지막에 느려짐.

Component가 화면 들어올때

 

forwards 

애니메이션 실행시 사용. 애니메이션 끝났을때 해당 컴포넌트의 마지막 상태 유지. 

https://www.w3schools.com/cssref/css3_pr_animation-fill-mode.asp

 

animation-delay

start the animation after n seconds. 

 

box-shadow

box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25),

    0 8px 16px -8px rgba(0, 0, 0, 0.3), 0 -6px 16px -6px rgba(0, 0, 0, 0.025);

왜 이렇게 만드는건지 꼭 생각해보기

 

overflow:scroll VS overflow:auto

Auto will only show a scrollbar when any content is clipped.

Scroll will however always show the scrollbar even if all content fits and you cant scroll it.

 

notification.js와 chat.js는 socket에서 import되고 socket은 다시 main.js에서 import.

그러므로 notification과 chat은 main에서 import할 필요 x. 

 

overflow-wrap

글씨가 스페이스 없이 이어져서 단어처럼 보일경우 parent 노드 밖으로 한 줄로 나가는 경우 있다. 

방지 :