그냥, 일단 써내려가자

안녕하세요 무택입니다 :) 오늘은 JS를 이용해서 최신 웹디자인 및 퍼블리싱 카피를 해보려고 합니다. 기능은 마우스 올렸을 때 이미지가 나타나서 마우스를 따라다니는 기능입니다. 아래에서 자세한 내용을 살펴봅시다😀 HTML/CSS ALL IMAGE VIDEO FILM JS const div_wraps = document.querySelectorAll('.div_wrap'); document.getElementById('list_ul').addEventListener('mousemove', function(e){ const x = e.clientX; const y = e.clientY; div_wraps.forEach(function(div){ div.style.transform = `translate(${..

안녕하세요 무택입니다 :) 오늘은 마우스 움직임에 따라 배경 이미지를 움직이는 기능에 대해 써보려고 합니다. 주로 공간감을 주기 위한 장치로 자주 쓰이는데 예시와 같이 알아봐요😀 읽기 전 보면 좋은 글 [JavaScript]마우스 좌표를 구할 수 있는 다양한 방법 [jQuery]hover시 마우스 커서 커스텀하기 HTML/CSS JS $('.bg-inner').on("mousemove", function(e) { const width = $(window).width(); const height = $(window).height(); const moveX = (e.pageX - width / 2) / width; const moveY = (e.pageY - height / 2) / height; const..

안녕하세요. 무택입니다 :) 오늘은 JS에서 마우스 좌표를 구할 수 있는 메서드에 대해 소개해보려고 합니다. 웹 개발에 있어서 마우스 좌표를 구하는 일은 자주 생기기 때문에 거의 필수라고 생각하는데 아래에서 자세한 내용을 살펴보시죠😆 screenX,Y screenX,Y는 모니터(스크린) 기준으로 좌표를 표시합니다. clientX,Y clientX,Y는 브라우저 기준으로 좌표를 표시합니다. 아래 나오는 pageX,Y와 유사하지만 clientX,Y는 스크롤바를 신경 쓰지 않습니다. pageX,Y pageX,Y는 스크롤을 포함한 페이지를 기준으로 좌표를 표시합니다. offsetX,Y offsetX,Y는 특정(선택한) 요소를 기준으로 좌표를 표시합니다. See the Pen [javaScript]마우스 좌표 구..

안녕하세요 무택입니다 :) 오늘은 js에서 다양한 방법으로 페이지 이동시키는 방법에 대해 써보려고 합니다. 대체적으로 필요하지 않은 기능이지만 상황에 따라 필요할 수 있기 때문에 참고 삼아서 '이런 것도 있구나'정도로 봐주시면 좋을 것 같습니다. HTML 페이지 이동(현재창) 페이지 이동(새창) onclick 페이지 이동(현재창) onclick 페이지 이동(새창) JS var button = document.querySelector('.href'); button.addEventListener("click", function(){ window.location.href = "https://www.pinterest.co.kr/"; }); var button_02 = document.querySelector('..

clip-path를 활용한 동적인 마우스 오버 효과 See the Pen [아카이브]마우스 오버 액션(플러스엑스) by TytanLee (@TytanLee) on CodePen. 1. html 구조 - 이미지를 감싸는 영역은 총 두 개. 하나는 `:hover`를 주기 위한 영역, 하나는 `clip-path`를 설정할 영역 - `clip-path`를 준 영역에 `:hover`를 넣으면 `clip-path` 영역이 줄어들거나 늘어날 때 마우스 위치에 따라 효과가 무한 반복. 때문에 `clip-path` 영역 위에 `:hover`를 넣기 위한 영역을 만들어줘야 한다. 2. 효과 원리 - `.wrap`영역에 마우스를 올리면 이미지를 감싸고 있는 `div`의 `clip-path`를 줄이고, 그 안에 들어있는 `i..

spread operator(...) 설명 -1- var 어레이 = ['hello', 'world']; console.log(...어레이); // hello world -2- var 문자 = 'hello'; console.log(...문자); // console.log('h','e','l','l','o') h e l l o 1. Array에 붙이면 대괄호를 제거해줌 2. 문자에 붙이면 문자를 펼쳐줌 활용방법 -1- var a = [1,2,3]; var b = [4,5]; var c = [...a, ...b] console.log(c) // [1,2,3,4,5] // Deep copy var d = [1,2,3]; var e = [...d]; // var e = d => X(값이 공유됨) d[3] = 4;..

변수에 대한 정의 var 이름 = "Kim"; let 번호 = "000"; const 주소 = "서울"; const 영화 = {제목 : "명량", 개봉 : "0000.00"}; - 호이스팅 현상 : 변수나 함수의 선언을 스크립트 맨 위로 끌고 오는 현상 재선언 재할당 범위 var O O fucntion let X O { } const X X { } - var 변수는 호이스팅 시 undefined이 자동으로 할당 - const 변수는 오브젝트 내부의 값은 변경 가능(Ex.const 오브젝트 = { 이름 : '만두'; } => '만두'는 변경 가능 - 수정불가능한 오브젝트를 만드는 메소드 : Object.freeze(select); 변수 퀴즈 모달창0 모달창1 모달창2 버튼0 버튼1 버튼2 Template ..

this와 애로우 함수의 사용 // this의 쓰임 1 console.log(this); //window가 나옴 function 함수(){ console.log(this); //window가 나옴 } 함수(); //window.함수(); // this의 쓰임 2 // 오브젝트 함수 내에서 쓰면 그 함수를 갖고 있는 오브젝트를 말함 var 오브젝트 = { data : 'Kim', 함수 : function(){ console.log(this) } } 오브젝트.함수(); // 애로우 fucntion을 쓰면 함수 밖의 this를 그대로 가져옴 var 오브젝트2 = { data : 'Kim', 함수 : () => { console.log(this) } } 오브젝트2.함수(); // case study 3 var ..

폼 만들기 로그인하세요 전송 닫기 버튼 - 제이쿼리의 $(select).on('click', function(){})은 자바스크립트 select.addEventListener('click', fucntion(){})과 같은 의미 - 제이쿼리의 $(select).on('click', function(e){}) 함수 안에 `e`를 넣으면 `e.target`은 유저가 실제로 누른 것을 불러옴 - $(select).is(select)는 괄호 안의 값에 따라 `true`와 `false`로 반환함 - `.preventDefault()`는 `a`나 `submit`같이 페이지 이동이나 새로고침의 동작을 막아줌 (비슷한 예시로 `.stopPropagation`도 사용할 수 있는데 이 메서드는 이벤트버블링을 막아줌) 다크..

안녕하세요 무택입니다 :) 오늘은 마우스 커서를 커스텀할 수 있는 코드에 대해 써보려고 합니다. 최근에는 다양한 hover들이 많이 등장해서 이 기능도 자주 접해보신 분들이 많을 것 같은데, 아래에서 자세한 내용을 알아보시죠😉 HTML/CSS 자세히 보기 jQuery document.addEventListener("mousemove", (e) => { // 마우스 커서의 좌표를 가져옵니다. const x = e.clientX; const y = e.clientY; // cursor_div를 커서 좌표로 이동 $("#cursor_div").css('transform', 'translate(' + x + 'px, ' + y + 'px)'); // 원하는 영역에 올라오면 클래스 추가 및 제거 $('.img_f..