Gwni Lab GwniLab

//설명. 참고사항. const quizWrap = document.querySelector(".quiz__wrap"); //문제 정보 const quizInfo = [ { answerType : "html", answerNum : 1, answerAsk : "컨텐츠의 구조를 정의하는 마크업 언어는 무엇인가요?", answerChoice : { 1: "html", 2: "css", 3: "javascript", 4: "react" }, answerResult : "1", answerEx : "컨텐츠의 구조를 정의하는 마크업 언어는 HTML 입니다." }, { answerType : "css", answerNum : 2, answerAsk : "웹 페이지를 꾸미기위해서 사용하는 언어는 무엇입니까?", an..

브랜드 컬러란 브랜드를 나타내는 고유색으로 브랜드 전체의 통일감을 부여하며, 사용자에게 끊임없이 같은 메시지를 전달하기에 효과적입니다. 브랜드 컬러의 활용 브랜드컬러는 주로 primary color 1가지와 secondary color 1가지로 제안합니다. 다수의 컬러를 사용하는 것보다 소수의 컬러를 사용하는것이 브랜드성을 더 끌어올리면서 컨텐츠 중심의 디자인을 하기 쉽도록 도와줍니다. 너무 단조롭게만 느껴진다면 브랜드컬러에 채도와 명도를 더하여 좀 더 풍부한 표현을 할 수 있습니다. 브랜드 컬러의 비율 primary color가 secondary color보다 비율이 높아야 합니다. 이와 반대로 될 시, 사용자에게 주요색에 대한 혼란을 야기시킬 수 있으므로 primary color를 secondary ..

Element.classList 메서드는 클래스를 추가,삭제 등 다양한 기능을 활용할 수 있는 메서드 입니다. 이번에는 add에 대해서 알아봅시다. Element.classList.add()로 사용합니다. 우선 스타일에서 추가할 클래스의 속성을 만들어줍니다. 박스 1,2를 document.querySelector로 변수화 시켜서 편하게 작업할 수 있습니다. 저렇게 box1.classList.add(), box2.classList.add()를 사용해서 red, blue 클래스를 박스에 추가시킬 수 있습니다. 이런 식으로 적용할 수 있습니다. 이번에은 패딩 값도 추가해보겠습니다. 저렇게 나눠서 쓸 수도 있지만 한줄로 합쳐서 추가하는것도 가능합니다. 적용된 예시입니다. 이렇게 빨간 박스에 패딩 50, 파란 박..

//설명. 참고사항. const quizType = document.querySelector(".quiz__type"); //문제유형 const quizNumber = document.querySelector(".quiz__number"); //문제 번호 const quizAsk = document.querySelector(".quiz__ask"); //문제 질문 const quizConfirm = document.querySelector(".quiz__confirm"); //문제 정답버튼 const quizResult = document.querySelector(".quiz__result"); //문제 정답 const quizView = document.querySelector(".quiz__view"..

//설명. 참고사항. const quizType = document.querySelectorAll(".quiz__type"); //문제유형 const quizNumber = document.querySelectorAll(".quiz__number"); //문제 번호 const quizAsk = document.querySelectorAll(".quiz__ask"); //문제 질문 const quizConfirm = document.querySelectorAll(".quiz__confirm"); //문제 정답버튼 const quizResult = document.querySelectorAll(".quiz__result"); //문제 정답 const quizView = document.querySelecto..

//설명. 참고사항. const quizType = document.querySelector(".quiz__type"); //퀴즈 종류 const quizNumber = document.querySelector(".quiz__number"); //퀴즈 번호 const quizAsk = document.querySelector(".quiz__ask"); //퀴즈 질문 const quizConfirm = document.querySelector(".quiz__confirm"); //정답 확인 버튼 const quizResult = document.querySelector(".quiz__result"); //정답 결과 const quizDog = document.querySelector(".dog"); //강..

//설명. 참고사항. const quizType = document.querySelector(".quiz__Type") //퀴즈 종류 const quizNumber = document.querySelector(".quiz__number") //퀴즈 번호 const quizAsk = document.querySelector(".quiz__ask") //퀴즈 질문 const quizConfirm = document.querySelector(".quiz__confirm") //정답 확인 버튼 const quizResult = document.querySelector(".quiz__result") //정답 결과 const quizDog = document.querySelector(".quiz__view .dog..

setInterval()을 이용한 이미지 슬라이드 - 닷 버튼 추가 //설명. 참고사항. const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); const sliderInner = document.querySelector(".slider__inner"); const slider = document.querySelectorAll(".slider"); const sliderBtn = document.querySelector(".slider__btn"); const sliderDot = document.querySelector(".slider__dot");..