quiz 유형 사이트 만들기 - 01

퀴즈퀴즈 사이트 만들기 

안녕하세요 오늘은 퀴즈문제를 풀어보는 사이트를 만들어 봤어요 

만들면서 궁금했던거 를 정리해봤어요 

소스는 요기 

위 레이아웃 만들면서 궁금했던 css 정리 😝😝😝!
z-index	position 속성을 이용하면 요소를 겹치게 놓을 수 있습니다. 요소들의 수직 위치를 z-index 속성으로 정합니다. 값은 정수(-1, 0 , 1) 이며, 숫자가 클 수록 위로 올라오고, 숫자가 작을 수록 아래로 내려갑니다.
position: relative;	position 속성을 통해 문서 상에 요소를 배치하는 방법을 지정한다. top, right, bottom, left 속성을 통해 요소의 최종 위치를 결정한다. 기준을 잡는다. (예- position: relative;) 이동시킨다. (예- top: 50px;)
위 position과  비슷하며 중요! 😝😝😝	block : 한 줄 모두 차지 (대표 element - <div>, <p> ) inline : 콘텐츠 크기 만큼만 차지 (대표 element - <span>)
vertical-align: top;	Vertical-align은 인라인 블록 등을 포함한 모든 인라인요소의 수직 정렬을 위해 사용됩니다. 하지만 블록 레벨 요소의 수직 정렬에는 영향을 미치지 않는데요 자세한 설명은 ...

 

 

😝😝😝 위 레이아웃 만들면서 궁금했던 javascript 정리
querySelector	자바스크립트에서는 jQuery와 동일한 방식으로 CSS 선택자를 넘겨서 원하는 HTML 요소를  찾을 수 있도록 querySelector(), querySelectorAll() 함수를 제공하고 있습니다.  함수 명이 암시하듯이 querySelector() 함수는 선택자에 부합하는 요소 중에서  첫 번째 요소만을 반환하고,  querySelectorAll() 함수는 선택자에 부합하는 모든 요소를 반환합니다.
innerText	innerText 속성은 요소와 그 자손의 렌더링 된 텍스트 콘텐츠를 나타냅니다. 쉽게 말해서 값을 넣어 줄수 있따 !
.style.display  = "none";	document.querySelector(".quiz__answer .result").style.display = "none"; class명이 quiz__answer .result인 요소를 display none 처리 한다
addEventListener ("click", function(){""});	document.querySelector(".quiz__answer .confirm") .addEventListener("click", function(){             quizAnswerResult.style.display = "block";             quizAnswerConfirm.style.display = "none";         }); class 명이 quiz__answer .confirm 인 요소클릭하였을때 이벤트 발생 !  .addEventListener << 요소의 값중 click 을 설정하여 발생함