Youna

퀴즈 이펙트 06 이번 퀴즈 이펙트 효과에서는 저번 퀴즈 효과에서 객관식으로 모든 문제들이 나타나서 하나하나 클릭해서 정답을 확인했다면 이번에는 슬라이드 형식으로 답을 선택하고 다음으로 넘겨서 한 칸 안에서 여러 문제를 넘겨서 풀고 나면 점수와 맞힌 갯수를 확인 할 수 있는 유형입니다. HTML Quiz 객관식 확인하기(여러문제) 유형 : 슬라이드 유형 1 2 3 4 5 6 정답입니다! 틀렸습니다! 다음문제 ??점 ?개 jeongyouna_@naver.com HTML구조 저번에 퀴즈 이펙트 5에서 사용한 코드를 javascript부분을 비워두고 그대로 HTML을 가져옵니다. 구조를 살펴보면 quiz__main안에 quiz__wrap을 두고 class= quiz를 만들어 준 후 header안에 title을..

퀴즈 이펙트 05 저번 문제에 이어서 여러 문제를 풀어볼 수 있는 퀴즈 이펙트 효과를 만들어 봤습니다. header의 내용들을 전체적으로 주석 처리를 해 준 후 자바스크립트를 사용해서 정답을 풀 수 있도록 하겠습니다. HTML Quiz 객관식 확인하기(여러문제) 유형 1 2 3 4 5 jeongyouna_@naver.com HTML 저번 퀴즈 4번에서 했던 코드를 그대로 가져옵니다. 하지만 스크립트로 내용을 출력해주기 위해서 div class__quiz부분을 주석 표시 해줍니다. CSS-reset @import url('https://webfontworld.github.io/DungGeunMo/DungGeunMo.css'); @import url('https://webfontworld.github.io/..

퀴즈 이펙트 저번 퀴즈에 이어서 3번째 이번에는 여러 문제가 포함되어있는 퀴즈 사이트를 만들어 봤습니다! HTML코드 Quiz 주관식 확인하기(여러문제) 유형 1 2 3 4 . 정답입니다! 틀렸습니다! 정답확인하기 . 정답입니다! 틀렸습니다! 정답확인하기 . 정답입니다! 틀렸습니다! 정답확인하기 jeongyouna_@naver.com HTML들여다보기 퀴즈 사이트 2번과 똑같이 복사해서 붙여주는데 여러가지 퀴즈를 만들 예정이라 class="quize"부분을 2개 더 추가 해줍니다. CSS코드 .quiz__desc { border-top: 6px ridge #cacaca; padding: 20px; font-family: 'suncheon'; background-color: #fffae4; } .quiz_..

퀴즈 이펙트 저번 시간에 강아지가 등장해서 정답을 클릭하면 알려주는 사이트를 만들어 보았습니다. 오늘은 정답을 직접 입력해서 정답이면 강아지가 웃는표정을 오답이면 실망하는 표정을 나타내보도록 하겠습니다. HTML 코드 Quiz 주관식 확인하기 유형 1 2 . 정답확인하기 설명 jeongyouna_@naver.com HTML 들여다보기 저번 시간에 썼던 HTML코드를 복사 붙이기로 가져왔습니다. Script를 사용해서 내용을 출력해 줍니다. 문제 정보에 대해 작성해 준 후 선택자를 묶어준 태그들을 저번시간과 같이 queryselector를 주고 괄호로 . 을 써서 class명을 써줍니다. 저번 시간에는 innerText를 썼지만 오늘은 textContent를 사용해 줍니다. textContent는 HTMl..

퀴즈 이펙트 HTML과 CSS를 이용해 퀴즈를 풀 수 있는 사이트를 만들어보았습니다. 먼저 비주얼코드로 가서 javascript폴더 안에 card폴더를 만들어 줍니다. 그리고 quizEffext html 파일을 만들어줘서 실행시켜 줍니다. HTML Quiz 정답 확인하기 유형 . 정답확인하기 jeongyouna_@naver.com HTML 들여다보기 퀴즈 이펙트라는 타이틀을 만들어 준후 코드가 지저분해지지 않게 link를 사용해서 reset과 css파일을 만들어줍니다. header, main, footer로 나누어 전체적인 body를 잡아줍니다. CSS로 묶어 줄 수 있게 quize wrap, tittle, question,view,answer로 요소들로 묶어줍니다. CSS에서 각 요소들에게 효과를 준 ..