Effect32 [자바스크립트 응용하기] 슬라이드 유형07 슬라이드 효과 07 이번 시간에는 슬라이드 효과의 최종형태입니다. 그런데 지금 자잘한 버그가 많아서 수정중에 있습니다... 심지어 현생이 최근에 너무 바빠져서 수정할 시간이...😪 수정이 완료되는대로 설명을 제대로 덧붙여서 수정본으로 재업로드 하겠습니다. 원본 소스 보기 원본 사이트 ▶ 동그란 도트모양을 만들어주고 이 닷버튼에 JS를 부여해줍니다. 이 때 Index값을 잘 활용하면 아주 쉽게 닷형식의 슬라이더가 완성이 됩니다. JS 소스 const sliderWrap = document.querySelector('.slider__wrap'); const sliderImg = document.querySelector('.slider__img'); const sliderInner = document.quer.. 2022. 10. 24. [자바스크립트 응용하기] 검색 이펙트07_게임만들기 검색 효과07 검색 효과 여섯번째 시간입니다. 속성 찾기 게임을 해보도록해요. 원본 소스 보기 원본 사이트 JS 소스 // 내용소스는 아이프레임 참조해주세요. const serachTime = document.querySelector(".time span"); const serachList = document.querySelector(".search__list"); const searchAnswers = document.querySelector(".search__answers"); const searchMissAnswers = document.querySelector(".search__missAnswers"); const searchStart = document.querySelector(".search_.. 2022. 10. 23. [자바스크립트 응용하기] 검색 이펙트06_ 정렬 검색 효과 검색 효과 여섯번째 시간입니다. 다양한 방법으로 정렬해 봅시다 . 원본 소스 보기 원본 사이트 JS 소스 // 내용소스는 아이프레임 참조해주세요. // 데이터 출력하기 const updateList = () => { let listCSS = ""; cssProperty.forEach((data, index)=>{ listCSS += `${data.num}. ${data.name} : ${data.desc} `; }); cssList.innerHTML = listCSS; } updateList(); // 반대로 정렬 function sortReverse(){ cssProperty.reverse(); updateList(); } // 오름차순 정렬 function sortAscending(){ c.. 2022. 10. 23. [자바스크립트 응용하기] 슬라이드 유형06_ 닷메뉴 무한으로돌리기 슬라이드 효과 06 이번 시간에는 5유형에서 만들었던 닷메뉴를 무한으로 왔다갔다 만들어 보겠습니다. 근데 사실 4유형에서 한것과 별다를게 없어서 쓸 내용도 없고 이 유형은 버그가 참많아요 ^_^ 원본 소스 보기 원본 사이트 ▶ 동그란 도트모양을 만들어주고 이 닷버튼에 JS를 부여해줍니다. 이 때 Index값을 잘 활용하면 아주 쉽게 닷형식의 슬라이더가 완성이 됩니다. JS 소스 const sliderWrap = document.querySelector('.slider__wrap'); const sliderImg = document.querySelector('.slider__img'); const sliderInner = document.querySelector('.slider__inner'); const.. 2022. 10. 23. [자바스크립트 응용하기] 슬라이드 효과05_ 닷메뉴 슬라이드 효과 05 이번 시간에는 저번 버튼형식의 슬라이더에 추가로 하단에 도트를 추가해보겠습니다. 그리고 당연하게도 이 버튼을 눌렀을때도 이미지가 바뀌게 구성해야 합니다 ^^! 원본 소스 보기 원본 사이트 ▶ 동그란 도트모양을 만들어주고 이 닷버튼에 JS를 부여해줍니다. 이 때 Index값을 잘 활용하면 아주 쉽게 닷형식의 슬라이더가 완성이 됩니다. JS 소스 const sliderWrap = document.querySelector('.slider__wrap'); const sliderImg = document.querySelector('.slider__img'); const sliderInner = document.querySelector('.slider__inner'); const slider =.. 2022. 10. 23. [자바스크립트 응용하기] 페럴렉스이펙트07_ 리빌효과 페럴렉스 효과 05 이번에는 이질감이 느껴지는 효과를 구현해보겠습니다. 이 효과를 뭐라고 설명해야할지 모르겠네요?＼（〇_ｏ）／ 그냥 이질감 효과라고 합시다 원본 소스 보기 원본 사이트 JS 소스 function scroll(){ let scrollTop = window.pageYOffset || document.documentElement.scrollTop; document.querySelector("#parallax__info span").innerText = Math.ceil(scrollTop); document.querySelectorAll(".content__item").forEach(item => { const target1 = item.querySelector(".content__item__i.. 2022. 10. 10. [자바스크립트 응용] 검색 효과 05_ 중요도 순 검색 효과 검색 효과 다섯번째 시간입니다. 중요도 순으로 보는 방법을 만들어 보겠습니다. 원본 소스 보기 원본 사이트 JS 소스 const cssProperty = [ { name: "accent-color", desc: " 일부 요소가 생성하는 사용자 인터페이스 컨트롤의 강조색을 지정합니다."}, { name: "align-content", desc: " 콘텐츠 사이와 콘텐츠 주위 빈 공간을 교차축(flex박스) 또는 블록축(grid)을 따라 배치할지 속성할 수 있습니다."}, ...이하 생략 ]; // 출력하기 const searchInfo = document.querySelector('span.num'); const searchList = document.querySelector('.search__.. 2022. 10. 3. [자바스크립트 응용] 검색 효과 04_ 버튼 방식 검색 효과 검색 효과 네번째 시간입니다. 속성들을 각각 버튼형식처럼 만든 뒤 클릭하면 해당 속성의 설명이 나타나게 해보겠습니다. 원본 소스 보기 원본 사이트 ■ n줄 요약 ▶ 기존의 검색방식을 유지하되, 속성값들을 클릭할 수 있게 만들어 주는 기능을 추가합니다. find()메서드를 활용하므로 검색의 경우는 정확히 일치하지 않는 경우 속성값은 검색되지 않습니다. JS 소스 const cssProperty = [ { name: "accent-color", desc: " 일부 요소가 생성하는 사용자 인터페이스 컨트롤의 강조색을 지정합니다."}, { name: "align-content", desc: " 콘텐츠 사이와 콘텐츠 주위 빈 공간을 교차축(flex박스) 또는 블록축(grid)을 따라 배치할지 속성할 수.. 2022. 10. 3. [자바스크립트 응용] 페럴렉스 효과 06_ 나타나기 효과 페럴렉스 효과 06 이번 시간에는 글씨가 나타나는 효과를 주겠습니다. 원본 소스 보기 원본 사이트 JS 소스 document.querySelectorAll(".split").forEach(text => { let splitText = text.innerText; let splitWrap = splitText.split('').join(""); splitWrap = "" + splitWrap + ""; text.innerHTML = splitWrap; text.setAttribute("aria-label", splitText); }) function scroll() { let scrollTop = window.scrollY; document.querySelector("#parallax__info .scro.. 2022. 10. 3. [자바스크립트 응용] 마우스 효과06_ 기울기 효과 마우스 효과 06 마우스 효과 여섯번째 시간입니다. 텍스트에 기울기 효과를 주고 오버시 글씨에 반전효과도 줘 보겠습니다. 원본 소스 보기 원본 사이트 ■ n줄 요약 ▶ 텍스트에 hover시, 마우스커서에 "mix-blend-mode : difference"를 주어 마우스포인터(원)이 겹치는 부분에 반전효과를 줄 수 있습니다. 텍스트는 skew를 주어 비틀기효과(≒기울기)를 줄 수 있고, "overflow:hidden"을 통해 마치 두개의 글씨가 이어져있지만 반반씩 달라보이는 효과를 줍니다. HTML 소스 "i thought you would" "i thought you would" If you know please tell me in advance If you know please tell me in a.. 2022. 10. 3. [자바스크립트 응용] 마우스 효과05_ 반전 효과 마우스 효과 05 마우스 효과 다섯번째 시간입니다. "mouse__cursor"에 반전효과를 부여하고 마우스 위치에 따라 이미지가 약간씩 기우는 효과를 만들어 보겠습니다. 원본 소스 보기 원본 사이트 ■ n줄 요약 ▶ 마우스커서에 "mix-blend-mode : difference"를 주어 마우스포인터(원)이 겹치는 부분에 반전효과를 줄 수 있습니다. 이미지에는 "transform-style : preserve-3d"를 주어서 3D효과를 줍니다. JS 소스 const mouseMove = (e) => { // 마우스 좌표값 let mousePageX = e.pageX; let mousePageY = e.pageY; // 마우스 좌표 기준점을 가운데로 변경 let centerPageX = window.in.. 2022. 10. 3. [자바스크립트 응용] 마우스 효과 04 ( 무슨 효과라 해야할지 모르겠음 ^^) 마우스 효과 04 이번 시간에는 정가운데에 있는 그림내부에서만 마우스오버 효과가 작동하고, 이미지가 마우스위치에 따라서 살짝씩 움직이는 효과를 만들어보겠습니다. 원본 소스 보기 원본 사이트 ■ n줄 요약 ▶ 그림 위에 클릭이벤트(마우스오버)를 부여해서 그림위에서만 작동할 수 있게 구성하고, 그림의 이동은 마우스좌표값을 화면의 정가운데로 초기화 시킨 뒤 그 값에 포인터 좌표값을 빼주어서 이동효과를 부여합니다. JS 소스 const cursor = document.querySelector(".mouse__cursor"); const cursorRect = cursor.getBoundingClientRect(); document.querySelector(".mouse__wrap figure").addEvent.. 2022. 9. 22. [자바스크립트 응용하기]페럴렉스효과05_ 이질감이 드는 효과...😶 페럴렉스 효과 05 이번에는 이질감이 느껴지는 효과를 구현해보겠습니다. 이 효과를 뭐라고 설명해야할지 모르겠네요?＼（〇_ｏ）／ 그냥 이질감 효과라고 합시다 원본 소스 보기 원본 사이트 JS 소스 function scroll(){ let scrollTop = window.pageYOffset || document.documentElement.scrollTop; document.querySelector("#parallax__info span").innerText = Math.ceil(scrollTop); document.querySelectorAll(".content__item").forEach(item => { const target1 = item.querySelector(".content__item__i.. 2022. 9. 20. [자바스크립트 응용하기]슬라이드 효과04_ 버튼식 구성하기 슬라이드 효과 04 이번에는 슬라이드형식 네번째! 버튼으로 슬라이드 조작을 해보겠습니다. 들어가기에 앞서 추후에 이미지를 추가해도 js를 별도로 수정하지 않아도 되게끔 하기 위해서 확인을 하다보니 이미지가 9개까지 되버린점은... 감안하고 봐주세요 ㅎㅎ; 원본 소스 보기 원본 사이트 ▶ 버튼을 누르면 다음 이미지로 이동하는 방식인데요. 생각만으론 참 간단하지만 함정카드가 존재합니다. 첫번째 이미지에서 이전이미지 버튼을 누르면 마지막 이미지로 가야하고, 마지막 이미지에서 다음이미지버튼을 누르면 첫번째 이미지로 가게끔 만들어야 합니다. if문을 사용하는것도 방법인데요. 저는 if문을 사용하지 않고 다른 방법을 사용해보았으니 같이 보시죠! JS 소스 const sliderWrap = document.query.. 2022. 9. 19. [자바스크립트 응용] 페럴렉스 효과04 / 스크롤에 따른 컨텐츠 애니메이션 페럴렉스 효과 04 이번에는 스크롤을 내려서 일정 위치에 도달하면 이미지box가 서서히 나타나는 효과를 만들어보겠습니다. 여태 페럴렉스효과를 함께 하셨다면 어려울 점이 없을거에요 원본 소스 보기 원본 사이트 JS 소스 // window.addEventListener("scroll", scrollProgrss); --> 쓰지않는 이유 : 과부화방지 --> requestAnimationFrame를사용함. // 재귀함수 : 함수를 실행했는데 자기자신을 또실행함. 이게 무한반복됨 // requestAnimationFrame : 일종의 재귀함수 역할을 하는데 얘는 무한루프 방지해줌 function scroll(){ let scrollTop = window.pageYOffset || document.document.. 2022. 9. 19. [자바스크립트 응용] 마우스 효과02_ 마우스를 천천히 따라오게 만들어 보자! 마우스 효과 02 저번 마우스효과01에서는 마우스를 따라다니는 원을 만들어봤는데요. 이번에는 이 원이 좀더 부드럽고 천천히(?) 따라오게 만들어 보겠습니다. GSAP를 이용해서 이 효과를 구현해 보겠습니다. 원본 소스 보기 원본 사이트 JS 소스 ■ 핵심 찍먹하기🪓 ✔ GSAP CDN으로 항상 스크립트가져오셔야해요! gsap.to ()에는 2가지 필수값이 필요합니다. 바로 대상과 속성입니다. 그렇다면 우리 소스에서는 어떻게 작동하는걸까요? 우선 대상과 속성값이므로 "cursor"에 "{duration: 0.3, left: e.pageX -5, top: e.pageY -5});"속성을 부여하겠네요! 사용된 속성은 다음과 같습니다. - duration : 애니메이션의 지속시간을 설정합니다. 0.3s로 지정했.. 2022. 9. 18. [자바스크립트 응용] 페럴렉스 효과03 / 스크롤변화에 따른 효과 적용하기 패럴랙스 효과 03 패럴랙스 스크롤링은 사용자가 마우스를 스크롤할 때, 원거리에 있는 배경 이미지는 느리게 움직이게 하고, 근거리에 있는 사물 이미지는 빠르게 움직이도록 함으로써 입체감을 느낄 수 있게 만든 디자인 기법입니다. 오늘은 스크롤을 내리면 상단 메뉴바가 사라지고, 스크롤을 올리면 다시 나타나는 구성으로 진행해볼 예정이구요. 추가로 페이지의 맨마지막에 도달하면 위로가기 버튼이 나타나게 스크립트를 짜줄겁니다. 생각만큼 어렵지 않으니 같이 공부해봐요! 원본 소스 보기 원본 사이트 ▶ 메뉴바를 스크롤의 변화에 따라 바로이전의 스크롤 위치값을 마지막 스크롤값에 대입시켜 현재 스크롤위치값과 비교하도록 스크립트를 만들어 줍니다. 스크롤이 위로 올라간다는 것은 현재 스크롤 위치값이 이전 스크롤위치값보다 작다.. 2022. 9. 12. [자바스크립트 응용]마우스 효과01 마우스 효과 01 이번시간에는 마우스관련 메서드를 이용해서 마우스를 따라다니는 효과를 만들어 보겠습니다. 또, 좌측하단에 각 메서드의 값들이 출력되게 해놨으니 어떻게 다른지 한번 보시면서 참고해보세요. 원본 소스 보기 원본 사이트 ▶ 좌측 하단에는 .mouse__info 를 이용해서 각 위치값에 대한 정보를 입력하고, 문구에 span태그와 class속성을 이용해서 마우스오버 효과도 각각 다르게 부여합니다. 마우스포인터가 사라지는 것은 cursor:none을 이용했습니다. JS 소스 window.addEventListener("mousemove", (event) => { document.querySelector(".clientX").innerText = event.clientX; document.query.. 2022. 9. 12. [자바스크립트 응용] 페럴렉스 효과02 / 스크롤변화에 따른 효과 적용하기 패럴랙스 효과 02 패럴랙스 스크롤링은 사용자가 마우스를 스크롤할 때, 원거리에 있는 배경 이미지는 느리게 움직이게 하고, 근거리에 있는 사물 이미지는 빠르게 움직이도록 함으로써 입체감을 느낄 수 있게 만든 디자인 기법입니다. 오늘은 저번시간에 이어서 사이드바 메뉴로 구성하는 방식에 대해 알아보겠습니다. 원본 소스 보기 원본 사이트 ▶ 저번시간과 원리는 별반 다를게 없습니다. 'parallax__info span'에 현재 scrollTop값을 입력되게 해주고, 'scrollTop >= 각 섹션 offsetTop' 일때 해당되는 섹션의 메뉴버튼에 active클래스를 붙여줍니다. 또, 메뉴버튼에 해당되는 a링크에 preventDefault를 부여해서 a태그 고유기능은 막고 scrollIntoView를 주어서.. 2022. 9. 12. [자바스크립트 응용] 페럴렉스 효과01 / 스크롤변화에 따른 효과 적용하기 패럴랙스 효과 01 페럴랙스 효과에 대해서 알아보겠습니다. 패럴랙스 스크롤링은 사용자가 마우스를 스크롤할 때, 원거리에 있는 배경 이미지는 느리게 움직이게 하고, 근거리에 있는 사물 이미지는 빠르게 움직이도록 함으로써 입체감을 느낄 수 있게 만든 디자인 기법입니다. 그렇기때문에 자바스크립트의 스크롤 관련 메서드에 대해서 잘 알아야 사용할 수 있는 효과입니다. 요약하자면 스크롤변경에 따른 행동(?)을 조정하는 효과입니다. 원본 소스 보기 원본 사이트 ▶ 각 섹션의 offset값을 구해준뒤 만들어 놓은 offset__info에 넣어줍니다. '현재 스크롤값 >= 각 섹션의 offset값' 일때 메뉴바에 active클래스를 추가해서 현재메뉴가 표시되게 해주고, 나머지 메뉴바는 active를 제거하여 활성화된 액.. 2022. 9. 12. [자바스크립트 응용] 슬라이드 효과03 이미지 슬라이드 효과 03 저번 시간에 이어서 세번재 시간입니다. 한단계식 계속해서 업그레이드 될 것 같네요. 2번유형에서는 딱딱해서 밋밋한 맛을 없애기 위해서 부드럽게 전환되는 효과를 주었는데요. 5번이미지에서 다시 1번이미지로 돌아갈때 빠르게 넘어가서 보기 불편하지는 않으셨는지...(전 사실..안불편했는데...할말하않) 무튼 그래서 이번엔 5번이미지 이후에도 좌측으로 넘어가서 다시 시작하는게 아닌 표현 그대로 1~5, 1~5 순환하듯이 보이는구조를 표현해 보겠습니다! 원본 소스 보기 원본 사이트 ▶ 오늘의 유형은 말씀드렸듯이 마지막 순서에서 첫번째 순서로 다시 넘어갈때 확~!하고 넘어가는게 아니라 물 흐르듯 자연스럽게 계속해서 순환하는 구조로 짜볼게요. 그러기 위해서는 이미지를 평상시처럼 5개로만 활.. 2022. 9. 1. [자바스크립트 응용] 슬라이드 효과 02 이미지 슬라이드 효과 02 저번 시간에 이어서 두번재 시간입니다. 한단계식 계속해서 업그레이드 될 것 같네요. 슬라이드유형1은 슬라이드 효과가 딱딱하게 바뀌어서 보는 맛이 밋밋하진 않으셨나요? 그래서 준비했습니다! 이번엔 슬라이드가 넘어가는 방식을 부드럽게 표현해보겠습니다. 그리고 자바스크립트 라이브러리 중에서 GSAP와 유명한 JQUERY로도 구현할 예정입니다. 잘 따라와 주세요💨 원본 소스 보기 원본 사이트 ▶ 이번 02유형은 라이브러리 중 GSAP와 JQUERY를 사용했어요! 그래서 원본소스에는 js, GSAP, JQUERY가 올라갈 예정입니다. 말로는 표현이 힘들기도 하고 이해도 잘 안되실 수 있어서 그림으로라도 준비해봤습니다. 오늘의 핵심은 밑의 그림을 참고하시면 되겠습니다. JS 소스 cons.. 2022. 8. 29. [자바스크립트 응용] 슬라이드 효과 01 이미지 슬라이드 효과 웹페이지를 보면서 가장 많이 접했을 유형이기도 한데요. 오늘은 이미지가 슬라이드 형식으로 변화하는 효과를 배워보겠습니다. 원본 소스 보기 원본 사이트 ▶ 슬라이드 유형 사이트는 iframe상의 '소스 보기'를 누르시면 각각 사용된 코드를 확인하실 수 있습니다. 그래서 이번엔 js소스만 올려드리고 같이 알아보는 시간을 가져볼게요. JS 소스 분석하기 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = sliderWrap.querySelector(".slider__img"); const slider = sliderImg.querySelectorAll(".slider"); let currentIndex.. 2022. 8. 29. 퀴즈 만들기06 / 객관식 다중형(슬라이드) 퀴즈 만들기_객관식 유형(슬라이드) 이번시간에는 객관식 유형(다중형)을 만들어보겠습니다! 이번엔 60문항이나 만들어야 하는데 일일히 html태그로 입력하기는 번거로우므로 스크립트를 잘~ 이용해서 작업해보겠습니다. 원본 소스 보기 원본 사이트 HTML 소스 문제 안의 변하는 내용들은 가변하는 값이지만 기본틀은 변함없으므로 html에서 필요한 부분(기본틀에 해당하는 요소들)만 작성합니다. 무엇이 빠지는 건지는 주석처리로 해놨으니 주석표시를 보시면서 확인해 주세요! 정답🐾 오답 입니다! 다음 문제 ≫ JAVASCRIPT 소스 if(quizInfo.length -1 == quizCount){ quizConfirm.innerHTML = "총 " + quizInfo.length +"문제 중 " + answerCou.. 2022. 8. 24. 퀴즈 만들기05/ 객관식 다중형 퀴즈 만들기_객관식 유형(다중) 이번시간에는 객관식 유형(다중형)을 만들어보겠습니다! 이번엔 60문항이나 만들어야 하는데 일일히 html태그로 입력하기는 번거로우므로 스크립트를 잘~ 이용해서 작업해보겠습니다. 원본 소스 보기 원본 사이트 HTML 소스 js를 이용해서 quiz__wrap안에 기존의 소스들을 반복해서 넣어주기 위해 안의 내용들은 제거합니다. JAVASCRIPT 소스 exam.push(``) quizWrap.innerHTML = exam.join(''); const exam = []으로 배열형식으로 exam을 지정했습니다. push()메서드는 값을 배열로 넣어주는 메서드인데요. 배열로 값이 들어가는 특성때문에 ,(쉼표)로 각각 구분이 됩니다. 그래서 저희가 원하는 기존의 소스형식대로 들어갈 .. 2022. 8. 24. 서치 이펙트03 검색 효과 저번시간에 이어서 또 검색 사이트를 만들어보겠습니다. 이번엔 일치하는 단어를 찾는것이 아니라 알파벳 순으로 찾기를 만들어 볼게요. 또 알파벳순으로 검색된 이후에 나타난 검색 속성값의 갯수를 구해보겠습니다. 원본 소스 보기 원본 사이트 ▶ 이 사이트에 사용된 charAt()의 특징에 대해 간단하게만 알아보고 가겠습니다. includes()는 문자열에서 지정한 index(위치값)에 해당하는 값을 문자열로 출력합니다. const str1 ="javascript reference"; const currentStr1 = str1.charAt(); //j const currentStr2 = str1.charAt("0"); //j const currentStr3 = str1.charAt("1"); //a .. 2022. 8. 22. 서치 이펙트02 검색 효과 저번시간에 이어서 또 검색 사이트를 만들어보겠습니다. 저번 시간에는 indexOF()를 사용했었죠? 이번엔 includes()를 이용해서 만들어보겠습니다. 원본 소스 보기 원본 사이트 ▶ 이 사이트에 사용된 includes()의 특징에 대해 간단하게만 알아보고 가겠습니다. includes()는 문자열 포함 여부를 검색해서 불린(true/false)을 반환합니다. const str1 ="javascript reference"; const currentStr1 = str1.includes("javascript"); //true const currentStr2 = str1.includes("j"); //true const currentStr3 = str1.includes("b"); //false 크.. 2022. 8. 17. 서치 이펙트01 검색 효과 이번시간에는 키워드검색을 할 수 있는 사이트를 만들어 보겠습니다. 원본 소스 보기 원본 사이트 ▶ 이 사이트에 사용된 indexOf()의 특징에 대해 간단하게만 알아보고 가겠습니다. indexOf()는 문자열에서 특정 문자의 위치를 찾고 인덱스값을 반환하는 메서드입니다. const str ="javascript"; const currentStr = str.indexOf("javascript"); //0 위의 예시처럼 'javascript'라는 문자열을 찾는 경우 변수에서 시작점이 0번째부터 시작되므로 출력값은 0이 반환되는 것입니다. JS 소스 분석하기 const searchBox = document.querySelector(".search__box input"); //input 박스(검색영역.. 2022. 8. 16. 퀴즈 만들기04/객관식 문제 퀴즈 만들기_객관식 유형 이번시간에는 객관식 유형(단일형)을 만들어보겠습니다! 객관식 문항을 만들기 위해서 태그를 이용하여 작성합니다. 들어가기에 앞서서 input태그의 성질에 대해 하나만 알아보고 갈게요. 이 태그는 이용자가 체크할 시 우리 눈에 보이지는 않지만 checked라는 속성값을 부여합니다. ○ 문항 체크 ❌ ● 문항 체크 ⭕ 원본 소스 보기 1_ 문제정보 및 선택자 지정 문제정보는 기존과 같이 작성하되, 객관식이라 4개의문제가 있으므로 배열-객체-배열 구조로 작성합니다. 다중선택할 일은 없기 때문에 querySelector를 사용하되, 객관식은 4번 반복되므로 querySelectorAll을 사용하여 선택해주겠습니다. 선택자지정시 한가지 꿀팁!!! quizChoice와quizSelect는 지.. 2022. 8. 8. 퀴즈 만들기 03/ 주관식 유형(다중) 퀴즈 만들기_주관식 유형(다중) 이번시간에는 저번시간에 만들었던 주관식 퀴즈의 다중유형을 만들어보겠습니다! 문제가 여러개가 될 경우 일일히 하나하나 언제 다 입력하겠어요? 이런 불편함을 자바스크립트를 통해서 보다 쉽게 해결해 봅시다. 원본 소스 보기 1_ 문제정보 및 선택자 지정 각 문제정보를 'quizInfo'라는 배열에 입력하고 저장시킨 후 반복해서 출력해야 하기 때문에 반복문을 활용해서 작업을 할거에요. 기존과 마찬가지로 querySelector를 활용하지만 이번엔 같은 이름을 가진 요소들이 중복되므로 중복되는 요소들 중에서도 특정 n번째 요소를 선택해 줄 수 있게 하기 위해서 querySelectorAll을 활용해서 작업해 주겠습니다. // 선택자 const quizType = document.q.. 2022. 8. 5. 이전 1 2 다음 반응형
