📌 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 상태를 변하는 모습을 애니메이션화 한다. ex)style에서 a와 a:hover이 있다 - state가 없는 요소에 붙여야 한다. => ex) a:hover 불가능 - 가장 처음 태어난 곳(root), element에 있어야 한다. - 변화를 시키려면 양쪽 같은 속성이 꼭 있어야한다. - All = a 에서 a:hover 전부 변화 - Element를 선택해서 변화도 가능 😮Transition 명령어 (* = 대부분 사용) - Linear: 같은 속도로 변화 - *Ease-in: 초반에 빠르게 - *Ease-in-out: 느림 – 가속 - 느림 - *Ease-out: 끝에서 느리게 - Ease: 느린 시작 - 빠르게 - 천천히 종료(기본값). 🎉 transition 명령어 직접 경..