effect7 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 | PARALLAX | 리빌 효과 parallaxEffect | 리빌(Reveal) 효과 오늘의 목표 👉🏻 스크롤을 내렸을때 이미지와 글씨에 리빌 효과 주기 1. 사이트 구조 살펴보기 HTML 살펴보기 01 section1 우선 무엇이 되고자 하는가를 자신에게 말하라 그리고 해야 할일을 하라. 02 section2 이미 끝나버린 일을 후회하기 보다는 하고 싶었던 일들을 하지 못한 것을 후회하라. 03 section3 문제는 목적지에 얼마나 빨리 가느냐가 아니라 그 목적지가 어디냐는 것이다. 04 section4 도저히 손댈 수가 없는 곤란에 부딪혔다면 과감하게 그 속으로 뛰어들라. 05 section5 당신이 할수 있다고 믿든 할수 없다고 믿든 믿는 대로 될것이다. 06 section6 마음만을 가지고 있어서는 안된다. 반드시 실천하여야.. 2022. 10. 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. QUIZ | 문제 만들기 | 방법 01 QUIZ를 만들어보자 ! QUIZ의 여러 형태 중 정답 확인하기 형식으로 만들어봅시다. 원본 소스 보기 _ script를 살펴봅시다 ! 속성값 의미 innerText Element 속성으로 사용자에게 보여지는 텍스트 값을 불러오는 속성입니다. addEventListener document의 특정요소에 event를 등록하는 속성으로 이번 퀴즈에서는 click 이벤트를 사용했습니다. El.classList.add 클래스를 추가하는 속성입니다. 2022. 8. 4. 이전 1 다음
