[MBTI 테스트(5)] 판다코딩 유튜브_화면전환하기 (애니메이션으로 화면 서서히 사라지기/나타나기)

학습목표 : 화면전환/ 애니메이션 적용/ setTimeout 

 

화면전환하기

 

메인 섹션 > QnA 섹션으로 넘어가야함.

 

아래와 같이 임의로 p 태그를 넣어서

QnA 화면을 뜨게 해본다.

 

    <section id = "qna">
      <p>QnA섹션입니다</p>
    </section>

 

그럼 아래처럼 화면이 뜨게된다.

 

근데,

우리가 하고 싶은건

메인화면이 사라진 후에

QnA화면이 나타나는 것이다.

 

따라서

qna.css 파일을 생성한 뒤

display:none을 입력하고

 

css 파일을 index.html에 넣어준다.

(항상 링크를 걸어주어야 사용가능!)

 

....
   <link rel="stylesheet" href="./css/QnA.css">
</head>

이렇게 해주면

현재 css 내에서 

 

display:none으로 되어있으므로

qna 화면이 표시되지 않게 된다.

 

JS 파일 만들기

start.js 라는 파일을 만들고

index.html 내 body 태그가 끝나기 전에 넣어준다.

 

일반적으로 js 파일은 무거워서

불러오는데 시간이 걸리기 때문에

 

js를 코드 앞쪽에 넣어준다면

해당 js 파일을 불러오느라

웹페이지 화면표시가 느려진다는 단점이 있다.

 

...
     <script src="./js/start.js" charset="utf-8"></script>
  </div>
</body>

 

처음에 div 태그로 전체 섹션을 싸줬으므로

/div, /body 앞에 넣어준다.

 

다음은 start.js 파일을 작성해준다.

const main = document.querySelector("#main");
const qna = document.querySelector("#qna");

 

< const >

변수 선언 시, 단 하나의 변수만을 선언할 수 있음

 

< querySelector >

문서에서 css 선택자를 select

 

앞에서 css  파일 내에서

main.css에서는 #main{ }

qna.css에서는 #qna{ }

로 정의해주었으므로

해당 내용을 불러올 수 있게된다.

 

function begin(){
  main.style.display = "none";
  qna.style.disply = "block";
}

start.js 내에 해당 함수를 만들어주고

시작하기 버튼을 누르면 해당 함수가

실행되어 메인은 사라지고 qna가 뜨게 하고싶다.

 

=> 여기서 qna 화면이 안떠서 보니,

disply 라고 오타가 난 것을 확인할 수 있었다;;

오타주의!!

 

 

onclick

html 태그 중 'on'이 붙는 것은

어떤 것을 기다린다는 의미이다.

 

onclick 은 클릭을 기다리는 태그!

 

즉, 클릭전까지는 기다리고 있다가

클릭을 하면 정의된 내용이 실행된다.

 

      <button type="button" class="btn btn-danger mt-3" onclick="js:begin()">시작하기</button>

js:begin()

js파일을 지정해주지 않아도 js파일 내 begin()함수가 실행된다.

 

 

애니메이션효과 - 화면 서서히 사라지게하기

 

다양한 브라우저에서 실행가능하다.

 

 

p 로 정의된 부분은 잘 모르겠음.

강의에서도 스킵해서...;;

 

아래 keyflame 부분만 응용해서 넣어주었다.

 

@keyframes fadeIn {
  from { opacity: 0 ; }
  to { opacity : 1; }
}

@keyframes fadeOut {
  from { opacity: 1 ; }
  to { opacity : 0 ; }
}

 

opacity는 불투명도를 의미하며

1일 때 나타나고 0일때 사라지는 효과를 준다.

 

근데.

지원 브라우저페이지를 다시 보면...

 

 

-webkit- 이라는 것이 보인다.

 

replit 내에서 자동완성이 되는 걸로 보면

자주쓰이는 것인듯 하다!!

 

애니메이션을 완성했으니 적용해주도록 한다.

 

 

애니메이션 적용하기

onclick으로 begin() 함수가 작동하면

main이 사라지고 qna가 나타나도록 애니메이션 적용을 해준다.

 

function begin(){
  // main.style.display = "none";
  // qna.style.display = "block";
  main.style.WebkitAnimation = "fadeOut 1s";
  main.style.animation = "fadeOut 1s";
  qna.style.WebkitAnimation = "fadeIn 1s";
  qna.style.animation = "fadeIn 1s";  
  
}

 

기존에 작성한 코드는 주석처리를 하고

아래 새로 작성해준다.

 

이 부분도 역시 WebkitAnimation과

animation을 각각 작성해준다.

 

1s를 붙여주는 이유는

1초 간 지속된다는 의미로 붙인다.

 

시간을 지정해주지 않으면

0초로 지정되어 아무 것도 작동하지 않는다.

 

  <link rel="stylesheet" href="./css/animation.css">

그리고..

css, js 파일 작성후에는

꼭!!! index.html에 넣어주어야한다 ㅎㅎ

 

또 까먹어서 작동이 안되었었다.

 

 

setTimeout()

main의 투명도가 점점 흐려지면서

사라지는 것까지는 잘 되는데,

1초 뒤 main 화면이 다시 나타나고,

qna화면은 표시되지 않는 현상이 일어난다.

 

그 이유는

주석처리한 코드인 display : none/block 코드가 없기 때문이다.

 

display를 none으로 사라지게하거나

block으로 나타나게 해주어야하는데

그 과정이 없어 다시 처음 화면으로 돌아간다.

 

이 때문에

자바스크립트 내에서 setTimeout() 를 사용한다.

 

뒤에 숫자는 밀리초 단위, 1000 = 1초

즉 1초 간 함수가 실행되도록 하는 것이다.

 

강의에서는

arrow function 형태로 작성해보았다.

 

start.js 

const main = document.querySelector("#main");
const qna = document.querySelector("#qna");

function begin(){
  main.style.WebkitAnimation = "fadeOut 1s";
  main.style.animation = "fadeOut 1s";

  setTimeout(() => {
    qna.style.WebkitAnimation = "fadeIn 1s";
    qna.style.animation = "fadeIn 1s";
    setTimeout(() => {
      main.style.display = "none";
      qna.style.display = "block";
    }, 450)  
  }, 450);  
}