will-change, Focus-inside, transition

📌 Will-change  

기본적으로 브라우저에게 "뭔가 바뀔 것 이다" 말해준다.

브라우저는 애니메이션을 더 나아지게 한다. (브라우저에게 렌더링 힌트를 준다.)

Element에 실행되길 기대하는 변화를 명시함.

 

Will-change는 그래픽카드를 이용해서 애니메이션을 가속화한다

 

📌 Focus-inside

내부적으로 focus된 element가 있는지 알 수 있도록 해준다.

 

Ex) rely:focus-within 

reply 내부에 어떤 element가 focus되어 있다면 이라는 뜻

.reply:focus-within .reply__column:first-child {
  display: none;
}​

설명: reply 안에 reply__column:first-child 가 있다면 display는 none이 된다는 뜻

 

 

 

📌 Transition

transition: all

적용할 element에 작성하면 부드럽고 자연스럽게 행동한다..