코딩공부중인블로그

※패럴렉스 이펙트 메뉴 효과 전체소스 보러가기 css 보러가기 HTML 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 section1 삶은 탐구하는 모험이다. 02 section2 오늘 당신이 할 수 있는 최선의 일을 하라. 03 section3 비난은 쓸모없는 짓이다. 04 section4 우리의 삶은 우리가 생각하는 것처럼 빠르지 않고, 우리가 생각하는 것보다 짧다. 05 section5 머리로 생각하는 것보다는 마음으로 생각하고 행동하라. 06 section6 인생은 문제다. 그것을 해결해 나가는 과정에서 삶이 만들어진다. 07 section7 성공은 단순히 실패를 거듭하고 계속하는 것이다. 08 section8 기회는 항상 어려운 일 모습으로 찾아온다. 09 section9..

10초마다 json에 담긴 명언 하나를 랜덤으로 가져오기 문제풀이 보러가기 ※10초마다 명언가져오기 + 배경화면 바꾸기 전체소스 명언 모음집 명언 - 10초 마다 명언을 json파일에서 가져오는 것에서 추가로 배경화면도 바뀌게 해주었습니다. const bgimg = () => { fetch(`https://source.unsplash.com/random/?wallpapers`) .then((imgs) => { let imgurl = imgs.url console.log(imgurl) document.body.style.backgroundImage = 'url('+imgurl+')' }); } 함수를 하나 더 만들어서 랜덤으로 이미지가 나오는 사이트를 가져와 필요한 정보를 가져온후 변수로 저장해줍니다. 그..

※set()을 이용해 중복없이 랜덤으로 로또 번호 생성하기 전체 소스 로또 번호 생성기 번호 생성 javascript ·우선 그곳에 값을 가져오거나 넣기위해 선택자를 만들어 줍니다. ·addEventListener()의 이벤트함수를 이용해 lottoBtn을 클릭했을때 함수가 실행 되도록 하였습니다. · set 변수하나를 만들어 new Set() 저장해준후 for문을 이용하여 변수안에 45개의 번호를 랜덤으로 6개 넣어줍니다.(이때 Set() 에 의해서 중복되는 값은 나오지 않게 됩니다.) ·randomNum 변수를 하나 더 만들어 Array.from()을 이용해 set을 배열로 변환하여 저장 해줍니다. ·randomNum를 forEach()함수로 실행해서 값(num)과 인덱스값(i)을 가져옵니다. ·조건..

※10초마다 json에 담긴 명언 하나를 랜덤으로 가져오기 전체 소스 명언 모음집 명언 - javascript ·텍스트를 넣을 곳을 querySelector을 이용하여 선택자로 만들어 가져옵니다. ·datawisesaying함수를 만들어 fetch를 통해 josn의 파일을 가져오고 then을 통해 파일을 res로변경후 res.json()으로 자바스크립트의 객체로 변경하고 dtas로 이름을 변경하여 쓸 수 있게 해줍니다. ·그후 그 안에 필요한 데이터를 가져와 변수로 저장을 해주었습니다. ·명언을 랜덤으로 보여주기위해 Math를 이용하여 데이터의 갯수만큼 랜덤 숫자가 나오게 저장해 주었습니다. ·데이터를 랜덤으로 가져오게 wisesaying[Random]를 변수로 저장해 주었습니다. ·이제 json에서 가..

