오늘은 skroll.js를 사용해서 예쁜 패럴랙스 효과를 내보겠습니다 ㅎㅎ 자바스크립트 패럴랙스 효과 -플러그인 일단 플러그인을 연동 시켜야합니다! 이렇게 플러그인을 연동시킨 다음, scrollTop값을 구해줍니다. section1 Web Story Boy Boy And div.s1-text1: "Web"이라는 텍스트를 포함하는 엘리먼트 div.s1-text2: "Story"라는 텍스트를 포함하는 엘리먼트 div.s1-img1: 5개의 div 엘리먼트를 포함하는 엘리먼트. 각각의 div 엘리먼트는 다른 이미지를 포함하며, 순차적으로 나타나고 사라집니다. div.s1-text3: "Boy"라는 텍스트를 포함하는 엘리먼트 div.s1-text4: "Boy"라는 텍스트를 포함하는 엘리먼트 div.s1-text..

오늘은 PHP로 회원가입과, 로그인, 로그아웃을 하는 방법에 대해 알아보겠습니다. PHP로 회원가입, 로그인 기능 만들기 🙆‍♀️회원가입 join.php 회원가입을 통해 다양한 정보들을 자유롭게 얻어가세요! 회원가입 회원가입 영역 이메일 이름 비밀번호 비밀번호 확인 연락처 회원가입 완료 1. 먼저, HTML 태그를 이용하여 페이지의 전반적인 구조를 생성합니다.

오늘은 부드럽게 스크롤되는 패럴랙스 효과를 알아보겠습니당. 자바스크립트 패럴랙스 효과 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..