5. CSS 를 이용해 버튼을 누르면 화면이 바뀌게 하기

퀴즈 앱과 같은 앱을 만들 때 버튼을 누르면 화면이 바뀌게 해야한다. 

이 때 opacity 와 z-index를 잘 이용하면 된다.

 

우선은 페이지를 만든다. 

 

 

✅ opacity: 0; --> 완전 투명. 화면에 안보임.

     opacity: 1; --> 기본값. 화면에 보임. 

 

 

 

이벤트 유무에 따라 보여질 화면을 opacity: 0; 으로 설정해 안보이게 한 후, 

 

 

z-index 값을 줘서 active될 요소를 조금 띄운 다음에 

opacity: 1; 을 줘서 화면에 보이게 한다. 

 

 

뒤에 숨어있던 화면이 앞으로 나오게 된다.