슬라이드 이펙트1 기본유형 보러가기 슬라이드 이펙트2 가로유형 보러가기 슬라이드 이펙트3 세로유형 보러가기 슬라이드 이펙트4 가로유형 (연속)보러가기 슬라이드 이펙트5 세로유형 (연속) 보러가기 슬라이드 이펙트6 버튼,닷메뉴 보러가기 전체소스 보러가기 Javascript Slider Effect07 슬라이드 이펙트 : 버튼,썸네일 1 2 3 4 5 6 7 prev next ghkddn132@naver.com slider__img와 slider__thumb에 이미지는 자바스크립트를 통해 넣어 주기 때문에 비워주시고,슬라이드 이펙트 6에서 사용했던 slider__btn을 사용하였습니다. 그후 각 영역의 간격을 정해줍니다. let images = [ "img/sliderEffect01-min.jpg", "im..

슬라이드 이펙트1 기본유형 보러가기 슬라이드 이펙트2 가로유형 보러가기 슬라이드 이펙트3 세로유형 보러가기 슬라이드 이펙트4 가로유형 (연속)보러가기 슬라이드 이펙트5 세로유형 (연속) 보러가기 슬라이드 이펙트7 버튼,썸네일 보러가기 슬라이드 이펙트 6 버튼, 닷메뉴 전체소스 보러가기 .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지가 보이는 영역 */ position: relative; width: 800px; height: 450px; overflow: hidden; } .slider__inner { /* 이미지 움직이는 ..

슬라이드 이펙트1 기본유형 보러가기 슬라이드 이펙트2 가로유형 보러가기 슬라이드 이펙트3 세로유형 보러가기 슬라이드 이펙트4 가로유형 (연속)보러가기 슬라이드 이펙트6 버튼,닷메뉴 보러가기 슬라이드 이펙트7 버튼,썸네일 보러가기 슬라이드 이펙트5 세로유형 (연속) 전체소스 보러가기 Javascript Slider Effect05 슬라이드 이펙트 : 위로 움직이기 (연속적으로) 1 2 3 4 5 6 ghkddn132@naver.com 슬라이드 이펙트4 가로유형(연속)에서 slider__inner의 width값을 주어 이미지들이 제대로 가로로 정렬 할수 있게 해주었지만 세로유형(연속)에서는 원래 세로정렬 되어있던 이미지들을 slider__inner에 display: flex, flex-wrap: wrap을 ..

슬라이드 이펙트1 기본유형 보러가기 슬라이드 이펙트2 가로유형 보러가기 슬라이드 이펙트3 세로유형 보러가기 슬라이드 이펙트5 세로유형 (연속) 보러가기 슬라이드 이펙트6 버튼,닷메뉴 보러가기 슬라이드 이펙트7 버튼,썸네일 보러가기 슬라이드 이펙트4 가로유형 (연속) 슬라이드 이펙트2의 가로유형처럼 다시돌아가는것이 아닌 자연스럽게 슬라이드 되게 하였습니다. 전체소스 보러가기 Javascript Slider Effect04 슬라이드 이펙트 : 좌로 움직이기 (연속적으로) 1 2 3 4 5 6 ghkddn132@naver.com .slider__inner 의 width 값을 첫번째의 이미지를 복사하여 나온거 까지 포함하여 4800으로 해줍니다. ※JAVASCRIPT 우선 GSAP 의 라이브러리를 가져옵니다. ..

슬라이드 이펙트1 기본유형보러가기 슬라이드 이펙트2 가로유형 보러가기 슬라이드 이펙트4 가로유형 (연속)보러가기 슬라이드 이펙트5 세로유형 (연속) 보러가기 슬라이드 이펙트6 버튼,닷메뉴 보러가기 슬라이드 이펙트7 버튼,썸네일 보러가기 슬라이드 이펙트3 세로유형 전체소스 보러가기 슬라이드 이펙트 가로 유형에서 가져와서 /* display: flex; */ /* flex-wrap: wrap; */ /* width: 4000px; */을 주석 처리 해주어서 가로에서 세로로 변경 하였습니다. ※JAVASCRIPT 가로유형에서 처럼 똑같이 setInterval함수를 쓰고 sliderInterval의 주기만큼 반복 하도록 하게 하였습니다. 그후 transfrom을 이용하여 이미지의 높이만큼 translateY의 ..

슬라이드 이펙트1 기본유형보러가기 슬라이드 이펙트3 세로유형 보러가기 슬라이드 이펙트4 가로유형 (연속)보러가기 슬라이드 이펙트5 세로유형 (연속) 보러가기 슬라이드 이펙트6 버튼,닷메뉴 보러가기 슬라이드 이펙트7 버튼,썸네일 보러가기 슬라이드 이펙트2 가로유형 전체 소스 보러가기 Javascript Slider Effect02 슬라이드 이펙트 : 좌로 움직이기 1 2 3 4 5 6 ghkddn132@naver.com 우선 사진을 가로로 정렬 해주어야 하기 때문에 display: flex;를 사용해 이미지를 가로로 해줍니다. 그리고 overflow: hidden;을 이용해 잘리는 이미지는 안보이게 해줍니다. ※JAVASCRIPT GSAP를 사용하기위해 라이브러리를 가져오고 정해준 시간주기로 반복하고 변수..