QnA 페이지로 전환

1. 패비콘

: favicon은 사이트 탭의 작은 아이콘이다.
적용을 시키려면 헤드 태그 사이의 제목 위에 link.favicon으로 링크 태그에 주소 입력

      <link rel="shortcut icon" href="img/favicon.png" type="image/x-icon">
  <title>심리사이트</title>

2. qna 섹션

    <section id="qna">
      <div class="status mx-auto mt-5">
        <div class="statusBar">
        </div>
      </div>
      <div class="qBox my-5 py-3 mx-auto">

      </div>
      <div class="answerBox">

      </div>

3. qna.css

``` #qnd { display: none; } ```

4. start.js 파일 링크

바디태그의 제일 아래쪽에 script:src 태그를 사용한다. 자바스크립트는 html 태그들이 다 나오고 그 다음 그 태그들을 가지고 이벤트 동작을 한다. ``` ``` 우선 start.js 파일이 제대로 html과 연결되었는지 체크! ``` alert('하이'); ``` 

5. 함수 만들기

start.js 파일에 입력

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

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

6. 애니메이션.css

/* 간단한 애니메이션을 만들때 from to , 0% 100%는 좀더 세밀한 설정가능 */

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

7. start.js

function begin() {
  main.style.animation = "fadeOut 1s";
  setTimeout(() => {
    qna.style.animation = "fadeIn 1s";
  }, 450);

  setTimeout(() => {
    main.style.display = "none";
    qna.style.display = "block"
  }, 900)
}