[CSS]#15 vw, vh, %(percent)/animation: forwards

▶vw, vh, %(percent) 구분

100vh = The screen's height = view height
100vw = The screen's width = view width 
100% = 100% of the PARENT 

▶animation: forwards

CSS animation(@keyframe)을 활용해서 어떤 화면을 띄웠다가 없애고 싶을 때 forwards라는 

속성값을 쓰면 된다. 우리가 이전에 사용했던 animation 속성값으로는 infinite 가 있었는데 해당 animation을 

끊임없이 연속재생하기 위해서 사용했었다. 

forwards 개념: The final propery value(as defined in the last @keyframes at-rule) is maintained after the animation completes. -> 키 프레임의 마지막 값이 애니메이션이 끝나는 시점으로 유지된다. 즉, 마지막 값을 끝으로 애니메이션이 시각적으로는 종료되는 것처럼 보인다. 계속 반복되는 infinite와는 대조적으로 애니매이션을 1회만 그리고 그 끝값을 유지하고 싶을 때 사용하는 속성값입니다. 예시로 마지막 속성값이 opacity: 0; 이라면 계속 0값이 화면상에 유지되는 것입니다. 

fowards CSS 사용예시

animation: hideSplashScreen 0.8s ease-in-out forwards;

※주의: 어떤 화면을 띄웠다가 opacitiy: 0; 값만 준다면 화면 상에서는 사라진 것처럼 보이지만 해당 레이어는 페이지 위에 존재하고 있기 때문에 keyframe에 마지막 값으로 opacity:0; 와 visibility: hidden; 을 해줘서 페이지에 다른 버튼들이 눌릴 수 있게끔 해줘야 한다. 

visibility: hidden 개념:

visibility 값을 hidden으로 설정한 요소는 접근성 트리에서 제외됩니다. 즉 해당 요소와, 그 모든 자손 요소는 스크린 리더가 읽지 않습니다. -> 마우스에 걸리지 않게 빠져버리는 것, 브라우저가 이 요소를 무시하게끔 trick을 쓴 것이죠 (하지만, HTML에서는 진짜로 사라진 것이 아닙니다. 그러므로 정말로 뭔가를 숨기고 싶거나 html을 제거하고 싶다면 이 속성을 사용하는 것이 아니라 javaScript를 사용하는 것이 적합합니다.)