xoouxa

안녕하세요 ヾ(≧▽≦*)o 오늘은 배경 이미지 위에 이미지를 여러장 덧대어 그 이미지가 좌우로 움직일 수 있도록 효과를 한 번 주도록 하겠습니다. 그리고 닷 버튼 기능을 추가해 하단에 뜨는 버튼을 눌러도 사진이 넘어갈 수 있도록 작업해 주도록 하겠습니다. 💛완성작 입니다 CSS 스타일 css에 딱히 큰 변화는 없고, 양쪽 사이드에 뒤로가기 버튼과 앞으로 가기 버튼, 그리고 하단에 닷버튼을 만들어 주어야 하기 때문에 디자인 작업을 해줍니다. HTML prev next 사진 이미지와 이전 이미지 버튼과 다음 이미지 버튼을 설정해 줍니다. 스크립트 let images = [ "img/slideEffect01-1.jpg", "img/slideEffect02-1.jpg", "img/slideEffect03-1.j..

안녕하세요 ヾ(≧▽≦*)o 오늘은 배경 이미지 위에 이미지를 여러장 덧대어 그 이미지가 위 아래로 움직일 수 있도록 효과를 한 번 주도록 하겠습니다. 💛완성작 입니다 이미지가 prev 버튼을 누르면 사진이 뒤로 가고, next 버튼을 누르면 사진이 앞으로 넘어가도록 설정해 주었습니다. 자바스크립트, GSAP, jQurey 세 가지를 이용해 같은 효과를 주도록 하겠습니다. CSS 스타일 06. 슬라이드 이펙트 이번엔 양 옆 사이드에 버튼을 설정해 주었기 때문에 버튼에 css 효과를 주도록 하겠습니다. 또한 밑에 닷 버튼을 만들어 이미지가 넘어갈 때 닷 버튼도 그 이미지에 맞게 넘어갈 수 있도록 작업해 주었습니다. HTML prev next 다음은 메인입니다. 이미지를 지정해준 다음 두 개의 버튼을 만들어 ..

안녕하세요 ヾ(≧▽≦*)o 오늘은 배경 이미지 위에 이미지를 여러장 덧대어 그 이미지가 위 아래로 움직일 수 있도록 효과를 한 번 주도록 하겠습니다. 이미지가 부드럽게 위아래로 움직이게 해주도록 하겠습니다. 자바스크립트, GSAP, jQurey 세 가지를 이용해 같은 효과를 주도록 하겠습니다. CSS 스타일 04. 슬라이드 이펙트 HTML 순서대로 변화할 이미지 5개를 지정해 줍니다. 그 다음 s1이었다가 s5이 다시 되고 그 다음 또 다시 s1이 되기 위함을 확인하기 위해 class slider s1이라는 이름을 지정해 줍니다. 변수 설정 // 선택자 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = sliderW..

안녕하세요 ヾ(≧▽≦*)o 오늘은 배경 이미지 위에 이미지를 여러장 덧대어 그 이미지가 좌우로 움직일 수 있도록 효과를 한 번 주도록 하겠습니다. 💛 완성작입니다. 이미지가 부드럽게 좌우로 움직이게 해주도록 하겠습니다. 자바스크립트, GSAP, jQurey 세 가지를 이용해 같은 효과를 주도록 하겠습니다. CSS 스타일 총 이미지의 크기가 4800이기 때문에 이미지가 움직이는 영역에 width값을 4800로 지정해 줍니다. 또한 움직이는 개별적인 이미지의 크기는 800이기 때문에 800으로 설정해 줍니다. HTML 순서대로 변화할 이미지 5개를 지정해 줍니다. 그 다음 s1이었다가 s5이 다시 되고 그 다음 또 다시 s1이 되기 위함을 확인하기 위해 class slider s1이라는 이름을 지정해 줍니다..

안녕하세요 ヾ(≧▽≦*)o 오늘은 배경 이미지 위에 이미지를 여러장 덧대어 그 이미지가 좌우로 움직일 수 있도록 효과를 한 번 주도록 하겠습니다. 💛 완성작입니다. 자바스크립트, GSAP, jQurey 세 가지를 이용해 같은 효과를 주도록 하겠습니다. CSS 스타일 01. 슬라이드 이펙트 🍔 .slider:nth-child(1) :: before {content: '이미지1'} , .slider:nth-child(1) {z-index: 5;} ? 이 코드는 CSS 선택자를 사용하여 슬라이더 이미지 위에 이미지의 번호를 표시하고, 슬라이더 이미지의 z-index 값을 조정하는 것입니다. .slider:nth-child(n)::before 선택자는 nth-child() 함수를 사용하여 클래스 이름이 "sli..

안녕하세요 ヾ(≧▽≦*)o 오늘은 배경 이미지 위에 이미지를 여러장 덧대어 그 이미지가 좌우로 움직일 수 있도록 효과를 한 번 주도록 하겠습니다. 💛 완성작입니다. 자바스크립트, GSAP, jQurey 세 가지를 이용해 같은 효과를 주도록 하겠습니다. CSS 스타일 02. 슬라이드 이펙트 우선 전체 이미지를 100%로 설정해 줍니다. 그 다음 이미지를 덧대어 주는 부분을 설정해 주기 위해 위드값 800, 하이트값을 450으로 지정해 줍니다. 다음은 이미지가 위아래로 움직이게 해주기 위해서 위드값 4000, 하이트값 450을 지정해 줍니다. 마지막으로 개별적인 이미지 값을 설정해 주기 위해서 포지션 릴레이티브를 줍니다. html yuna243441@naver.com 각 슬라이드에 맞는 이미지를 설정해 주기..

안녕하세요 ヾ(≧▽≦*)o 오늘은 배경 이미지 위에 이미지를 여러장 덧대어 그 이미지가 위 아래로 움직일 수 있도록 효과를 한 번 주도록 하겠습니다. 💛 완성작입니다. 자바스크립트, GSAP, jQurey 세 가지를 이용해 같은 효과를 주도록 하겠습니다. CSS 스타일 03. 슬라이드 이펙트 우선 전체 이미지를 100%로 설정해 줍니다. 그 다음 이미지를 덧대어 주는 부분을 설정해 주기 위해 위드값 800, 하이트값을 450으로 지정해 줍니다. 다음은 이미지가 위아래로 움직이게 해주기 위해서 위드값 4000, 하이트값 450을 지정해 줍니다. 마지막으로 개별적인 이미지 값을 설정해 주기 위해서 포지션 릴레이티브를 줍니다. HTML 각 슬라이드에 맞는 이미지를 설정해 주기 위해 이너 안에 각각의 이미지를 ..

안녕하세요 ヾ(≧▽≦*)o 오늘은 자바스크립트 마우스 이펙트 7-2번 보충 설명을 총정리를 해보도록 하겠습니다. 이번에도 일곱번 째와 같이 정보처리기능사 60문제를 주제로 퀴즈 이펙트를 만들어 보도록 하겠습니다. 아직 완벽하게 완성하진 않았지만 열심히 한 걸 토대로 블로그를 작성해 보도록 하겠습니다 ~! ( •̀ ω •́ )✧ https://xoouxa58.tistory.com/62 : 저번 유형 바로가기 💛이번에 만든 유형은 반응형 , CBT 유형으로 OMR카드를 함께 만들어 주었습니다. 저번엔 모달창 버튼 누르면 닫히게 하는 기능, 각 문제에 대한 설명과 이미지 첨부가 필요 없을 때 안 보이게 처리해 주기, 스크립트 보기와 omr을 동시에 체크해 주기, 문제 미리 보기를 방지하기 위해 블러처리해주기,..

안녕하세요 ヾ(≧▽≦*)o 오늘은 자바스크립트 마우스 이펙트 일곱 번째 보충 설명을 총정리를 해보도록 하겠습니다. 이번에도 일곱번 째와 같이 정보처리기능사 60문제를 주제로 퀴즈 이펙트를 만들어 보도록 하겠습니다. 아직 완벽하게 완성하진 않았지만 열심히 한 걸 토대로 블로그를 작성해 보도록 하겠습니다 ~! ( •̀ ω •́ )✧ https://xoouxa58.tistory.com/61 : 저번 유형 바로가기 💛이번에 만든 유형은 반응형 , CBT 유형으로 OMR카드를 함께 만들어 주었습니다. 💛 What i made 이번엔 모달창 버튼 누르면 닫히게 하는 기능, 각 문제에 대한 설명과 이미지 첨부가 필요 없을 때 안 보이게 처리해주기, 스크립트 보기와 omr을 동시에 체크해주기, 문제 미리보기를 방지하기..

안녕하세요 ヾ(≧▽≦*)o 오늘은 자바스크립트 효율적으로 문자열과 배열에 대해 공부하도록 하겠습니다. 모던자바스크립트 프로그래밍의 정석이라는 책을 참고하여 블로그를 작성해 보도록 하겠습니다. 📜 문자열에 접근하기 자바스크립트에서는 간단한 텍스트를 처리하기 위해 문자열 유형을 자주 사용합니다. 📜 원시 유형과 객체 단순히 값만 가지고 있을 경우 원시유형이고 프로퍼티와 메서드를 가지고 있을 땐 객체라고 합니다. 자바스크립트에선 원시 유형이어도 프로퍼티와 메서드를 사용할 수 있습니다. str 변수에 length라는 프로퍼티를 정의하지 않았는데도 length 프로퍼티를 사용할 수 있습니다. let str = "hello" str.length //5 오토박싱 ? number나 boolean, string과 같은 ..