xoouxa

팀프로젝트 메인 구상 피그마 작업입니다 ! 아래 링크들의 메인 이미지를 참고하며 작업해 보았습니다 😎😊 애플 :https://www.apple.com/kr/store?afid=p238%7CsiADh6hbK-dc_mtid_18707vxu38484_pcrid_650480254001_pgrid_16348496961_pntwk_g_pchan__pexid__&cid=aos-kr-kwgo-Brand--slid---product- Apple Store 온라인 Apple Store의 모든 매력이 온라인에서도 그대로. 지금 새 제품을 구입하거나 보상 판매 크레딧, 개인 쇼핑 지원, 유연한 결제 옵션, 전문가의 도움 등 모든 혜택을 누리세요. www.apple.com 필리 :https://pilly.kr/ 맞춤영양제 필리..

안녕하세요 ヾ(≧▽≦*)o 오늘은 자바스크립트 문자열 객체 정리를 해보도록 하겠습니다. at(), charAt(), charCodeAt(), charPointAt(), concat(), localeCompare(), normalize(), padEnd(), padStart(), repeat() 메서드에 대해 정리해 보도록 하겠습니다 ~ at() 메서드 at() 메서드는 지정한 숫자(index)를 받아, 문자열에서 해당 되는 인덱스의 요소를 반환합니다. at() 메서드는 charAt() 메서드와 유사하지만, charAt() 메서드와 달리 유니코드 문자열에서 작동합니다. 또한 at() 메서드는 인덱스가 문자열 길이를 벗어나는 경우 undefined를 반환합니다. 기본 예제 const str = 'Hello ..

정보처리기사 기출 문제를 자바스크립트로 변환한 문제들을 풀어보도록 하겠습니다 🙂 저는 엄청 어려웠는데 .. 여러분도 같이 풀어봐요 다 맞으면 바로 기사 시험 준비 접수 고고고고고고고고고고고 😎😎😎😎😎😎😎😎😎😎🙌🙌 01. 결과값을 작성하시오 { let i = 0; let sum = 0; while(i < 10){ i = i+1; if( i % 3 == 0) sum -= i; if( i % 3 == 1) sum += i; if( i % 3 == 2) sum *= i } console.log(sum) } 정답 : 129 해설 : 이 코드는 1부터 10까지의 수를 순회하면서, 각 수가 3으로 나누어질 때마다 해당 수를 빼고, 3으로 나눈 나머지가 1일 때는 해당 수를 더하고, 3으로 나눈 나머지가 2일 때는 해..

안녕하세요 ヾ(≧▽≦*)o 오늘은 패럴렉스 효과를 사용해 밑으로 스크롤하면 사진이 스크롤되면서 명언이 나오고, 사진의 좌표값을 구하고 그 좌표값을 화면에 나타내 보도록 하겠습니다! 이 작업은 포트폴리오를 작성할 때 자주 사용되는 양식이라고 하니 포폴을 준비하시는 분들은 제 블로그를 참고하셔서 멋진 포트폴리오를 만들어 보시면 좋을 것 같습니다 ! 🥰 💛완성화면 입니다. 👏 CSS는 너무 길어서 제 github로 오시면 소스를 확인하실 수 있습니다. 메뉴를 누르시면 1-9 중 원하시는 곳으로 넘어가게 됩니다. HTML 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 9개의 사진과 명언을 넣어주기 위해 nav를 만들고 그 안에 ul을 만들고 li를 9개 만들어 1-9번까지의 섹션과 메뉴를 만들..

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

안녕하세요 ヾ(≧▽≦*)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 스타일 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 각 슬라이드에 맞는 이미지를 설정해 주기..