컴퓨터가 코드를 읽는 순서를 이해하고 적용해보기

🎁 코드는 항상 위에서 아래로 읽는다

그렇기 때문에 아래에 있는 코드가 1순위로 적용된다. (읽기는 위에서 아래 / 적용은 아래에서 위)

 

Position fixed를 한 코드와 position:relative를 주지 않고  absolute를 준 코드가 있으면 적용 순서는 아래에서 위로 적용되는 것이다.

 

Absolute를 이용하여 모든 화면을 덮는 div를 만든다고 치자

그렇다면 div가 맨 아래에 위치해야 모든 화면을 덮을 수 있다.

코드를 작성할 땐 항상 읽는 순서를 생각하여 적용되는 순서를 계산해야 된다.

 

 

🎁 적용하기!

화면을 가렸다가 나타나는 애니메이션을 만들어보자!

 

1. 먼저 화면을 가리는 div속성값을 주자

#splash-screen {
  background-color: var(--yellow);
  position: absolute;
  height: 100vh;
  width: 100vw;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 150px;
}

 

 

 

2. 그 다음 키프레임으로 작용순서를 만들고

@keyframes hideSplashScreen {
  Form {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

꼭 form to 가 아니더라도 0% 50% 100% 이렇게 나눌 수 도 있다.

 

 

 

3. Animation을 추가하여 작용하게하자

#splash-screen {  

  background-color: var(--yellow);  

  position: absolute;  

  height: 100vh;  

  width: 100vw;  

  top: 0;  

  display: flex;  

  justify-content: center;  

  align-items: center;  

  font-size: 150px;  

  animation: hideSplashScreen 1s ease-in-out;  

}

 

이렇게하면 애니메이션은 화면을 보여주었다가 다시 처음상태로 돌아가 화면을 가릴 것이다.

 

 

 

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

이때 forwards를 추가하면 final property value(마지막 속성 값)을 유지하게 하여 애니메이션이 끝나고 유지한다.

그래서 화면이 보일 수 있겠지만 여전히 element(splash-screen)는 남아있어서 클릭이 불가능하다.

그래서 몇 가지 속성(property)을 시도해볼 수 있는데

 

그 중 visibility: hidden; 는 마우스에 걸리지 않게 빠져버리게 한다.

참고

 

하지만 브라우저검사를 통해서 보면 element는 아직 존재하고 있다.

그렇기 때문에 우리는 javascript를 이용해야 한다.

 

Javascript는 “뇌”의 역할이기 때문이다.

 

 

 

🎁 애니메이션을 지연시키는 방법

animation-delay: 5s;

 

 

 

🎁 정리하기!

1.     애니메이션의 마지막 값을 기억하고 싶다면 forwards

2.     애니메이션을 반복하고 싶으면 infinite

3.     애니메이션 시작 전 모습을 숨기고싶으면 keyframes이 아닌 element에게도 translate와 opacity에게 값을 줘야한다.

 

 

 

🎁 translate 복습하기

translate() - CSS: Cascading Style Sheets | MDN