코코아톡 클론 코딩하면서
height : 100vh; 의미 : 화면 높이의 100%
width : 100vw; 의미 : 화면 넓이의 100%
애니메이션은 작동하면 다시 처음 상태로 돌아옴. 처음 상태로 돌아오지 않게 하려면?
속성에 마지막에 forwards를 추가해야함.
투명도가 1에서 0으로 바뀌는 애니메이션 효과(hideSplashScreen)가 있음
투명도 0인 상태를 계속 유지하고 싶다면?
마지막에 forwards를 추가(element는 opacity가 0인 채로 있는 거지 element자체가 사라진 것은 아님)
+만약 애니메이션이 작동되는 걸 delay시키고 싶다면?
animation-delay : 1s;식으로 작성하면 됨. 그러면 1초 후에 애니메이션이 작동될 것임
display : none; 과 visibility : hidden; 의 차이!?
우선 display : none;을 할 경우엔 해당 element가 차지했던 영역이 삭제되는 것이랑 같음
반면 visibility : hidden;은 영역은 그대로 존재하고 보이지만 않을 뿐임.
will-change: ;
element에 예상되는 변화의 종류에 관한 힌트를 브라우저에 제공케 한다. 그래서 실제 요소가 변화되기 전에 미리 브라우저는 적절하게 최적화할 수 있다.
element:hover // 마우스를 올렸을 때
element:focus-within // 탭키로 눌렸거나 키보드 칠 수 있는 상태이거나 뭐 그럴 때?
a 태그로 이전 페이지로 돌아가고 싶을 때?
<a href="javascript:history.back();"> 를 사용