오늘은 반응형에서 발생하는 에러인 중복되는 이벤트를 제거해보겠다! 오늘의 에러는 어쩌다 마주하게됐냐하믄.. 열심히 반응형 작업 중, 퀵 메뉴에 대한 부분이 있었는데 모바일과 패드(세로) 기기에선 퀵 메뉴 중 하나를 눌렀을 때 모달창이 띄워지고 PC기준에서는 그냥 다른 링크로 보내버리는 로직을 짰다. 메뉴 1인데 모바일에선 모달로 나타날거임 메뉴 2임 일단 저 첫 번째 메뉴를 누르면 새 페이지가 열리면서 원하는 링크로 이동한다. 하지만 modal이라는 아이디를 보면 알 수 있듯이, 사이트 정보 중 모바일 기기로 전환되면 레이아웃 처리가 곤란해지는 경우가 많다. 그렇기 때문에 퀵메뉴로 모달을 열 수 있도록 만드는 것임~~ 그래서 모달창을 열고 닫는 제이쿼리를 추가해줌.. $("#modal").on("clic..

아래의 효과를 background에 넣어보려한다. 점들이 파도처럼 꿀렁이는? 효과이다. See the Pen three.js canvas - particles - waves by deathfang (@deathfang) on CodePen. Three.js 배경 적용 위에 언급한 효과는 스크립트가 굉장해엄청나 복잡하므로 ,,,(용량 장난없음;) 아래의 코드펜 예제를 참고하였다 https://codepen.io/mweslander/pen/JreNPj ThreeJS Canvas Particle Waves ... codepen.io 똑같은 효과인데 커스텀에 따라 느낌이 확 달라지므로 이쁘게 커스텀해보자~ HTML 구조 Three.js section one section two section three sect..

패럴랙스 이펙트하면 가장 기본적인 것은 아마 스크롤의 감도? 아닐까 생각이 든다. 스크롤 움직이는 느낌에 따라 사이트의 퀄을 좌우할 수 있달까!? 난 그렇게 생각한다. 아무튼 가장 많이 쓰는 플러그인은 lenis 아닐까 싶다. Lenis (smooth scroll) lenis 공식 사이트 https://lenis.darkroom.engineering/ Lenis – Get smooth or die trying A smooth scroll library fresh out of the Studio Freight Darkroom lenis.darkroom.engineering 깃허브 https://github.com/darkroomengineering/lenis GitHub - darkroomengineeri..

개인 프로젝트를 할 때엔 보통 Gitmoji 사용해서 커밋을 남기는데, 보통 협업을 할 때엔 Gitmoji보단 그냥 커밋 컨벤션 규칙을 세워서 하기 때문에 나중에 참고할 수 있도록 정리할 예정이다. 그리고 Gitmoji를 쓰면서 커밋을 남기고있는데 좀 헷갈려서 다시 정리해볼 것이다. 커밋 컨벤션 🤔 커밋 컨벤션은 왜 필요할까? 개인 프로젝트 경우에는 나만 알아보면 그만이지만.. 협업을 할 경우에는 누가, 어떤 코드를 작성하고 수정했는지 알아보기 위한 수단이라고 볼 수 있다. 규칙을 세워놓고 거기에 따라 작성하면 나중에 커밋내역을 찾기도 수월해지고 이해하기 편하기 때문! 커밋 메시지 구조 type : subject body footer 아직 구조만 보면 뭔지 모르겠으므로 하나씩 살펴보자! type rule..

오늘은 jQuery로 스크롤 값에 따라 이벤트를 추가하는 방법을 작성해보겠다! 클론코딩하던 도중 의외로 jQuery가 많이 쓰인다는 걸 깨달았다. 그냥 단순 스크립트로 이벤트를 줄 수 있지만 훨씬 코드가 복잡해지고 어려워짐.. ㅠ 제이쿼리를 쓰면 더 직관적이고 애니메이션도 줄 수 있다. 아무튼! 사이트를 보다보면 스크롤 이펙트가 많이 사용된 사이트를 볼 수 있을 것이다. 내가 클론한 사이트 또한 스크롤마다 다양한 애니메이션과 효과가 적용됐는데 스크롤값에 따라 이벤트를 추가하는 방법을 기록하려한다.(class 추가, css 적용 등등등..) jQuery로 스크롤 이벤트 추가하기 스크롤 값에 따라 CSS 속성 변경하기 요건 헤더 부분을 스크롤 할 때마다 네비게이션이 나타나게끔 이벤트를 적용했다. 파티룸 오디..

gsap 연습할 겸 요즘 클론코딩을 자주하고있는데 처음보는 플러그인이 있어서 사용법을 기록해보려한다! 클론할 사이트는 랜딩페이지로 https://vibe.naver.com/about/ VIBENAVER VIBEvibe.naver.com vibe 서비스의 어바웃 페이지다. 요렇게 전광판 효과?로 플레이리스트를 추천하는 부분이다.CSS로만 구현해야하나 싶었는데 마침 jQuery 플러그인이 있어서 사용해볼려한다. marquee.jsMarquee.js는 HTML 요소를 효과적으로 스크롤하도록 도와주는 JavaScript 라이브러리 중 하나입니다. 이를 사용하여 웹 페이지에서 텍스트나 이미지를 자동으로 스크롤하거나 특정 동작에 따라 스크롤할 수 있습니다. 👀 사용법Marquee.js 라이브러리 추가  구조 ..

오늘은 ftp-simple 사용법에 대해 기록하려한다. 첨에 왔을 때 에디터를 vscode말고 edit plus라는 걸 쓴다했을 때 처음 들어봐서 당황했었던.... ftp 작업이 편리해서 쓰는 것 같았다. 근데 처음 쓰는 거라 익숙치 않고, 프로그램이 불안정하다는(중간에 날라갈 수도 있음..) 얘기가 나와서 어떻게든 vscode쓰고싶어 방법을 찾아봤었다. 그래서 학원 다닐 때 잠깐 쓰던 vscode 확장자가 생각났던..! 바로 ftp-simple!! 확장자를 이용하면 원격으로 리모트할 수 있다. 그래서 소스 수정하면 바로 서버에 반영이 됐었던 걸로 기억해서.. 아무튼! ftp simple 적용을 해보겠음,, ftp-simple ftp-simple은 Visual Studio Code(이하 VSCode)의 ..

반응형 작업할 때 분기점이 항상 헷갈려서 기록하려한다. 반응형 (미디어쿼리) 분기점 뷰포트 설정 뷰포트(viewport)는 웹 페이지를 표시하는 브라우저의 영역을 말합니다. 모바일 기기에서 웹 페이지를 렌더링할 때, 뷰포트는 디바이스의 화면 크기에 맞게 조정되어야 합니다. 이것을 구현하기 위해 뷰포트 메타 태그를 사용합니다. HTML 문서의 태그 안에 태그를 추가하여 뷰포트를 설정할 수 있습니다. 대부분의 모바일 브라우저는 이 설정을 읽고 웹 페이지를 올바르게 렌더링합니다. 이거 head 안에 추가해야 작동함 ,, ㅇㅇ 분기점 /* pc, 태블릿 가로 (해상도 768px ~ 1023px) */ @media all and (min-width: 768px) and (max-width: 1023px) { } ..