SBDB_뉴유 SBDB_뉴유

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") //강아..

highlightAll(); //highlight.js에 저장된 함수 highlightAll 실행 modal(); //custom.js에 저장된 함수 modal 실행 tabMenu(); //tabMenu.js에 저장된 함수 modal 실행 //sliderType06 const sliderWrap = document.querySelector(".slider__wrap"); //.slider__wrap을 변수(sliderWrap)에 저장 const sliderImg = document.querySelector(".slider__img"); //.slider__img를 변수(sliderImg)에 저장 //이미지 보이는 영역 const sliderInner = document.querySelector(".sli..

highlightAll(); //highlight.js에 저장된 함수 highlightAll 실행 modal(); //custom.js에 저장된 함수 modal 실행 tabMenu(); //tabMenu.js에 저장된 함수 modal 실행 //sliderType05 const sliderWrap = document.querySelector(".slider__wrap"); //.slider__wrap을 변수(sliderWrap)에 저장 const sliderImg = document.querySelector(".slider__img"); //.slider__img를 변수(sliderImg)에 저장 //이미지 보이는 영역 const sliderInner = document.querySelector(".sli..

highlightAll(); //highlight.js에 저장된 함수 highlightAll 실행 modal(); //custom.js에 저장된 함수 modal 실행 tabMenu(); //tabMenu.js에 저장된 함수 modal 실행 //sliderType03 const sliderWrap = document.querySelector(".slider__wrap"); //.slider__wrap을 변수(sliderWrap)에 저장 const sliderImg = document.querySelector(".slider__img"); //.slider__img를 변수(sliderImg)에 저장 //이미지 보이는 영역 const sliderInner = document.querySelector(".sli..

highlightAll(); //highlight.js에 저장된 함수 highlightAll 실행 modal(); //custom.js에 저장된 함수 modal 실행 tabMenu(); //tabMenu.js에 저장된 함수 modal 실행 //sliderType03 const sliderWrap = document.querySelector(".slider__wrap"); //.slider__wrap을 변수(sliderWrap)에 저장 const sliderImg = document.querySelector(".slider__img"); //.slider__img를 변수(sliderImg)에 저장 //이미지 보이는 영역 const sliderInner = document.querySelector(".sli..

highlightAll(); //highlight.js에 저장된 함수 highlightAll 실행 modal(); //custom.js에 저장된 함수 modal 실행 tabMenu(); //tabMenu.js에 저장된 함수 modal 실행 //sliderType02 const sliderWrap = document.querySelector(".slider__wrap"); //.slider__wrap을 변수(sliderWrap)에 저장 const sliderImg = document.querySelector(".slider__img"); //.slider__img를 변수(sliderImg)에 저장 //이미지 보이는 영역 const sliderInner = document.querySelector(".sli..

const cssProperty = [ {num:"1", name:"all", desc:"all 속성은 CSS 속성을 재설정하는데 사용할 수 있는 약식 속성입니다."}, {num:"2", name:"animation", desc:"animation 속성은 애니메이션 속성을 설정하기 위한 약식 속성입니다."}, {num:"3", name:"animation-delay", desc:"animation-delay 속성은 애니메이션이 시작되는 시간을 설정합니다."}, //중략... ] const searchBox = document.querySelectorAll(".search span"); //검색버튼(#search_box)을 변수(searchBox)에 저장 const cssList = document.que..

highlightAll(); //highlight.js에 저장된 함수 highlightAll 실행 modal(); //custom.js에 저장된 함수 modal 실행 tabMenu(); //tabMenu.js에 저장된 함수 modal 실행 //sliderType01 const sliderWrap = document.querySelector(".slider__wrap"); //.slider__wrap을 변수(sliderWrap)에 저장 const sliderImg = document.querySelector(".slider__img"); //.slider__img를 변수(sliderImg)에 저장 const slider = document.querySelectorAll(".slider"); //.slide..

const changeColor = document.querySelectorAll("#change01 .color a") changeColor.forEach(span => { span.addEventListener("click", () => { const colorName = span.dataset.color; document.querySelector("#change01 .text").style.color = colorName; }) }); .aa { display: flex; align-items: center; justify-content: center; } #change01 { text-align: center; } #change01 h3 { font-size: 25px; } #change01 .t..

const cssProperty = [ {name: "accent-color", desc: "accent-color 속성은 일부 사용자 인터페이스 컨트롤의 액센트 색상을 설정합니다."}, {name: "align-content", desc: "align-content 속성은 콘텐츠 항목 사이 및 주위의 공간 분포를 설정합니다."}, {name: "align-items", desc: "align-items 속성은 모든 직계 자식의 align-self 값을 그룹으로 설정합니다."}, //중략... ] const searchBox = document.querySelectorAll(".search span"); //검색버튼(#search_box)을 변수(searchBox)에 저장 const cssList = d..

const cssProperty = [ {name: "accent-color", desc: "accent-color 속성은 일부 사용자 인터페이스 컨트롤의 액센트 색상을 설정합니다."}, {name: "align-content", desc: "align-content 속성은 콘텐츠 항목 사이 및 주위의 공간 분포를 설정합니다."}, {name: "align-items", desc: "align-items 속성은 모든 직계 자식의 align-self 값을 그룹으로 설정합니다."}, //중략... ] const searchBox = document.querySelector("#search_box"); //input박스(#search_box)를 변수(searchBox)에 저장 const cssCount = d..

const searchBox = document.querySelectorAll(".search span"); //다수의 검색목록(.search span)를 변수(searchBox)에 저장 const cssList = document.querySelectorAll(".list ul li"); //다수의 리스트를 변수(cssList)에 저장 const cssCount = document.querySelector(".count em"); //전체 속성 갯수(.count)를 변수(cssCount)에 저장 //모든 데이터 보이기 cssList.forEach((li, index) => { li.classList.add("show"); //초기값으로 cssList에 클래스 add("show")를 실행 cssCount..