코딩

오늘은 부드럽게 스크롤되는 패럴랙스 효과를 알아보겠습니당. 자바스크립트 패럴랙스 효과 1 구조 Javascript Parallax Effect01 패럴랙스 이펙트 : 메뉴 효과 1 2 3 4 5 6 7 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 Section1 한 번 포기하면 습관이 된다. 절대 포기하지 말아라. 02 Section2 꿈이 있으면 잡아야 하고 절대 놓지 말아야 한다. 03 Section3 불가능은 오직 의지가 없는 사람에게만 존재한다. 04 Section4 불행한 사람은 다른 사람의 불행에서 위안을 얻는다. 05 Section5 사랑이 없는 삶은 꽃도 열매도 없는 나무와 같다. 06 Section6 무엇이든 사랑하는 방법은 잃어버릴 수 있다는 것을 깨닫는 것입니..

오늘은 마무리 문제1를 풀어보겠습니다! 자바스크립트 마무리 문제 명언을 무작위로 가져와 화면에 10초마다 한 번씩 바뀌게 보여주는 프로그램을 만들어보겠습니다. 거기다 추가로 배경도 unsplah API를 사용해 랜덤으로 바뀌게 해주겠습니다. 구조 구조는 동일하게 짜주겠습니다. 스크립트 const getRandomBackground = () => { const keywords = ['programming', 'coding']; const randomIndex = Math.floor(Math.random() * keywords.length); const timestamp = new Date().getTime(); return `url('https://source.unsplash.com/random/?${ke..

오늘은 마무리 문제2를 풀어보겠습니다! 자바스크립트 마무리 문제 클릭하면 로또 번호를 생성해주는 프로그램을 만들어보겠습니다! 번호는 중복되지 않게 set을 이용할 것이고, 숫자는 1부터 45까지의 범위 안에 있어야 하며, 6개의 무작위 수를 추출할 것입니다. 구조 로또 번호 생성기 Click! 스크립트를 짜기 전에, set()에 대해 알아보겠습니다. set() JavaScript에서 Set은 값(value)의 컬렉션(collection)을 나타내는 데이터 구조입니다. Set은 중복을 허용하지 않으며, 순서를 유지합니다. Set 객체는 new Set() 생성자 함수를 사용하여 생성하며, 값(value)을 추가하기 위해서는 add() 메소드를 사용합니다. 값을 삭제하기 위해서는 delete() 메소드를 사용..

오늘은 마무리 문제1를 풀어보겠습니다! 자바스크립트 마무리 문제 명언을 무작위로 가져와 화면에 10초마다 한 번씩 바뀌게 보여주는 프로그램을 만들어보겠습니다. 길라잡이 -fetch와 then, catch를 사용해서 URL에서 지료를 가져옵니다. -가져온 데이터에 어떤 값이 어떤 구조로 저장되어 있는지 확인하고 그 중에서 명언과 말한 사람 정보를 가져오는 방법을 생각합니다. 구조 구조는 실습파일을 그대로 참고하여 가져왔습니다. 스크립트짜기 - const updateQuote = () => { ... }: updateQuote라는 이름의 화살표 함수를 정의합니다. 이 함수는 API를 호출하여 명언과 저자를 가져온 다음 결과를 업데이트합니다. - fetch("http://dummyjson.com/quotes"..

자바스크립트 슬라이드 효과 슬라이드 효과 7 슬라이드 이펙트 중 썸네일과 버튼이 있는 효과입니다. 구조 prev next 스크립트_변수 설정 let images = [ "img/sliderEffect04-min.jpg", "img/sliderEffect05-min.jpg", "img/sliderEffect03-min.jpg", "img/sliderEffect09-min.jpg", "img/sliderEffect10-min.jpg" ]; images라는 변수 안에 배열 형태로 이미지를 저장해줍니다. 스크립트_함수 만들기 function imageSlider(parent, images){ }; imageSlider(document.querySelector(".slider__wrap"), images); 해당..

자바스크립트 슬라이드 효과 슬라이드 효과 6 슬라이드 이펙트 중 닷메뉴와 버튼이 있는 효과입니다. 구조 prev next 버튼과 닷메뉴를 만들어주었습니다. 스크립트_선택자 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = sliderWrap.querySelector(".slider__img"); // 보여지는 영역 const sliderInner = sliderWrap.querySelector(".slider__inner"); // 움직이는 영역 const slider = sliderWrap.querySelectorAll(".slider"); // 개별 이미지 const sliderDot = sliderWrap.qu..

오늘은 위쪽으로 슬라이드가 넘어가는데, 3번째 효과와 다르게 연속적으로 움직일 수 있도록 작업해보겠습니다! 자바스크립트 슬라이드 효과 슬라이드 효과 5 슬라이드 이펙트 중 이미지가 세로로, 위쪽으로 넘어가는 효과입니다.(연속적) 구조 스크립트_선택자 및 변수 설정하기 슬라이드 효과 4에서는 clientWidth값을 통해 이미지 가로값을 구했으니 이번엔 clientHeight를 통해 이미지의 세로값을 구해줍니다. 그리고 CSS 속성중에서도 display: flex; 속성을 없애줍니다. 스크립트_javascript -sliderInner 변수에 있는 DOM 요소에 sliderClone 변수에 저장된 첫 번째 이미지를 복사하여 마지막 자식으로 추가합니다. 이를 통해 슬라이딩이 끝난 후 첫 번째 이미지가 다시 ..

오늘은 왼쪽으로 슬라이드가 넘어가는데, 2번째 효과와 다르게 연속적으로 움직일 수 있도록 작업해보겠습니다! 자바스크립트 슬라이드 효과 슬라이드 효과 4 슬라이드 이펙트 중 이미지가 가로로, 왼쪽으로 넘어가는 효과입니다.(연속적) 구조 구조는 슬라이드 이펙트 2번째와 동일합니다. 스크립트_선택자와 변수 설정 // 선택자 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = sliderWrap.querySelector(".slider__img"); // 보여지는 영역 const sliderInner = sliderWrap.querySelector(".slider__inner"); // 움직이는 영역 const slider ..