EFFECT31 EFFECT | GAME | 뮤직 플레이어 코딩하기 gameEffect | 👾뚠뚠 뮤직 플레이어 만들기👾 1. 사이트 구조 살펴보기 HTML 살펴보기 *** Music Player +++ A Year Ago NETFFEX 0:00 4:00 뮤직 리스트 CSS 살펴보기 3. script 살펴보기 🎧 선택자 만들기 🎧 음악 재생하기 🎧 버튼을 클릭했을 때 🎧 오디오가 끝났을 경우 🎧 진행바 설정하기 🎧 뮤직 리스트 설정하기 🎧 볼륨 조절 추가하기 원본 소스 보기 실제 사이트 보기 2022. 10. 17. EFFECT | SEARCH | sort( ), reverse( )를 이용하여 정렬하기 searchEffect | sort(), reverse()를 이용하여 정렬하기 오늘의 목표 💡 여러 정렬 구현하기(오름차순, 내림차순, 알파벳순, ...) 💡 랜덤 정렬하기 💡 카테고리별 정렬하기 1. 사이트 구조 살펴보기 HTML 살펴보기 속성 목록은 자바스크립트로 표현해주기 위해 비워두었습니다. sort(), reverse()를 이용하여 정렬하기 CSS 속성 정렬하기 반대로 정렬하기 오름차순 정렬하기 내림차순 정렬하기 알파벳순(a~z) 알파벳순(z~a) 랜덤 정렬하기 카테고리별 정렬하기 animation background border column flex font grid inset line list margin mask max min offset outline overflow overscroll .. 2022. 10. 17. EFFECT | SEARCH | filter()를 이용하여 속성의 중요도 보여주기 searchEffect | filter()를 이용하여 속성의 중요도 보여주기 오늘의 목표 💡 스크립트를 통해 속성 리스트를 나타내기 💡 중요도에 따라 리스트 나타내기 오늘의 미션 👉🏻 난이도 1개 이상, 2개 이상,... 버튼 구현하기 1. 사이트 구조 살펴보기 HTML 살펴보기 속성 목록은 자바스크립트로 표현해주기 위해 비워두었습니다. filter()를 이용하여 속성의 중요도 보여주기 CSS 속성 검색하기 ☆☆☆☆☆ ★☆☆☆☆ ★★☆☆☆ ★★★☆☆ ★★★★☆ ★★★★★ 1개 이상 2개 이상 3개 이상 4개 이상 CSS 속성 갯수 : 2. script 살펴보기 📌 속성 리스트 만들고 출력하기 속성 리스트는 cssProperty 내 배열 속 객체로 만들어주었고 map을 활용하여 출력해주었습니다. 📌 난이도.. 2022. 10. 17. EFFECT | SLIDER | 버튼과 닷버튼 형식의 이미지 슬라이드 sliderEffect | 버튼과 닷버튼 형식의 이미지 슬라이드 오늘의 목표 ❔problem 첫번째 이미지에서 이전 버튼을 누르면 마지막 사진으로 넘어가야 하며, 마지막 이미지에서 다음 버튼을 누르면 첫번째 사진으로 넘어가야 합니다. ❗️solve if문을 활용하는 방법과 if문 없이 해결하는 방법이 있으며, 오늘 보여드릴 방법은 if문 없이 해결하는 방법입니다. 1. 사이트 구조 살펴보기 HTML 살펴보기 화면 아래 닷버튼이 추가되었습니다. prev next CSS 살펴보기 닷버튼 디자인이 추가되었습니다. 2. script 살펴보기 이미지가 움직이는 영역 | 매개변수 num을 활용하여 이미지의 가로값만큼 x축으로 이동할 수 있도록 설정해줍니다. ⇢ next 버튼 설정 | currentIndex 값에 1.. 2022. 10. 17. EFFECT | PARALLAX | 리빌 효과 parallaxEffect | 리빌(Reveal) 효과 오늘의 목표 👉🏻 스크롤을 내렸을때 이미지와 글씨에 리빌 효과 주기 1. 사이트 구조 살펴보기 HTML 살펴보기 01 section1 우선 무엇이 되고자 하는가를 자신에게 말하라 그리고 해야 할일을 하라. 02 section2 이미 끝나버린 일을 후회하기 보다는 하고 싶었던 일들을 하지 못한 것을 후회하라. 03 section3 문제는 목적지에 얼마나 빨리 가느냐가 아니라 그 목적지가 어디냐는 것이다. 04 section4 도저히 손댈 수가 없는 곤란에 부딪혔다면 과감하게 그 속으로 뛰어들라. 05 section5 당신이 할수 있다고 믿든 할수 없다고 믿든 믿는 대로 될것이다. 06 section6 마음만을 가지고 있어서는 안된다. 반드시 실천하여야.. 2022. 10. 17. EFFECT | PARALLAX | 텍스트 효과 parallaxEffect | 텍스트 효과 오늘의 목표 👉🏻 스크롤을 내렸을때 글씨가 한글자씩 나타나는 효과주기 1. 사이트 구조 살펴보기 HTML 살펴보기 01 section1 우선 무엇이 되고자 하는가를 자신에게 말하라 그리고 해야 할일을 하라. 02 section2 이미 끝나버린 일을 후회하기 보다는 하고 싶었던 일들을 하지 못한 것을 후회하라. 03 section3 문제는 목적지에 얼마나 빨리 가느냐가 아니라 그 목적지가 어디냐는 것이다. 04 section4 도저히 손댈 수가 없는 곤란에 부딪혔다면 과감하게 그 속으로 뛰어들라. 05 section5 당신이 할수 있다고 믿든 할수 없다고 믿든 믿는 대로 될것이다. 06 section6 마음만을 가지고 있어서는 안된다. 반드시 실천하여야 한다. 0.. 2022. 10. 17. EFFECT | MOUSE | 텍스트 효과 mouseEffect | 텍스트 효과 오늘의 목표 👉🏻 마우스 커서 움직임에 따라 글자가 접혀서 움직이는 듯한 효과주기 👉🏻 글자에 마우스 커서를 올리면 커서가 확대되면서 글자 반전 효과주기 1. 사이트 구조 살펴보기 HTML 살펴보기 글자를 왼쪽과 오른쪽 부분으로 나눠 구조를 짜주었습니다. Pain Past Pain Past is pleasure is pleasure 지나간 고통은 지나간 고통은 쾌락이다. 쾌락이다. CSS 살펴보기 shew 속성과 overflow 속성을 사용하여 글자가 접혀서 나오는 듯한 효과를 주었습니다. 2. script 살펴보기 📌 글씨의 움직임과 cursor 설정하기 마우스 커서의 pageX, pageY을 구하고 window.innerWidth의 절반 값을 빼서 텍스트가 이미지.. 2022. 9. 30. SEARCH | 검색 유형04 searchEffect | find()를 이용하여 속성 설명 나타내기 오늘의 목표 💡 스크립트를 통해 속성 리스트를 나타내기 💡 데이터를 입력하고 리스트와 비교하여 설명 출력하기 오늘의 미션 👉🏻 속성 버튼을 클릭했을 때도 설명 출력되도록 만들기 1. 사이트 구조 살펴보기 HTML 살펴보기 속성 목록은 자바스크립트로 표현해주기 위해 비워두었습니다. find()를 이용하여 속성을 검색하면 설명 보여주기 CSS 속성 검색하기 검색하기 속성을 검색하시면 설명이 표시됩니다. !!! CSS 속성 갯수 : 2. script 살펴보기 📌 속성 리스트 만들고 출력하기 속성 리스트는 cssProperty 내 배열 속 객체로 만들어주었고 map을 활용하여 출력해주었습니다. 📌 속성을 검색했을때 설명 출력하기 addEven.. 2022. 9. 29. EFFECT | MOUSE | 이미지 기울기 / 글자 반전 효과 주기 mouseEffect | 기울기 효과 / 글씨 반전 효과 오늘의 목표 👉🏻 마우스 커서 움직임에 따라 이미지가 기울어지는 효과주기 👉🏻 마우스 커서와 글/이미지가 만나는 부분은 반전효과 설정하기 1. 사이트 구조 살펴보기 CSS 살펴보기 요소에 적용할 변화의 종류를 미리 브라우저에게 알려주는 역할을 함으로써, 실제 요소가 변하기 전에 미리 브라우저를 그에 맞게 최적화시키는 속성입니다. 📌 will-change 요소에 적용할 변화의 종류를 미리 브라우저에게 알려주는 역할을 함으로써, 실제 요소가 변하기 전에 미리 브라우저를 그에 맞게 최적화시키는 속성입니다. - will-change 적용시 원래보다 더 오랜 시간 최적화를 유지해야하기 때문에 스크립트를 통해 변화 전후에 활성/비활성을 설정해주는 것이 좋습니.. 2022. 9. 28. EFFECT | MOUSE | 마우스 커서 움직임 반대로 이미지 움직이기 mouseEffect | 이미지 효과 오늘의 목표 👉🏻 마우스 커서 움직임에 따라 배경 이미지가 반대로 움직이는 효과주기 👉🏻 마우스 커서 디자인이 이미지 안에서만 따라다니도록 설정하기 1. 사이트 구조 살펴보기 CSS 살펴보기 + object-fit: cover; background-size: cover;와 같은 역할을 하는 속성으로 배경이 아닌 이미지에 사용할때 쓰이는 속성입니다. HTML 살펴보기 영화 '쥬토피아'에 나오는 명언을 넣어주었습니다. Don't beat yourself up. Don't need to run so fast. Sometimes we coma last but we did our best. 자신을 자책하지마, 너무 서두르지 않아도 돼. 마지막으로 들어왔더라도 최선을 다했으면 .. 2022. 9. 23. EFFECT | MOUSE | 배경 조명 효과주기 mouseEffect | 배경 조명 효과 오늘의 목표 👉🏻 마우스 커서 움직임에 따라 배경 사진에 조명을 비추는 느낌으로 효과주기 1. 사이트 구조 살펴보기 CSS 살펴보기 span으로 감싼 글자는 키워드로 색깔을 다르게 주었습니다. cursor 디자인도 따로 조명을 비추는 듯한 느낌으로 디자인 했습니다. HTML 살펴보기 영화 '니모를 찾아서'에 나오는 명언을 넣어주었습니다. The best moment suddenly comes. 최고의 순간은 갑자기 찾아오는 거야. 2. script 살펴보기 📌 cursor에 움직임에 따라 배경이 컬러로 보일 수 있는 이유 cursor 자체에 background-image를 넣고 위치와 크기를 맞춰준 다음 fix시켜 마우스의 움직임에 따라 보일 수 있도록 설정해주었.. 2022. 9. 22. EFFECT | PARALLAX | 스크롤에 따라 이질감 나타내기 parallaxEffect | 이질감 효과 오늘의 목표 👉🏻 스크롤을 내렸을때 사진은 위로, 글씨는 옆으로 이동시켜 이질감 효과 나타내보기 1. 사이트 구조 살펴보기 CSS 살펴보기 HTML 살펴보기 01 section1 우선 무엇이 되고자 하는가를 자신에게 말하라 그리고 해야 할일을 하라. 02 section2 이미 끝나버린 일을 후회하기 보다는 하고 싶었던 일들을 하지 못한 것을 후회하라. 03 section3 문제는 목적지에 얼마나 빨리 가느내가 아니라 그 목적지가 어디냐는 것이다. 04 section4 도저히 손댈 수가 없는 곤란에 부딪혔다면 과감하게 그 속으로 뛰어들라. 05 section5 당신이 할수 있다고 믿든 할수 없다고 믿든 믿는 대로 될것이다. 06 section6 마음만을 가지고 있.. 2022. 9. 20. EFFECT | MOUSE | 마우스 따라다니기(GSAP) mouseEffect | 마우스 따라다니기(GSAP) 오늘의 목표 👉🏻 GSAP를 활용해 더 부드럽게 마우스 효과 설정하기 1. 사이트 구조 살펴보기 CSS 살펴보기 HTML 살펴보기 Success isn't permanent, and failure isn't fatal. 성공은 영원하지 않고, 실패는 치명적이지 않다. 2. script 살펴보기 원본 소스 보기 실제 사이트 보기 2022. 9. 19. EFFECT | MOUSE | 마우스 따라다니기 mouseEffect | 마우스 따라다니기 오늘의 목표 👉🏻 마우스 커서 대신 css로 디자인한 모양이 마우스를 따라다니도록 설정하기 👉🏻 강조하고 싶은 글자에 커서를 가져갔을 떄 다양한 효과주기 1. 사이트 구조 살펴보기 CSS 살펴보기 HTML 살펴보기 You can't be more than others if you do like others 남과 같이 해서는 남 이상이 될 수 없다. clientX : 0px clientY : 0px offsetX : 0px offsetY : 0px pageX : 0px pageY : 0px screenX : 0px screenY : 0px 2. script 살펴보기 원본 소스 보기 실제 사이트 보기 2022. 9. 19. EFFECT | PARALLAX | 스크롤에 따라 이미지 서서히 나타내기 Parallax Scroll 효과 오늘의 목표 👉🏻 스크롤을 내리면 차례대로 내용이 나타나도록 설정하기 👉🏻 나타날때 효과 설정하기 (rotate, skew, cubic-bezier, ...) 1. 사이트 구조 살펴보기 CSS 살펴보기 HTML 살펴보기 01 section1 우선 무엇이 되고자 하는가를 자신에게 말하라 그리고 해야 할일을 하라. 02 section2 이미 끝나버린 일을 후회하기 보다는 하고 싶었던 일들을 하지 못한 것을 후회하라. 03 section3 문제는 목적지에 얼마나 빨리 가느내가 아니라 그 목적지가 어디냐는 것이다. 04 section4 도저히 손댈 수가 없는 곤란에 부딪혔다면 과감하게 그 속으로 뛰어들라. 05 section5 당신이 할수 있다고 믿든 할수 없다고 믿든 믿는 대.. 2022. 9. 19. SLIDER | 이미지 슬라이더 | 버튼 형식의 이미지 슬라이드 sliderEffect | 버튼 형식의 이미지 슬라이드 오늘의 목표 ❔problem 첫번째 이미지에서 이전 버튼을 누르면 마지막 사진으로 넘어가야 하며, 마지막 이미지에서 다음 버튼을 누르면 첫번째 사진으로 넘어가야 합니다. ❗️solve if문을 활용하는 방법과 if문 없이 해결하는 방법이 있으며, 오늘 보여드릴 방법은 if문 없이 해결하는 방법입니다. 1. 사이트 구조 살펴보기 CSS 살펴보기 이미지를 좌우로 이동할 수 있는 버튼 부분이 추가되었습니다. HTML 살펴보기 마찬가지로 양쪽 버튼이 추가되었습니다. prev next 2. script 살펴보기 이미지가 움직이는 영역 | 매개변수 num을 활용하여 이미지의 가로값만큼 x축으로 이동할 수 있도록 설정해줍니다. ⇢ next 버튼 설정 | curr.. 2022. 9. 19. EFFECT | PARALLAX | 숨김 메뉴 + Top 기능 적용하기 Parallax Scroll 효과 오늘의 목표 👉🏻 상단 메뉴가 스크롤을 내리면 사라지고 올릴때 나타나도록 설정하기 👉🏻 제일 마지막 section에 위치했을때 Top 버튼이 나타나 위로 올라가도록 설정하기 1. 사이트 구성 살펴보기 CSS 살펴보기 HTML 살펴보기 Javascript Parallax Effect03 패럴랙스 이펙트 - 숨김 메뉴 1 2 3 4 5 6 7 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 Top 01 section1 우선 무엇이 되고자 하는가를 자신에게 말하라 그리고 해야 할일을 하라. 02 section2 이미 끝나버린 일을 후회하기 보다는 하고 싶었던 일들을 하지 못한 것을 후회하라. 03 section3 문제는 목적지에 얼마나 빨리 가느내가 아니라 그.. 2022. 9. 14. EFFECT | PARALLAX | 사이드 메뉴 적용하기 Parallax Scroll 효과 오늘의 목표 👉🏻 사이드 메뉴 설정하기 👉🏻 사이드 메뉴를 클릭했을 때 해당 section으로 이동하도록 설정하기 👉🏻 사이드 메뉴가 스크롤에 따라 반응하도록 설정하기 1. 사이트 구성 살펴보기 CSS 살펴보기 HTML 살펴보기 Javascript Parallax Effect02 패럴랙스 이펙트 - 사이드 메뉴 1 2 3 4 5 6 7 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 section1 우선 무엇이 되고자 하는가를 자신에게 말하라 그리고 해야 할일을 하라. 02 section2 이미 끝나버린 일을 후회하기 보다는 하고 싶었던 일들을 하지 못한 것을 후회하라. 03 section3 문제는 목적지에 얼마나 빨리 가느내가 아니라 그 목적지가 .. 2022. 9. 14. EFFECT | Parallax Scroll 효과 적용하기 Parallax Scroll 효과 패럴랙스 스크롤링은 사용자가 마우스를 스크롤할 때, 원거리에 있는 배경 이미지는 느리게 움직이게 하고, 근거리에 있는 사물 이미지는 빠르게 움직이도록 함으로써 입체감을 느낄 수 있게 만든 디자인 기법입니다. 오늘은 이미지가 아닌 메뉴바에 적용시켜 보는 방법을 배워보도록 할게요 ! 설명은 차근차근 더 추가하도록 하겠습니다 !🤯 그림으로 먼저 확인해봅시다 ! 👾 Parallax Scroll 효과 👾 1section1, 2, 3 ,... 의 위치값과 스크롤의 위치값을 비교하기 위해 forEach로 .content__item의 element 값과 index 값을 가지고 옵니다. 2if문을 사용해 scrollTop 값이 element.offsetTop 값보다 크면 메뉴바에 있는 .. 2022. 9. 6. SLIDER | 이미지 슬라이더 | 좌로 넘기기(연속) SLIDER 효과_좌로 움직이는 이미지(연속)를 만들어보자 ! 저번 시간에 해봤던 '이미지가 좌로 움직이는' 효과를 이번엔 '연속'으로 나오도록 만들어 봅시다. 원본 페이지 내에서도 소스보기를 통해 코드를 바로 확인해보실 수 있습니다^0^ 원본 소스 보기 script를 살펴봅시다 ! 이미지 좌로 움직이기(연속) | 여러 이미지를 감싸는 slider__wrap을 일정 시간 간격마다 좌로 이동해서 이미지가 움직이는 것처럼 보이게 해줍니다. 여기에 더해 첫번째 위치한 사진을 뒤에 한번 더 나오도록 해주고 리셋시켜 처음부터 다시 반복해서 나오도록 설정해줍니다. slider__wrap 좌로 이동 ☛ 첫번째 사진 마지막 사진 뒤로 복사 ☛ 마지막 사진 위치했을 때, 초기화 설정 첫번째 사진을 복사하는 이유; 복사하.. 2022. 9. 4. SLIDER | 이미지 슬라이더 | 좌로 넘기기 SLIDER 효과_좌로 움직이는 이미지를 만들어보자 ! SLIDER 효과 중 이미지가 좌로 움직이는 효과를 만들어 봅시다. 원본 페이지 내에서도 소스보기를 통해 코드를 바로 확인해보실 수 있습니다^0^ 원본 소스 보기 script를 살펴봅시다 ! 이미지 좌로 움직이기 | 여러 이미지를 감싸는 slider__wrap을 일정 시간 간격마다 좌로 이동해서 이미지가 움직이는 것처럼 보이게 해줍니다. currentIndex = (currentIndex +1) % sliderCount; | 이 밖의 if 조건문을 사용할 수도 있습니다. 2022. 8. 29. SLIDER | 이미지 슬라이더 | transition 효과 SLIDER 효과를 만들어보자 ! SLIDER 효과를 통해 이미지가 넘어가는 페이지를 만들어봅시다. 원본 페이지 내에서도 소스보기를 통해 코드를 바로 확인해보실 수 있습니다^0^ 원본 소스 보기 script를 살펴봅시다 ! setInterval(() =>{},2000) | 일정한 시간 간격을 두고 반복해서 실행하고 싶을 때 사용하는 함수입니다.(2000 = 2초) let nextIndex = (currentIndex + 1) % sliderCount; | 나머지 값을 활용해서 이미지가 순서대로 나올 수 있도록 해줍니다. 2022. 8. 29. QUIZ | 문제 만들기 | 방법 06 | 슬라이드 형식 QUIZ를 만들어보자 ! QUIZ의 여러 형태 중 객관식(여러문항); 슬라이드 형식 형식으로 만들어봅시다. 원본 소스 보기 script를 살펴봅시다 ! + 정답 확인 버튼을 누를 경우, 문제 카운트수가 1씩 증가되며 그에 따라 다음 문제로 체인지 + 동시에 맞고 틀림을 알려줬던 강아지의 모습도 원래대로 돌리기 위해 like 와 dislike 제거 + 마지막 문제에 도달했을 경우 총 몇문제중 얼만큼 맞췄는지 표시 2022. 8. 24. QUIZ | 문제 만들기 | 방법 05 | 점수 확인 QUIZ를 만들어보자 ! QUIZ의 여러 형태 중 객관식(여러문항); 점수확인 형식으로 만들어봅시다. 원본 소스 보기 script를 살펴봅시다 ! const divBox = document.createElement("div"); quizSelectsWrap.appendChild(divBox).innerHTML = `${question.answerEx}`; + 오답일 경우 div 박스를 만들고 quizSelectsWrap의 자식요소로 넣어 해설이 뜨도록 설정 quizConfirm.textContent = `${quizScore < 36 ? "총 " + quizInfo.length + "문제 중에 " + quizScore + "문제를 맞추었습니다. 결과는 탈락입니다!" : "총 " + quizInfo.len.. 2022. 8. 24. SEARCH | 검색 유형03 SEARCH 효과를 만들어보자 ! 문자열 메서드 charAt( )을 활용하여 검색 페이지를 만들어봅시다. 이번에는 검색 효과가 아닌 키워드별로 나누어 볼 수 있도록 만들어주었습니다. 원본 소스 보기 HTML을 살펴봅시다 ! charAt()를 이용하여 검색하기 CSS 속성 첫글자 검색하기 a b c d e f g h i j k l m n o p q r s t u v w x y z ... + 검색 부분을 없애고 알파벳 키워드를 표시 CSS를 살펴봅시다 ! .search__info .keyword { text-align: center; margin-bottom: 10px; } .search__info .keyword span { border: 2px solid var(--htmlColor); border-ra.. 2022. 8. 22. SITE | 검색유형 | includes( ) SEARCH 효과를 만들어보자 ! 문자열 메서드 includes( )을 활용하여 검색 페이지를 만들어봅시다. 원본 소스 보기 script를 살펴봅시다 ! const searchInfo = document.querySelector(".search__info .num") searchInfo.innerHTML = searchList.length > 전체 CSS 속성 갯수를 script로 추가시켜줍니다. 사용자가 입력한 키워드를 searchBox에 저장 ↓ dataset.name으로 css 속성의 모든 값을 불러옴 ↓ 값 중에서 사용자가 입력한 값이 있으면 숨김 해제 / 없으면 숨김 추가 2022. 8. 17. SEARCH | 검색 유형01 SEARCH 효과를 만들어보자 ! SEARCH 효과를 만들어 HTML/CSS/JAVASCRIPT 검색 페이지를 만들어봅시다. 원본 소스 보기 script를 살펴봅시다 ! addEventListener("keyup") | 이벤트 메서드 중 keyup은 키를 눌렀다가 뗐을 때 이벤트가 실행됩니다. indexOf | 문자열 메서드인 indexOf는 문자열에서 특정 문자의 위치를 찾아 숫자로 반환시켜 줍니다. indexOf( )를 활용해 0(false)이 되는 값만 hide를 지워 원하는 값이 나타날 수 있도록 해줍니다. 2022. 8. 17. QUIZ | 문제 만들기 | 방법 04 QUIZ를 만들어보자 ! QUIZ의 여러 형태 중 객관식(한문항) 형식으로 만들어봅시다. 원본 소스 보기 script를 살펴봅시다 ! 문제/보기 출력 | 함수는 실행문으로 여러 실행문을 모아 정리해 줄 수 있습니다. 보기 출력 | 4개가 있기 때문에 반복문을 사용하여 출력해줍니다. 정답 확인 | 사용자가 어떤 답을 선택했는지 확인 > 사용자가 선택한 답과 정답 일치 여부 확인 > 일치하면 정답표시/ 그렇지 않으면 오답과 해설표시 2022. 8. 8. QUIZ | 문제 만들기 | 방법 03 QUIZ를 만들어보자 ! QUIZ의 여러 형태 중 주관식(여러문항) 형식으로 만들어봅시다. 원본 소스 보기 script를 살펴봅시다 ! #1. forEach( )는 순서를 인식하기 때문에 괄호 안에 i만 쓰면 요소로 인식합니다. forEach(e, i)로 써야 index 값으로 인식 할 수 있습니다. #2. 버튼이 여러개일 경우 또한 여러개가 있다는 것을 알려주고 실행해야 됩니다. 버튼이 한개일 경우 quizConfirm.addEventListener("click", () => { 버튼이 여러개일 경우 quizConfirm.forEach((btn, num) => { btn.addEventListener("click", () => { 2022. 8. 6. QUIZ | 문제 만들기 | 방법 02 QUIZ를 만들어보자 ! QUIZ의 여러 형태 중 주관식 답변 형식으로 만들어봅시다. 원본 소스 보기 script를 살펴봅시다 ! 속성값 의미 textContent innerText와 같은 기능으로 쓰이지만 띄어쓰기를 포함해 텍스트를 있는 그대로 읽는다는 점이 다릅니다. toLowerCase() 해당 문자열을 소문자로 변환시키는 속성입니다. trim() 문자열에 있는 공백을 없애주는 속성입니다. 2022. 8. 4. 이전 1 2 다음
