inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기

화면 전환하기

test글씨가 똑같이 아래에서 위로 올라와요

442

조은정

작성한 질문수 1

1

12분에서 글씨가 아래에서 위로 올라오는 것을 방지하기 위해 qna display block 위치를 수정해줘서 똑같이 따라했는데요 바뀌는것없이 똑같이 아래에서 위로 올라옵니다

이 다음 강의 듣다가 저 부분이 제대로 되지 않은것을 확인해서 뒷강의의 내용도 들어가있습니다

javascript HTML/CSS bootstrap

답변 1

0

판다코딩

아래에서 위로 올라온다는게 무슨 말씀 이실까요?

보내주신 코드는 애니메이션이 다 끝난 이후 style을 고정해주는 코드로 보입니다.

0

조은정

제가 처음 질문을 달아봐서 이렇게 달리는지 몰랐네요

메인페이지의 화면전환하는 강의에서 12분쯤에 메인페이지에서 qna페이지로 넘어갈때 메인페이지가 사라지고 난 뒤 qna페이지가 나와야하는데, qna display위치를 저렇게 메인 display 아래로 둬도 애니메이션이 끝나기전에 미리 메인페이지 아래에 구현이 되었다가 위로 올라옵니다

화면전환하기 강의를 들었을때는 잘 됐었는데 qna페이지로 넘어가면서 질문을 넣고 버튼을 넣으면서 갑자기 이상해졌어요

0

판다코딩

그러니까 qna가 등장하기 이전에 main이 사라지지 않는다는 말씀이실까요?

0

조은정

네 맞아요! 화면전환하는 강의 11:50 여기부분이랑 똑같이 시작하기 누르면 아래에 qna화면이 main아래에 떴다가 위로 올라옵니다 그 뒤로 선생님이 고치는 방법 알려주셔서 똑같이 했는데 여전히 아래떴다가 위로 올라옵니다

0

판다코딩

js코드는 문제가 없어 보입니다..? HTML이나 CSS코드도 확인이 필요해보여요.

0

조은정

HTML

 

<!DOCTYPE html>

<html lang="ko" dir="ltr">

 

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title></title>

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

  <link rel="preconnect" href="https://fonts.googleapis.com">

  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

  <link href="https://fonts.googleapis.com/css2?family=Hahmlet:wght@200&display=swap" rel="stylesheet">

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

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

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

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

 

</head>

 

<body>

  <div class="container">

    <section id="main" class="mx-auto mt-5 py-5 px-3">

      <h1>MBTI</h1>

      <div class="col-lg-6 col-md-8 col-sm-10 col-12 mx-auto">

        <img src="./img/main.png" alt="mainImage" class="img-fluid">

      </div>

      <p class="pt-3">

        MBTI를 알아보자<br>

        아래 버튼을 눌러 시작합니다

      </p>

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

    </section>

    <section id="qna">

      <div class="qBox">

      </div>

      <div class="answerBox">

      </div>

  </div>

  </section>

  <section id="result">

  </section>

  <script src="./js/data.js" charset="utf-8"></script>

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

  </div>

</body>

 

</html>

 

animation.css

 

@keyframes fadeIn {

    from { opacity : 0; }

    to { opacity: 1; }

}

 

@keyframes fadeOut {

    from { opacity : 1; }

    to { opacity : 0; }

}

 

@-webkit-keyframes fadeIn {

    from { opacity : 0; }

    to { opacity: 1; }

}

 

@-webkit-keyframes fadeOut {

    from { opacity : 1; }

    to { opacity : 0; }

}

 

이렇게 입니다

 

0

조은정

qna.css display를 none으로 했어야 했는데 block으로 해놨었네요 해결됐습니다!

0

판다코딩

Happy Coding!

emmet 에디터 설치 하려고 하는데 안 나오네요

0

168

2

결과 이미지랑 글이 안떠요 왜일까요

0

144

1

select 배열 이해를 도와주세요!

0

378

1

result 에서 결과가 안 나와요.

0

380

1

결과 계산하기에서 콘솔이 다르게 찍힙니다.

0

405

1

다음 버튼을 누르면 다음질문으로 넘어가게 만들고 싶어요.

0

391

1

클론코딩 시

0

373

1

결과페이지 선택값 합산하기

0

359

1

select 부분이 이해가 안가서 질문드립니다 ㅠ

0

393

1

index에서 result 페이지로 이동 질문드립니다.

0

440

1

진행바 강의에서요 스테이터스바가 짤립니다

0

385

1

이미지버전에서 부트스트랩 이미지하고 텍스트도 이용하고 싶어요

0

527

1

viewport 가 제대로 작동을 안해요 뭐가 문제일까요?

0

484

1

결과 페이지별 개별링크버튼 추가

0

363

1

뒤로가기

0

429

1

netlify not found 오류

1

1066

1

아톰 에디터 설치

2

951

1

display:block을 사용하는 이유

1

463

1

qIdx수에 따라 for 문이 돌아요 ㅜ.ㅜ

1

387

1

카카오톡 공유하기

1

591

1

질문 개수 5개에 결과 4개

0

438

1

질문 수를 줄이는 방법

1

395

1

강의 순서

1

273

1

결과페이지에서 result-0,1,23,....html 호출하기

1

359

1